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

แซม ดัตตัน
แซม ดัตตัน

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

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