จับภาพ 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 th<e sou>rce 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 th<e sou>rce 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 ไปยังการเชื่อมต่อแบบ Peer-to-Peer

วิดีโอ

• สตรีมจากองค์ประกอบวิดีโอไปยังองค์ประกอบวิดีโอ
• สตรีมจากองค์ประกอบวิดีโอไปยังการเชื่อมต่อแบบเพียร์

การสนับสนุน

• 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 ขึ้นไปโดยค่าเริ่มต้น

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

• ข้อบกพร่องในการใช้งาน Firefox
• สถานะแพลตฟอร์ม Chrome