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

Sam Dutton

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

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

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

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

โค้ด 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 ได้

รายละเอียด

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

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

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

การสาธิต

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

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