MediaStreamTrack için eklenebilir akışlar

MediaStreamTrack içeriği, üzerinde değişiklik yapılabilen veya yeni içerik oluşturmak için kullanılabilen bir akış olarak gösterilir.

Thomas Steiner

Arka plan

Media Capture and Streams API bağlamında MediaStreamTrack arayüzü, bir akıştaki tek bir medya kanalını temsil eder. Bunlar genellikle ses veya video kanalları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, stereo ses parçasında sol veya sağ gibi belirli bir hoparlörle ilişkili bir ses sinyali.

MediaStreamTrack için yerleştirilebilir akışlar nedir?

MediaStreamTrack için yerleştirilebilir akışların temel fikri, MediaStreamTrack içeriğini akışlar koleksiyonu (WHATWG Streams API tarafından tanımlandığı şekilde) olarak göstermektir. Bu akışlar, yeni bileşenler tanıtmak için değiştirilebilir.

Geliştiricilerin video (veya ses) akışına doğrudan erişmesine izin vermek, doğrudan akışa değişiklik uygulamalarını sağlar. Buna karşılık, aynı video manipülasyon görevini geleneksel yöntemlerle gerçekleştirmek için geliştiricilerin <canvas> öğeleri gibi aracılar kullanması gerekir. (Bu tür bir işlemin ayrıntıları için video + kanvas = sihir başlıklı makaleyi inceleyebilirsiniz.)

Tarayıcı desteği

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

Kullanım alanları

MediaStreamTrack için eklenebilir akışlara yönelik kullanım örnekleri 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 yerleştirilebilir akışları kullanma

Özellik algılama

MediaStreamTrack desteği için, özellik algılamayla eklenebilir akışları aşağıdaki şekilde ayarlayabilirsiniz.

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 kavramlar üzerine kurulur ve MediaStreamTrack öğesini kavramsal olarak iki bileşene böler:

  • MediaStreamTrack nesnesinin kaynağını kullanan ve özellikle VideoFrame veya AudioFrame) öğeleri içeren bir medya çerçevesi akışı oluşturan MediaStreamTrackProcessor. Bunu, kodlanmamış kareleri kanaldaki ReadableStream olarak gösterebilen bir parça havuzu gibi düşünebilirsiniz.
  • Bir medya karesi akışını tüketen ve bir MediaStreamTrack arayüzünü gösteren MediaStreamTrackGenerator. Tıpkı getUserMedia() parçaları gibi, herhangi bir havuza gönderilebilir. Giriş olarak medya karelerini alır.

MediaStreamTrackProcessor

MediaStreamTrackProcessor nesnesi, readable özelliğini açığa çıkarıyor. MediaStreamTrack'ten kareleri okumaya olanak tanır. Kanal bir video kanalıysa readable'ten okunan parçalar VideoFrame nesnesi olur. Parça bir ses parçasıysa readable'ten okunan parçalar AudioFrame nesneleri olur.

MediaStreamTrackGenerator

MediaStreamTrackGenerator nesnesi de writable adlı bir özellik gösterir. Bu özellik, kendisi bir MediaStreamTrack olan MediaStreamTrackGenerator'ye medya çerçeveleri yazılmasına olanak tanıyan bir WritableStream'dir. 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 nesneleri kabul eder ve diğer türlerle başarısız olur. writable işlevine 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 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 → İşlemci → Dönüşüm → Oluşturucu → Platform Havuzları

Aşağıdaki örnekte, canlı video yayını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 çalışır halde görebilirsiniz. Kameranın önüne bir QR kodu tutun. Uygulama, kodu algılayıp vurgular. Uygulamanın kaynak kodunu Glitch'te 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üne tuttuğu telefonda algılanan ve vurgulanan bir QR kodunu gösteriyor.

Güvenlik ve gizlilikle ilgili dikkat edilmesi gereken hususlar

Bu API'nin güvenliği, web platformundaki mevcut mekanizmalara dayanır. Veriler VideoFrame ve AudioFrame arayüzleri kullanılarak açığa çıkarıldığından, bu arayüzlerin kaynak elde edilen verileri ele alma kuralları geçerli olur. Örneğin, kaynaklar arası kaynaklardan gelen verilere, bu tür kaynaklara erişimle ilgili mevcut kısıtlamalar nedeniyle erişilemez (ör. kaynaklar arası resmin veya video öğesinin piksellerine erişmek mümkün değildir). Ayrıca, kameralardan, mikrofonlardan veya ekranlardan alınan medya verilerine erişim kullanıcı yetkilendirmesine tabidir. Bu API'nin sağladığı medya verileri zaten diğer API'ler aracılığıyla kullanılabilir.

Geri bildirim

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

API tasarımı hakkında bilgi verin

API ile ilgili olarak beklediğiniz gibi çalışmayan bir şey var mı? Yoksa fikrinizi uygulamak için ihtiyaç duyduğunuz yöntemler veya özellikler eksik mi? Güvenlik modeliyle ilgili sorunuz veya yorumunuz var mı? İlgili GitHub deposunda spesifikasyon sorunu oluşturun veya mevcut bir soruna düşüncelerinizi ekleyin.

Uygulamayla ilgili sorunları bildirme

Chromium'un uygulamasında bir hata mı buldunuz? Yoksa uygulama, spesifikasyondan farklı mı? new.crbug.com adresinden hata kaydı oluşturun. Mümkün olduğunca fazla ayrıntı ekleyin, hatayı yeniden oluşturmayla ilgili basit talimatlar verin ve Bileşenler kutusuna Blink>MediaStream yazın. Glitch, hızlı ve kolay yeniden oluşturma işlemlerini paylaşmak için idealdir.

API'yi destekleme

MediaStreamTrack için eklenebilir canlı yayınları kullanmayı planlıyor musunuz? Herkese açık desteğiniz, Chromium ekibinin özelliklere öncelik vermesine yardımcı olur ve diğer tarayıcı tedarikçi firmalarına bu özellikleri desteklemenin ne kadar önemli olduğunu gösterir.

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

Teşekkür ederiz

MediaStreamTrack spesifikasyonu için eklenebilen 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 incelendi. Unsplash'tan Chris Montgomery tarafından oluşturulan hero resim.