เมธอด captureStream()
ช่วยให้สามารถบันทึก MediaStream
จากองค์ประกอบ <canvas>
, <audio>
หรือ <video>
ซึ่งจะทำให้ระบบบันทึกสตรีมวิดีโอหรือเสียงจากองค์ประกอบต่างๆ เหล่านี้ สตรีมแบบสดผ่าน WebRTC หรือรวมกับเอฟเฟกต์หรือ MediaStream
อื่นๆ ใน <canvas>
ได้ กล่าวคือ captureStream()
จะช่วยให้ MediaStream
ส่งผ่านสื่อกลับไปกลับมาระหว่างองค์ประกอบ Canvas เสียง หรือวิดีโอ หรือไปยัง RTCPeerConnection
หรือ MediaRecorder
ได้
ในการสาธิตต่อไปนี้ (ดูได้จากตัวอย่าง WebRTC) MediaStream
ที่บันทึกจากองค์ประกอบ Canvas ทางด้านซ้ายจะสตรีมผ่านการเชื่อมต่อเพียร์ 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>
- ถ่ายวิดีโอจากกล้อง แล้วเพิ่มเนื้อหาหรือเอฟเฟกต์เพิ่มเติม
- สร้างเอฟเฟกต์การแสดงภาพซ้อนภาพจากวิดีโอหลายรายการผ่าน
<canvas>
- รวมวิดีโอและรูปภาพ (จากไฟล์หรือกล้อง หรือทั้ง 2 อย่าง) ใน
<canvas>
- สตรีมวิดีโอแบบสดที่เล่นจากไฟล์
- ใช้ข้อความเสียงหรือข้อความวิดีโอที่บันทึกไว้สําหรับวิดีโอหรือข้อความเสียง
โดยพื้นฐานแล้ว captureStream()
จะเปิดใช้ JavaScript เพื่อสร้างและ "แทรกเนื้อหา" ลงใน MediaStream
The Small Print
การพยายามใช้
captureStream()
กับองค์ประกอบสื่อที่ใช้การปกป้องเนื้อหาผ่านส่วนขยายสื่อที่เข้ารหัสจะทำให้มีข้อยกเว้นเมื่อจับภาพจาก
<canvas>
ระบบจะตั้งค่าอัตราเฟรมสูงสุดเมื่อมีการเรียกใช้captureStream()
ตัวอย่างเช่นcanvas.captureStream(10)
หมายความว่า Canvas ให้เอาต์พุตระหว่าง 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 ขึ้นไปโดยค่าเริ่มต้น