Merekam MediaStream dari elemen kanvas, video, atau audio

Budi Budiman

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

Hal ini memungkinkan streaming video atau audio dari elemen tersebut untuk 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 akan di-streaming melalui koneksi pembanding WebRTC ke elemen video di sebelah kanan:

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

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

Mengapa?

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

  • Rekam dan streaming gameplay dari <canvas>
  • Rekam video dari kamera, lalu tambahkan konten atau efek lain
  • Buat efek picture-in-picture dari beberapa video melalui <canvas>
  • Menggabungkan video dan gambar (dari file, kamera, atau keduanya) dalam <canvas>
  • Video live stream yang diputar dari file
  • Menggunakan rekaman pesan audio atau video untuk video atau pesan suara

Pada dasarnya, captureStream() memungkinkan JavaScript membuat dan "memasukkan hal-hal" ke dalam MediaStream.

Cetak kecil

  • Mencoba menggunakan captureStream() dengan elemen media yang mengimplementasikan perlindungan konten melalui Ekstensi Media Terenkripsi akan menampilkan pengecualian.

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

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

Demo

Canvas

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 selengkapnya