Tuval, video veya ses öğesinden MediaStream kaydedin.

Kişi adı

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 yaparken captureStream() ç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.

Daha fazla bilgi