Streaming yang dapat disisipkan untuk MediaStreamTrack

Konten MediaStreamTrack ditampilkan sebagai streaming yang dapat dimanipulasi atau digunakan untuk membuat konten baru

Thomas Steiner

Latar belakang

Dalam konteks Media Capture dan Streams API, antarmuka MediaStreamTrack mewakili satu trek media dalam satu streaming; biasanya, ini adalah trek audio atau video, tetapi mungkin ada jenis trek lainnya. Objek MediaStream terdiri dari nol objek MediaStreamTrack atau lebih, yang mewakili berbagai trek audio atau video. Setiap MediaStreamTrack dapat memiliki satu atau beberapa saluran. Saluran mewakili unit terkecil streaming media, seperti sinyal audio yang terkait dengan speaker tertentu, seperti kiri atau kanan dalam trek audio stereo.

Apa itu streaming yang dapat disisipkan untuk MediaStreamTrack?

Ide inti di balik streaming yang dapat disisipkan untuk MediaStreamTrack adalah mengekspos konten MediaStreamTrack sebagai kumpulan streaming (seperti yang ditentukan oleh WHATWG Streams API). Aliran ini dapat dimanipulasi untuk memperkenalkan komponen baru.

Memberikan akses ke streaming video (atau audio) secara langsung memungkinkan developer menerapkan perubahan langsung ke streaming. Sebaliknya, untuk mewujudkan tugas manipulasi video yang sama dengan metode tradisional, developer harus menggunakan perantara seperti elemen <canvas>. (Untuk mengetahui detail tentang jenis proses ini, lihat, misalnya, video + Canvas = magic.)

Dukungan browser

Streaming yang dapat disisipkan untuk MediaStreamTrack didukung mulai Chrome 94.

Kasus penggunaan

Kasus penggunaan untuk streaming yang dapat disisipkan untuk MediaStreamTrack mencakup, tetapi tidak terbatas pada:

• Gadget konferensi video seperti "topi lucu" atau latar belakang virtual.
• Pemrosesan suara seperti vocoder software.

Cara menggunakan aliran yang dapat disisipkan untuk MediaStreamTrack

Deteksi fitur

Anda dapat mendeteksi fitur streaming yang dapat disisipkan untuk dukungan MediaStreamTrack sebagai berikut.

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

Konsep inti

Streaming yang dapat disisipkan untuk MediaStreamTrack dibuat berdasarkan konsep yang sebelumnya diusulkan oleh WebCodecs dan secara konseptual membagi MediaStreamTrack menjadi dua komponen:

• MediaStreamTrackProcessor, yang menggunakan sumber objek MediaStreamTrack dan menghasilkan aliran frame media, khususnya objek VideoFrame atau AudioFrame). Anda dapat menganggap hal ini sebagai sink trek yang mampu mengekspos frame yang tidak dienkode dari trek sebagai ReadableStream.
• MediaStreamTrackGenerator, yang menggunakan streaming frame media dan mengekspos antarmuka MediaStreamTrack. Ini dapat diberikan ke sink apa pun, seperti trek dari getUserMedia(). Fungsi ini menggunakan frame media sebagai input.

MediaStreamTrackProcessor

Objek MediaStreamTrackProcessor mengekspos satu properti, readable. Hal ini memungkinkan pembacaan frame dari MediaStreamTrack. Jika trek adalah trek video, bagian yang dibaca dari readable akan menjadi objek VideoFrame. Jika trek tersebut adalah trek audio, potongan yang dibaca dari readable akan menjadi objek AudioFrame.

MediaStreamTrackGenerator

Objek MediaStreamTrackGenerator juga mengekspos satu properti, writable, yang merupakan WritableStream yang memungkinkan penulisan frame media ke MediaStreamTrackGenerator, yang merupakan MediaStreamTrack. Jika atribut kind adalah "audio", aliran data menerima objek AudioFrame dan gagal dengan jenis lainnya. Jika jenisnya "video", streaming akan menerima objek VideoFrame dan gagal dengan jenis lainnya. Jika sebuah frame ditulis ke writable, metode close() frame akan dipanggil secara otomatis sehingga resource medianya tidak lagi dapat diakses dari JavaScript.

MediaStreamTrackGenerator adalah jalur yang sumber kustomnya dapat diterapkan dengan menulis frame media ke kolom writable-nya.

Manfaatkan semuanya

Ide utamanya adalah membuat rantai pemrosesan sebagai berikut:

Jalur Platform → Prosesor → Transformasi → Generator → Sink Platform

Contoh di bawah mengilustrasikan rantai ini untuk aplikasi pemindai kode batang yang menandai kode batang yang terdeteksi dalam streaming video live.

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

Anda dapat melihat demo pemindai kode QR dari bagian di atas yang sedang berjalan di browser desktop atau seluler. Dekatkan kode QR ke depan kamera dan aplikasi akan mendeteksi dan menandainya. Anda dapat melihat kode sumber aplikasi di Glitch.

Pertimbangan Keamanan dan Privasi

Keamanan API ini bergantung pada mekanisme yang ada di platform web. Saat data diekspos menggunakan antarmuka VideoFrame dan AudioFrame, aturan antarmuka tersebut yang menangani data yang tercemar asal akan berlaku. Misalnya, data dari resource lintas-asal tidak dapat diakses karena adanya batasan untuk mengakses resource tersebut (misalnya, tidak dapat mengakses piksel elemen gambar atau video lintas-asal). Selain itu, akses ke data media dari kamera, mikrofon, atau layar tunduk pada otorisasi pengguna. Data media yang ditampilkan API ini sudah tersedia melalui API lain.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda dengan streaming yang dapat disisipkan untuk MediaStreamTrack.

Ceritakan kepada kami tentang desain API

Apakah ada sesuatu terkait API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang diperlukan untuk menerapkan ide Anda? Apakah Anda memiliki pertanyaan atau komentar tentang model keamanan? Ajukan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang ada.

Melaporkan masalah terkait penerapan

Apakah Anda menemukan bug pada penerapan Chromium? Atau apakah implementasinya berbeda dengan spesifikasi? Laporkan bug di new.crbug.com. Pastikan untuk menyertakan detail sebanyak mungkin, petunjuk sederhana untuk mereproduksi, dan masukkan Blink>MediaStream di kotak Components. Glitch sangat cocok untuk berbagi repro yang cepat dan mudah.

Menunjukkan dukungan untuk API

Apakah Anda berencana menggunakan streaming yang dapat disisipkan untuk MediaStreamTrack? Dukungan publik Anda membantu tim Chromium memprioritaskan fitur dan menunjukkan kepada vendor browser lainnya betapa pentingnya mendukung mereka.

Kirim tweet ke @ChromiumDev menggunakan hashtag #InsertableStreams dan beri tahu kami tempat dan cara Anda menggunakannya.

Link bermanfaat

• Draf spesifikasi
• Penjelas
• ChromeStatus
• Bug Chromium
• Peninjauan TAG
• Repo GitHub

Ucapan terima kasih

Stream yang dapat disisipkan untuk spesifikasi MediaStreamTrack ditulis oleh Harald Alvestrand dan Guido Urdaneta. Artikel ini ditinjau oleh Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout, dan François Beaufort. Gambar hero oleh Chris Montgomery di Unsplash.