captureStream()
yöntemi <canvas>
, <audio>
veya <video>
öğesinden MediaStream
yakalamayı mümkün kılar.
Bu, söz konusu öğelerin herhangi birinden video veya ses akışının kaydedilmesini, WebRTC ile canlı yayınlanmasını ya da <canvas>
üzerinde efektler veya diğer MediaStream
'lerle birleştirilmesini sağlar. Diğer bir deyişle captureStream()
, MediaStream
ürününün tuval, ses veya video öğeleri arasında veya bir RTCPeerConnection
ya da MediaRecorder
öğesine medya geçişi yapmasını sağlar.
Aşağıdaki demoda (WebRTC örneklerinden öğrenebilirsiniz) soldaki tuval öğesinden yakalanan bir MediaStream
, sağdaki video öğesine WebRTC eş bağlantısı üzerinden akışla yayınlanmaktadır:
(Aşağıda diğer tuval ve video örneklerinin bağlantılarını bulabilirsiniz.)
captureStream()
kodu basittir.
<canvas>
için:
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>
için:
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;
};
Ama neden?
captureStream()
yöntemi, tuval ve medya öğelerinden kaydetmeyi veya canlı yayın yapmayı mümkün kılar:
<canvas>
cihazından oyunu kaydedin ve canlı yayınlayın- Kameradan video çekin, ardından ilave içerikler veya efektler ekleyin
<canvas>
ile birden fazla videodan pencere içinde pencere efektleri oluşturun<canvas>
ile video ve resimleri (dosyalardan, kameradan ya da her ikisinden) birleştirin- Dosyadan oynatılan canlı yayın videosu
- Video veya sesli mesaj için kayıtlı sesli veya görüntülü mesajı kullanma
Esasen captureStream()
, JavaScript'in bir MediaStream öğe oluşturup "eklemesini" sağlar.
Küçük baskı
captureStream()
, Şifrelenmiş Medya Uzantıları aracılığıyla içerik koruması uygulayan bir medya öğesiyle kullanılmaya çalışıldığında istisna oluşur.Bir
<canvas>
cihazından çekim yaparkencaptureStream()
çağrıldığında maksimum kare hızı ayarlanır. Örneğin,canvas.captureStream(10)
, kanvasın 0-10 fps arasında çıkış yaptığı anlamına gelir.<canvas>
üzerinde hiçbir şey boyanmadığında hiçbir şey yakalanmaz ve<canvas>
30 fps'de boyansa bile 10 fps yakalanır.captureStream
spesifikasyonunda daha ayrıntılı bir şekilde ele alınan bir hata bulunmaktadır.captureStream()
videosunun boyutları, çağrıldığı<canvas>
ile eşleşiyor.
Demolar
Tuval
Video
Destek
- Tuval
captureStream()
: Firefox 43 veya sonraki sürümler; chrome://flags/#enable-experimental-web-platform-features etkinleştirilmiş Chrome 50 ve sonraki sürümler ya da varsayılan olarak Chrome 52 ve sonraki sürümler. - Video ve ses
captureStream()
: Varsayılan olarak chrome://flags/#enable-experimental-web-platform-features etkin olan Firefox 47; Chrome 52 ve sonraki sürümler veya varsayılan olarak Chrome 53 ve sonraki sürümler.