จับภาพ MediaStream จากองค์ประกอบ Canvas วิดีโอ หรือเสียง

Sam Dutton

เมธอด captureStream() ช่วยให้สามารถจับ MediaStream จากองค์ประกอบ <canvas>, <audio> หรือ <video>

ซึ่งจะช่วยให้บันทึกสตรีมวิดีโอหรือเสียงจากองค์ประกอบเหล่านี้ ไลฟ์สตรีมผ่าน WebRTC หรือรวมกับเอฟเฟกต์หรือMediaStreamอื่นๆ ใน<canvas>ได้ กล่าวคือ captureStream() ช่วยให้ MediaStream ส่งสื่อไปมาระหว่างองค์ประกอบแคนวาส เสียง หรือวิดีโอ หรือส่งไปยัง RTCPeerConnection หรือ MediaRecorder ได้

ในตัวอย่างต่อไปนี้ (มีอยู่ในตัวอย่าง WebRTC) ระบบจะสตรีม MediaStream ที่บันทึกจากองค์ประกอบ Canvas ทางด้านซ้ายผ่านการเชื่อมต่อแบบ Peer ของ WebRTC ไปยังองค์ประกอบวิดีโอทางด้านขวา

(มีลิงก์ไปยังตัวอย่างภาพพิมพ์แคนวาสและวิดีโอเพิ่มเติมด้านล่าง)

รหัส captureStream() นั้นใช้งานง่าย

สำหรับ <canvas>

var canvas = document.querySelector('canvas');
var video = document.querySelector('video');

// Optional frames per second argument.
var stream = canvas.captureStream(25);
// Set the source of the <video> element to be the stream from the <canvas>.
video.srcObject = stream;

สำหรับ <video>

var leftVideo = document.getElementById('leftVideo');
var rightVideo = document.getElementById('rightVideo');

leftVideo.onplay = function() {
    // Set the source of one <video> element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

แต่ทำไม

วิธีการ captureStream() ช่วยให้สามารถบันทึกหรือสตรีมแบบสดจากแคนวาสและองค์ประกอบสื่อได้ ดังนี้

  • บันทึกและสตรีมเกมเพลย์จาก <canvas>
  • บันทึกวิดีโอจากกล้อง แล้วเพิ่มเนื้อหาหรือเอฟเฟกต์เพิ่มเติม
  • สร้างเอฟเฟกต์ภาพซ้อนภาพจากวิดีโอหลายรายการผ่าน <canvas>
  • รวมวิดีโอและรูปภาพ (จากไฟล์หรือกล้องหรือทั้ง 2 อย่าง) ใน <canvas>
  • วิดีโอสตรีมแบบสดที่เล่นจากไฟล์
  • ใช้ข้อความเสียงหรือวิดีโอที่บันทึกไว้สำหรับวิดีโอหรือข้อความเสียง

โดยพื้นฐานแล้ว captureStream() ช่วยให้ JavaScript สร้างและ "แทรกข้อมูล" ลงใน MediaStream ได้

ข้อมูลเล็กๆ น้อยๆ

  • การพยายามใช้ captureStream() กับองค์ประกอบสื่อที่ใช้การป้องกันเนื้อหาผ่านส่วนขยายสื่อที่เข้ารหัสจะทำให้เกิดข้อยกเว้น

  • เมื่อจับภาพจาก <canvas> ระบบจะตั้งค่าอัตราเฟรมสูงสุดเมื่อเรียกใช้ captureStream() เช่น canvas.captureStream(10) หมายความว่าภาพพิมพ์แคนวาสแสดงผลระหว่าง 0 ถึง 10 fps ระบบจะไม่บันทึกเมื่อไม่มีภาพวาดบน <canvas> และระบบจะบันทึก 10 fps แม้ว่าจะมีการวาดภาพบน <canvas> ที่ 30 fps ก็ตาม มีการยื่นข้อบกพร่องที่มีรายละเอียดเพิ่มเติมในข้อกำหนดของ captureStream

  • ขนาดของวิดีโอ captureStream() ตรงกับ <canvas> ที่เรียกใช้

เดโม

ผ้าใบ

วิดีโอ

การสนับสนุน

  • Canvas captureStream(): Firefox 43 ขึ้นไป, Chrome 50 ขึ้นไปที่เปิดใช้ chrome://flags/#enable-experimental-web-platform-features หรือ Chrome 52 ขึ้นไปโดยค่าเริ่มต้น
  • วิดีโอและเสียง captureStream(): Firefox 47, Chrome 52 ขึ้นไปที่เปิดใช้ chrome://flags/#enable-experimental-web-platform-features หรือ Chrome 53 ขึ้นไปโดยค่าเริ่มต้น

ดูข้อมูลเพิ่มเติม