วิธีรับสตรีมเว็บแคมด้วยอัตราส่วนภาพ 1:1 และความละเอียดสูงสุดที่ใช้ได้

โดยพื้นฐานแล้วคำถามอยู่ในชื่อเรื่อง นี่เป็นเรื่องเกี่ยวกับฟังก์ชัน WebRTC และ getUserMedia คำถามที่คล้ายกันอยู่ที่นี่: วิธีเก็บ วิดีโออัตราส่วน 1:1 ตลอดเวลาใน WebRTC แต่ในกรณีของฉัน ฉันต้องบันทึกสตรีมโดยใช้ MediaRecorder แค่ครอบตัดองค์ประกอบวิดีโอด้วย CSS เท่านั้นยังไม่พอ ฉันสับสนเล็กน้อยเกี่ยวกับข้อจำกัดของ getUserMedia มีพารามิเตอร์spectRatio แต่ฉันไม่สามารถจัดการวิธีบรรลุผลลัพธ์ที่ต้องการได้ สิ่งที่ใช้ได้ผลสำหรับฉันคือการกำหนดข้อจำกัดในลักษณะนั้น:

const constraints = {
  audio: true,
  video: {
    width: { exact: 720 },
  }
};

แต่มันไม่ได้กำหนดความละเอียดสูงสุดโดยอัตโนมัติ คุณมีความคิดใด ๆ ที่จะทำมันอย่างชาญฉลาดหรือไม่?


javascript webrtc getusermedia
person Vitalii Ivanov    schedule 19.06.2017    source แหล่งที่มา
comment
อาจซ้ำกับ วิธีเก็บ 1: วิดีโออัตราส่วน 1 ตลอดเวลาใน WebRTC   -  person jib    schedule 19.06.2017
comment
@jib ใช่ คำถามนั้นคล้ายกัน แต่ฉันต้องการสตรีมเพื่อบันทึกโดยใช้ MediaRecorder แค่ครอบตัดองค์ประกอบวิดีโอด้วย CSS เท่านั้นยังไม่พอ   -  person Vitalii Ivanov    schedule 19.06.2017
comment
aspectRatio ยังไม่ได้นำมาใช้ใน Chrome หรือ Firefox อย่างไรก็ตาม ดูเหมือนว่าคุณคาดหวังว่า getUserMedia() จะลดขนาดเอาต์พุตของกล้องให้คุณ ไม่ใช่ทุกเบราว์เซอร์ที่ทำเช่นนี้ แต่ให้คุณค้นพบโหมดดั้งเดิมของกล้องของคุณแทน ดังนั้นการดำเนินการนี้อาจล้มเหลวด้วย OverconstrainedError แทน   -  person jib    schedule 20.06.2017
comment
ดูเหมือนว่า aspectRatio กำลังทำงานบน Chrome เวอร์ชันล่าสุดอยู่ แม้ว่าฉันจะไม่พบข้อมูลใดๆ เกี่ยวกับเรื่องนั้นก็ตาม อย่างไรก็ตาม อย่างน้อยข้อจำกัด min และ max ก็ใช้ได้กับฉันบน Chrome   -  person Piet    schedule 26.02.2018

คำตอบ (1)


arrow_upward
5
arrow_downward

กล้องบางตัวอาจไม่รองรับอัตราส่วนภาพทั้งหมด 1:1 เป็นอัตราส่วนภาพคี่อย่างแน่นอน

สิ่งที่คุณต้องทำคือทำการครอบตัดของคุณเองและสร้างสตรีมของคุณเอง คุณสามารถทำได้โดยตั้งค่า srcObject ของวิดีโอเป็น getUserMediaStream จากนั้นทุกเฟรม (ใช้ requestAnimationFrame()) วาดวิดีโอนั้นลงบนผืนผ้าใบ ด้วยวิธีครอบตัดตามที่คุณต้องการ จากนั้น ใช้ CanvasCaptureMediaStream เพื่อนำวิดีโอที่แก้ไขแล้วกลับออกมาเป็นสตรีม ซึ่งคุณสามารถใช้ในการโทรผ่าน WebRTC

person Brad    schedule 19.06.2017