Merekam MediaStream dari elemen kanvas, video, atau audio

Sam Dutton

Metode captureStream() memungkinkan untuk merekam MediaStream dari elemen <canvas>, <audio>, atau <video>.

Hal ini memungkinkan streaming video atau audio dari salah satu elemen ini direkam, di-live stream melalui WebRTC, atau digabungkan dengan efek atau MediaStream lainnya dalam <canvas>. Dengan kata lain, captureStream() memungkinkan MediaStream meneruskan media bolak-balik antara elemen kanvas, audio, atau video — atau ke RTCPeerConnection atau MediaRecorder.

Dalam demo berikut (tersedia dari contoh WebRTC), MediaStream yang diambil dari elemen kanvas di sebelah kiri di-streaming melalui koneksi peer WebRTC ke elemen video di sebelah kanan:

(Ada link ke contoh kanvas dan video lainnya di bawah.)

Kode captureStream() sederhana.

Untuk <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;

Untuk <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;
};

Tapi kenapa?

Metode captureStream() memungkinkan Anda merekam atau melakukan live stream dari elemen kanvas dan media:

  • Merekam dan melakukan streaming gameplay dari <canvas>
  • Merekam video dari kamera, lalu menambahkan konten atau efek tambahan
  • Buat efek picture-in-picture dari beberapa video melalui <canvas>
  • Gabungkan video dan gambar (dari file atau kamera atau keduanya) dalam <canvas>
  • Melakukan live stream video yang diputar dari file
  • Menggunakan pesan audio atau video yang direkam untuk pesan suara atau video

Pada dasarnya, captureStream() memungkinkan JavaScript membuat dan "menyuntikkan sesuatu" ke dalam MediaStream.

Teks kecil

  • Mencoba menggunakan captureStream() dengan elemen media yang menerapkan perlindungan konten melalui Encrypted Media Extensions akan memunculkan pengecualian.

  • Saat merekam dari <canvas>, kecepatan frame maksimum ditetapkan saat captureStream() dipanggil. Misalnya, canvas.captureStream(10) berarti output kanvas antara 0 dan 10 fps. Tidak ada yang direkam jika tidak ada yang digambar di <canvas>, dan 10 fps direkam meskipun <canvas> digambar pada 30 fps. Ada bug dengan diskusi lebih lanjut yang dilaporkan pada spesifikasi captureStream.

  • Dimensi video captureStream() cocok dengan <canvas> tempat video tersebut dipanggil.

Demo

Kanvas

Video

Dukungan

  • Canvas captureStream(): Firefox 43 atau yang lebih baru; Chrome 50 dan yang lebih baru dengan chrome://flags/#enable-experimental-web-platform-features diaktifkan, atau Chrome 52 dan yang lebih baru secara default.
  • Video dan audio captureStream(): Firefox 47; Chrome 52 dan yang lebih baru dengan chrome://flags/#enable-experimental-web-platform-features diaktifkan, atau Chrome 53 dan yang lebih baru secara default.

Cari tahu lebih lanjut