Tuval, video veya ses öğesinden MediaStream kaydedin.

Sam Dutton

captureStream() yöntemi, <canvas>, <audio> veya <video> öğesinden MediaStream yakalamayı mümkün kılar.

Bu sayede, bu öğelerden herhangi birinden gelen video veya ses akışının kaydedilmesi, WebRTC üzerinden canlı olarak yayınlanması ya da <canvas> içinde efektlerle veya diğer MediaStream'lerle birleştirilmesi sağlanır. Diğer bir deyişle, captureStream(), MediaStream'un kanvas, ses veya video öğeleri arasında ya da bir RTCPeerConnection veya MediaRecorder'a medya aktarmasını sağlar.

Aşağıdaki demoda (WebRTC örnekleri bölümünde mevcuttur), sol taraftaki bir kanvas öğesinden yakalanan bir MediaStream, WebRTC eş bağlantısı üzerinden sağ taraftaki video öğesine aktarılır:

(Aşağıda daha fazla kanvas ve video örneğinin bağlantıları verilmiştir.)

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 th<e sou>rce 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 th<e sou>rce of one video element to be a stream from another.
    var stream = leftVideo.captureStream();
    rightVideo.srcObject = stream;
};

Peki neden?

captureStream() yöntemi, kanvas ve medya öğelerinden kayıt veya canlı yayın yapmanızı sağlar:

  • <canvas>'ten oyun oynayışlarını kaydetme ve yayınlama
  • Kameradan video çekip ardından ek içerik veya efekt ekleme
  • <canvas> aracılığıyla birden fazla videodan pencere içinde pencere efektleri oluşturma
  • Video ve resimleri (dosyalardan veya kameradan ya da her ikisinden de) <canvas>
  • Dosyadan oynatılan videoları canlı yayınlama
  • Video veya sesli mesaj için kaydedilmiş ses ya da video mesaj kullanma

Temel olarak captureStream(), JavaScript'in MediaStream oluşturmasına ve içine "şeyler eklemesine" olanak tanır.

Küçük yazılar

  • captureStream() öğesini, Şifrelenmiş Medya Uzantıları aracılığıyla içerik koruması uygulayan bir medya öğesiyle kullanmaya çalışmak istisna oluşturur.

  • <canvas>'ten yakalama yapılırken maksimum kare hızı, captureStream() çağrıldığında ayarlanır. Örneğin, canvas.captureStream(10), kanvasın 0 ile 10 fps arasında çıktı verdiğini gösterir. <canvas>'ye hiçbir şey boyanmadığında hiçbir şey yakalanmaz ve <canvas> 30 FPS'de boyansa bile 10 FPS yakalanır. captureStream spesifikasyonunda, daha fazla tartışma içeren bir hata var.

  • 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(): Firefox 47; chrome://flags/#enable-experimental-web-platform-features etkinleştirilmiş Chrome 52 ve sonraki sürümler veya varsayılan olarak Chrome 53 ve sonraki sürümler.

Daha fazla bilgi