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ışı kaydedilebilir, WebRTC üzerinden canlı yayınlanabilir ya da MediaStream'lar ile birleştirilerek <canvas>'da efektler veya diğer MediaStream'lar eklenebilir. Başka bir deyişle, captureStream(), MediaStream öğesinin tuval, ses veya video öğeleri arasında ya da RTCPeerConnection veya MediaRecorder öğesine medya aktarmasına olanak tanır.

Aşağıdaki demoda (WebRTC örneklerinden edinilebilir), soldaki bir tuval öğesinden alınan MediaStream, sağdaki video öğesine WebRTC eş bağlantısı üzerinden aktarılıyor:

(Daha fazla kanvas ve video örneğinin bağlantılarını aşağıda 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;
};

Peki neden?

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

  • <canvas> cihazında oyun oynayışını kaydetme ve yayınlama
  • Kameradan video çekip ek içerik veya efekt ekleme
  • <canvas> aracılığıyla birden fazla videodan pencere içinde pencere efektleri oluşturma
  • Dosyalardan, kameradan veya her ikisinden de alınan videoları ve resimleri <canvas> içinde birleştirme
  • Dosyadan oynatılan videoları canlı yayınlama
  • Video veya sesli posta için kaydedilmiş bir sesli ya da görüntülü mesaj kullanma

captureStream(), JavaScript'in MediaStream'e "bir şeyler yerleştirmesini" ve bunu oluşturmasını sağlar.

Küçük yazı

  • captureStream() öğesini, Encrypted Media Extensions aracılığıyla içerik koruması uygulayan bir medya öğesiyle kullanmaya çalışmak istisna oluşturur.

  • <canvas> cihazından çekim yaparken maksimum kare hızı, captureStream() çağrıldığında ayarlanır. Örneğin, canvas.captureStream(10), tuvalin 0 ile 10 FPS arasında çıkış verdiğini gösterir. <canvas> üzerine hiçbir şey çizilmediğinde hiçbir şey yakalanmaz ve <canvas> üzerine 30 FPS hızında çizim yapılsa bile 10 FPS hızında yakalama yapılır. captureStream spesifikasyonuyla ilgili daha fazla tartışma içeren bir hata kaydı var.

  • captureStream() video boyutları, üzerinde görüşme yapılan <canvas> ile eşleşir.

Demolar

Canvas

Video

Destek

  • Canvas captureStream(): Firefox 43 veya üzeri; chrome://flags/#enable-experimental-web-platform-features etkinleştirilmiş Chrome 50 ve üzeri ya da varsayılan olarak Chrome 52 ve üzeri.
  • Video ve ses captureStream(): Firefox 47; Chrome 52 ve sonraki sürümler (chrome://flags/#enable-experimental-web-platform-features etkinleştirilmiş olmalıdır) veya Chrome 53 ve sonraki sürümler (varsayılan olarak).

Daha fazla bilgi