MediaStreamTrack için eklenebilir akışlar

MediaStreamTrack içeriği, değiştirilebilen veya yeni içerik oluşturmak için kullanılabilecek bir akış olarak gösterilir

Thomas Steiner

Arka plan

Media Capture and Streams API bağlamında MediaStreamTrack arayüzü, akış içindeki tek bir medya kanalını temsil eder. Genellikle ses veya video parçalarıdır ancak başka kanal türleri de olabilir. MediaStream nesneleri, çeşitli ses veya video parçalarını temsil eden sıfır veya daha fazla MediaStreamTrack nesnesinden oluşur. Her MediaStreamTrack bir veya daha fazla kanala sahip olabilir. Kanal, bir medya akışının en küçük birimini temsil eder. Örneğin, bir hoparlörle ilişkili ses sinyali (ör. bir stereo ses parçasının sol veya sağı) gibi.

MediaStreamTrack için eklenebilir akış nedir?

MediaStreamTrack için eklenebilir akışların ardındaki temel fikir, MediaStreamTrack içeriğini bir akış koleksiyonu (whatWG Streams API'de tanımlandığı şekilde) olarak ortaya çıkarmaktır. Bu akışlar, yeni bileşenleri tanıtmak için değiştirilebilir.

Geliştiricilere video (veya ses) akışına doğrudan erişim izni verdiğinizde, değişiklikleri doğrudan akışa uygulayabilirler. Buna karşılık, aynı video işleme görevinin geleneksel yöntemlerle gerçekleştirilmesi için geliştiricilerin <canvas> öğeleri gibi aracılar kullanması gerekir. (Bu tür işlemlerin ayrıntıları için bkz. video + tuval = sihir.)

Tarayıcı desteği

MediaStreamTrack için eklenebilir akışlar Chrome 94'ten desteklenir.

Kullanım alanları

MediaStreamTrack için eklenebilir akışlara yönelik kullanım alanları aşağıdakileri içerir ancak bunlarla sınırlı değildir:

  • "Komik şapkalar" veya sanal arka planlar gibi video konferans araçları.
  • Yazılım vocoder'ları gibi ses işleme.

MediaStreamTrack için eklenebilir akışlar nasıl kullanılır?

Özellik algılama

MediaStreamTrack desteği için eklenebilir akışları aşağıdaki şekilde özellik algılama ile algılayabilirsiniz.

if ('MediaStreamTrackProcessor' in window && 'MediaStreamTrackGenerator' in window) {
  // Insertable streams for `MediaStreamTrack` is supported.
}

Temel kavramlar

MediaStreamTrack için eklenebilir akışlar, WebCodecs tarafından daha önce önerilen kavramları temel alır ve MediaStreamTrack öğesini kavramsal olarak iki bileşene ayırır:

  • Bir MediaStreamTrack nesnesinin kaynağını tüketen ve medya karelerinin, özellikle VideoFrame veya AudioFrame nesnelerinin akışını oluşturan MediaStreamTrackProcessor. Bunu, kodlanmamış kareleri kanaldan ReadableStream olarak gösterebilen bir kanal havuzu gibi düşünebilirsiniz.
  • Bir medya karesi akışını tüketen ve bir MediaStreamTrack arayüzü gösteren MediaStreamTrackGenerator. Tıpkı getUserMedia() kanalından gelen bir parça gibi tüm havuzlara sağlanabilir. Giriş olarak medya karelerini alır.

MediaStreamTrackProcessor

MediaStreamTrackProcessor nesnesi readable adlı bir özelliği gösterir. MediaStreamTrack içindeki çerçevelerin okunmasını sağlar. Parça bir video parçasıysa readable kaynağından okunan parçalar VideoFrame nesne olur. Parça bir ses parçasıysa readable kaynağından okunan parçalar AudioFrame nesne olur.

MediaStreamTrackGenerator

Bir MediaStreamTrackGenerator nesne de aynı şekilde bir özelliği writable gösterir. Bu özellik, WritableStream öğesinin kendisi bir MediaStreamTrack olan MediaStreamTrackGenerator öğesine medya çerçeveleri yazmaya olanak tanır. kind özelliği "audio" ise akış AudioFrame nesnelerini kabul eder ve diğer türlerde başarısız olur. Tür "video" ise akış VideoFrame nesnelerini kabul eder ve diğer türlerde başarısız olur. writable öğesine bir çerçeve yazıldığında, çerçevenin close() yöntemi otomatik olarak çağrılır. Böylece medya kaynaklarına artık JavaScript'ten erişilemez.

MediaStreamTrackGenerator, writable alanına medya çerçeveleri yazılarak özel bir kaynağın uygulanabileceği kanaldır.

Tümünü bir araya getirin

Temel fikir, aşağıdaki gibi bir işleme zinciri oluşturmaktır:

Platform Kanalı → İşlemci → Dönüşüm → Oluşturucu → Platform Havuzları

Aşağıdaki örnekte, bir barkod tarayıcı uygulamasının canlı video akışında algılanan barkodu vurgulayan bu zinciri gösterilmektedir.

const stream = await getUserMedia({ video: true });
const videoTrack = stream.getVideoTracks()[0];

const trackProcessor = new MediaStreamTrackProcessor({ track: videoTrack });
const trackGenerator = new MediaStreamTrackGenerator({ kind: 'video' });

const transformer = new TransformStream({
  async transform(videoFrame, controller) {
    const barcodes = await detectBarcodes(videoFrame);
    const newFrame = highlightBarcodes(videoFrame, barcodes);
    videoFrame.close();
    controller.enqueue(newFrame);
  },
});

trackProcessor.readable.pipeThrough(transformer).pipeTo(trackGenerator.writable);

const videoBefore = document.getElementById('video-before');
const videoAfter = document.getElementById('video-after');
videoBefore.srcObject = stream;
const streamAfter = new MediaStream([trackGenerator]);
videoAfter.srcObject = streamAfter;

Demografi

Yukarıdaki bölümde yer alan QR kodu tarayıcı demosunu bir masaüstü veya mobil tarayıcıda çalışırken görebilirsiniz. Kameranın önünde bir QR kodu tuttuğunuzda uygulama kodu algılayıp vurgular. Uygulamanın kaynak kodunu Glitch'te görebilirsiniz.

Kullanıcının dizüstü bilgisayarının önünde tuttuğu telefonda, algılanan ve vurgulanmış bir QR kodunu gösteren, masaüstü tarayıcı sekmesinde çalışan QR kodu tarayıcı.

Güvenlik ve Gizlilikle İlgili Dikkat Edilmesi Gerekenler

Bu API'nin güvenliği, web platformundaki mevcut mekanizmalara bağlıdır. Veriler VideoFrame ve AudioFrame arayüzleri kullanılarak sunulduğundan, bu arayüzlerin kaynakla ilişkili verilerle ilgili kuralları geçerli olur. Örneğin, kaynaklar arası kaynaklardan gelen verilere, bu tür kaynaklara erişimle ilgili mevcut kısıtlamalar nedeniyle (ör. kaynaklar arası bir resmin veya video öğesinin piksellerine erişmek mümkün değildir) erişilemez. Ayrıca kameralardan, mikrofonlardan veya ekranlardan medya verilerine erişim kullanıcı yetkilendirmesine tabidir. Bu API'nin sunduğu medya verileri, halihazırda diğer API'ler üzerinden kullanılabilir.

Geri bildirim

Chromium ekibi, MediaStreamTrack için eklenebilir akışlarla ilgili deneyimlerinizi öğrenmek istiyor.

Bize API tasarımı hakkında bilgi verin

API'de beklediğiniz gibi çalışmayan bir durum mu var? Fikrinizi uygulamak için gereken yöntem veya özellikler eksik mi? Güvenlik modeliyle ilgili bir sorunuz veya yorumunuz mu var? İlgili GitHub deposuna özellik sorunu bildiriminde bulunun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili bir sorunu bildirin

Chromium'un uygulamasında bir hata buldunuz mu? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinde hata bildiriminde bulunun. Mümkün olduğunca fazla ayrıntı eklediğinizden ve yeniden oluşturmaya ilişkin basit talimatları eklediğinizden emin olun ve Bileşenler kutusuna Blink>MediaStream yazın. Glitch, hızlı ve kolay yeniden oluşturmalar paylaşmak için idealdir.

API'ye desteği gösterin

MediaStreamTrack için eklenebilir akışlar kullanmayı düşünüyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı tedarikçilerine, bu özellikleri desteklemenin ne kadar kritik olduğunu gösterir.

#InsertableStreams hashtag'ini kullanarak @ChromiumDev adresine tweet gönderip bu tweet'i nerede ve nasıl kullandığınızı bize bildirin.

Teşekkür

MediaStreamTrack spesifikasyonu için eklenebilir akışlar, Harald Alvestrand ve Guido Urdaneta tarafından yazılmıştır. Bu makale Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout ve François Beaufort tarafından incelenmiştir. Chris Montgomery tarafından Unsplash'teki hero resim.