Bu sayfa, Cloud Translation API ile çevrilmiştir.

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, geleneksel yöntemlerle aynı video düzenleme görevini gerçekleştirmek için geliştiricilerin <canvas> öğeleri gibi aracılar kullanması gerekir. (Bu tür bir sürecin ayrıntıları için video + kanvas = sihir başlıklı makaleyi inceleyebilirsiniz.)

Tarayıcı desteği

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

Kullanım alanları

MediaStreamTrack için yerleştirilebilir akışların 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 yerleştirilebilir akışları kullanma

Özellik algılama

MediaStreamTrack desteği için yerleştirilebilir akışları aşağıdaki gibi özellik algılayabilirsiniz.

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

Temel kavramlar

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

MediaStreamTrack nesnesinin kaynağını kullanan ve özellikle VideoFrame veya AudioFrame) nesneleri içeren bir medya çerçevesi akışı oluşturan MediaStreamTrackProcessor. Bunu, parçadaki kodlanmamış kareleri ReadableStream olarak gösterebilen bir parça alıcısı olarak düşünebilirsiniz.
Bir medya karesi akışı kullanan ve MediaStreamTrack arayüzü gösteren MediaStreamTrackGenerator. getUserMedia()'teki bir parça gibi herhangi bir akışa sağlanabilir. Giriş olarak medya karelerini alır.

`MediaStreamTrackProcessor`

MediaStreamTrackProcessor nesnesi bir readable özelliği gösterir. 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 nesnelerini kabul eder ve diğer türlerde başarısız olur. Bir çerçeve writable içine yazıldığında çerçevenin close() yöntemi otomatik olarak çağrılır. Böylece, medya kaynaklarına JavaScript'den artık 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 kanalı → İşlemci → Dönüşüm → Oluşturucu → Platform alıcılar

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, QR kodu tarayıcı demosunu masaüstü veya mobil tarayıcıda çalışırken 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 gerekenler

Bu API'nin güvenliği, web platformundaki mevcut mekanizmalara dayanır. Veriler VideoFrame ve AudioFrame arayüzleri kullanılarak sunulduğundan, bu arayüzlerin kaynakta bozuk verilerle ilgili kuralları geçerlidir. Örneğin, kaynak farklı olan kaynaklardaki verilere, bu kaynaklara erişmeyle ilgili mevcut kısıtlamalar nedeniyle erişilemez (ör. kaynak farklı olan bir resim veya video öğesinin piksellerine erişilemez). 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 yerleştirilebilir akışları 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.

Faydalı bağlantılar

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.