Streaming yang dapat disisipkan untuk MediaStreamTrack

Thomas Steiner

Dipublikasikan: 4 Mei 2021

Dalam konteks Media Capture and Streams API, antarmuka MediaStreamTrack mewakili satu trek media dalam streaming. Biasanya, ini adalah trek audio atau video, tetapi jenis trek lain mungkin ada.

Objek MediaStream terdiri dari nol atau lebih objek MediaStreamTrack, yang mewakili berbagai trek audio atau video. Setiap MediaStreamTrack dapat memiliki satu atau beberapa channel. Channel merepresentasikan unit terkecil dari 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 aliran yang dapat disisipkan untuk MediaStreamTrack adalah untuk mengekspos konten MediaStreamTrack sebagai kumpulan aliran (seperti yang ditentukan oleh Streams API WHATWG). Aliran ini dapat dimanipulasi untuk memperkenalkan komponen baru.

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

Dukungan browser

Aliran 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 aliran yang dapat disisipkan untuk dukungan MediaStreamTrack sebagai berikut.

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

Konsep inti

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

  • MediaStreamTrackProcessor, yang menggunakan sumber objek MediaStreamTrack dan menghasilkan streaming frame media, khususnya objek VideoFrame atau AudioFrame). Anda dapat menganggapnya sebagai sinkronisasi trek yang dapat mengekspos frame yang tidak dienkode dari trek sebagai ReadableStream.
  • MediaStreamTrackGenerator, yang menggunakan aliran frame media dan mengekspos antarmuka MediaStreamTrack. Objek ini dapat diberikan ke tujuan mana pun, seperti trek dari getUserMedia(). Model 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, potongan yang dibaca dari readable akan menjadi objek VideoFrame. Jika trek 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 menerima objek AudioFrame dan gagal dengan jenis lainnya. Jika jenisnya adalah "video", aliran menerima objek VideoFrame dan gagal dengan jenis lainnya. Saat frame ditulis ke writable, metode close() frame akan otomatis dipanggil, sehingga resource media tidak lagi dapat diakses dari JavaScript.

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

Menyatukan semuanya

Ide utamanya adalah membuat rantai pemrosesan sebagai berikut:

Platform Track → Processor → Transform → Generator → Platform Sinks

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

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 beroperasi di browser desktop atau seluler. Pegang kode QR di depan kamera dan aplikasi akan mendeteksinya dan menandainya. Anda dapat melihat kode sumber aplikasi di GitHub.

Pemindai kode QR yang berjalan di tab browser desktop menampilkan kode QR yang terdeteksi dan ditandai di ponsel yang dipegang pengguna di depan kamera laptop.

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 untuk menangani data yang tercemar asal berlaku. Misalnya, data dari resource lintas origin tidak dapat diakses karena pembatasan yang ada pada akses ke resource tersebut (misalnya, piksel elemen gambar atau video lintas origin tidak dapat diakses). Selain itu, akses ke data media dari kamera, mikrofon, atau layar tunduk pada otorisasi pengguna. Data media yang diekspos API ini sudah tersedia melalui API lain.

Masukan

Tim Chromium ingin mengetahui pengalaman Anda menggunakan aliran yang dapat disisipkan untuk MediaStreamTrack.

Beri tahu kami tentang desain API

Apakah ada sesuatu tentang API yang tidak berfungsi seperti yang Anda harapkan? Atau, apakah ada metode atau properti yang tidak ada dan perlu Anda terapkan untuk mewujudkan ide Anda? Apakah Anda memiliki pertanyaan atau komentar tentang model keamanan? Laporkan masalah spesifikasi di repositori 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 untuk mereproduksi, dan masukkan Blink>MediaStream di kotak Komponen.

Dukungan untuk API

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

Kirim tweet ke @ChromiumDev menggunakan hashtag #InsertableStreams dan beri tahu kami di mana dan bagaimana Anda menggunakannya.

Ucapan terima kasih

Spesifikasi aliran yang dapat disisipkan untuk MediaStreamTrack ditulis oleh Harald Alvestrand dan Guido Urdaneta. Hal ini ditinjau oleh Harald Alvestrand, Joe Medley, Ben Wagner, Huib Kleinhout, dan François Beaufort.