MediaStreamTrack için eklenebilir akışlar

MediaStreamTrack içeriği, üzerinde değişiklik yapılabilecek 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ü, bir akış içindeki tek bir medya parçasını temsil eder. Bunlar genellikle ses veya video parçalarıdır ancak başka parça türleri de olabilir. MediaStream nesneleri, çeşitli ses veya video parçalarını temsil eden sıfır ya da 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, stereo ses parçasında sol veya sağ gibi belirli bir hoparlörle ilişkili ses sinyali.

MediaStreamTrack için yerleştirilebilir yayınlar nedir?

MediaStreamTrack için eklenebilir akışların temel amacı, MediaStreamTrack içeriğini bir akış koleksiyonu olarak (WHATWG Streams API'si tarafından tanımlandığı şekilde) kullanıma sunmaktır. Bu akışlar, yeni bileşenler eklemek için değiştirilebilir.

Geliştiricilere video (veya ses) akışına doğrudan erişim izni vermek, akışta doğrudan değişiklik yapmalarına olanak tanır. Buna karşılık, aynı video manipülasyonu görevini geleneksel yöntemlerle gerçekleştirmek için geliştiricilerin <canvas> öğeleri gibi aracıları kullanması gerekir. (Bu tür bir işlemle ilgili ayrıntılar için örneğin video + canvas = magic başlıklı makaleye bakın.)

Tarayıcı desteği

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

Kullanım alanları

MediaStreamTrack için eklenebilir yayınlara yönelik kullanım alanları şunlardır ancak bunlarla sınırlı değildir:

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

MediaStreamTrack için eklenebilir yayınları kullanma

Özellik algılama

MediaStreamTrack desteği için eklenebilir akışları aşağıdaki gibi özellik algılama yoluyla ekleyebilirsiniz.

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

Temel kavramlar

MediaStreamTrack için eklenebilir akışlar, daha önce WebCodecs tarafından önerilen kavramlara dayanır ve MediaStreamTrack'yı kavramsal olarak iki bileşene ayırır:

  • MediaStreamTrackProcessor, MediaStreamTrack nesnesinin kaynağını tüketir ve özellikle VideoFrame veya AudioFrame) nesneleri olmak üzere bir medya çerçevesi akışı oluşturur. Bunu, parçadaki kodlanmamış kareleri ReadableStream olarak gösterebilen bir parça havuzu olarak düşünebilirsiniz.
  • Bir medya kareleri akışını kullanan ve MediaStreamTrackGenerator arayüzü sunan MediaStreamTrack. getUserMedia()'daki bir parça gibi herhangi bir çıkışa sağlanabilir. Giriş olarak medya karelerini alır.

MediaStreamTrackProcessor

MediaStreamTrackProcessor nesnesi, readable özelliğini kullanıma sunar. MediaStreamTrack'dan kare okumaya olanak tanır. Parça bir video parçasıysa readable konumundan okunan parçalar VideoFrame nesneleri olur. Parça bir ses parçasıysa readable öğesinden okunan parçalar AudioFrame nesneleri olur.

MediaStreamTrackGenerator

Benzer şekilde, bir MediaStreamTrackGenerator nesnesi de bir özelliği (writable) kullanıma sunar. Bu özellik, MediaStreamTrackGenerator'ya medya çerçeveleri yazmaya olanak tanıyan bir WritableStream'dir. MediaStreamTrackGenerator ise MediaStreamTrack'dir. kind özelliği "audio" ise akış AudioFrame nesnelerini kabul eder ve diğer tüm türlerde başarısız olur. Tür "video" ise akış, VideoFrame nesnelerini kabul eder ve diğer tüm türlerde hata verir. Bir çerçeve writable öğesine 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 kaynak uygulanabilen bir parçadır.

Tümünü bir araya getirin

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

Platform Track → Processor → Transform → Generator → Platform Sinks

Aşağıdaki örnekte, canlı video akışında algılanan barkodu vurgulayan bir barkod tarayıcı uygulaması için bu zincir 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;

Demo

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

Masaüstü tarayıcı sekmesinde çalışan QR kodu tarayıcı, kullanıcının dizüstü bilgisayarın kamerasının önünde tuttuğu telefonda algılanan ve vurgulanan bir QR kodunu gösteriyor.

Güvenlik ve gizlilik ile ilgili dikkat edilmesi gerekenler

Bu API'nin güvenliği, web platformundaki mevcut mekanizmalara dayanır. Veriler VideoFrame ve AudioFrame arayüzleri kullanılarak kullanıma sunulduğunda, kaynakla kirlenmiş verilerle ilgili bu arayüzlerin kuralları geçerli olur. Örneğin, kaynaklar arası kaynaklardaki verilere, bu tür kaynaklara erişimle ilgili mevcut kısıtlamalar nedeniyle erişilemez (ör. kaynaklar arası bir resim veya video öğesinin piksellerine erişilemez). Ayrıca, kameralardan, mikrofonlardan veya ekranlardan alınan medya verilerine erişim için kullanıcı yetkilendirmesi gerekir. Bu API'nin sunduğu medya verileri, diğer API'ler aracılığıyla zaten kullanılabilir.

Geri bildirim

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

API tasarımı hakkında bilgi verin.

API'nin beklentilerinizi karşılamayan bir yönü var mı? Yoksa fikrinizi uygulamak için eksik yöntemler veya özellikler mi var? Güvenlik modeliyle ilgili sorunuz veya yorumunuz var mı? İlgili GitHub deposunda bir spesifikasyon sorunu bildirin veya düşüncelerinizi mevcut bir soruna ekleyin.

Uygulamayla ilgili sorun bildirme

Chromium'un uygulanmasıyla ilgili bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata bildirin. Mümkün olduğunca fazla ayrıntı ve hatayı yeniden oluşturmayla ilgili basit talimatlar eklediğinizden emin olun. Ayrıca Bileşenler kutusuna Blink>MediaStream girin.

API'ye desteğinizi gösterme

MediaStreamTrack için yerleştirilebilir yayınları kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özellikleri önceliklendirmesine yardımcı olur ve diğer tarayıcı satıcılarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

#InsertableStreams hashtag'ini kullanarak @ChromiumDev hesabına tweet gönderin ve nerede, 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. Unsplash'teki Chris Montgomery'nin hero resmi.