Konten MediaStreamTrack
ditampilkan sebagai streaming yang dapat dimanipulasi atau digunakan untuk membuat konten baru
Latar belakang
Dalam konteks
Media Capture and Streams API,
antarmuka MediaStreamTrack
mewakili satu trek media dalam satu streaming; biasanya, trek tersebut adalah trek audio atau video,
tetapi jenis trek lainnya mungkin ada.
Objek MediaStream
terdiri dari
nol atau beberapa objek MediaStreamTrack
, yang mewakili berbagai trek audio atau video. Setiap
MediaStreamTrack
mungkin memiliki satu atau beberapa saluran. Saluran ini merepresentasikan unit terkecil dari
aliran 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 untuk mengekspos konten
MediaStreamTrack
sebagai kumpulan streaming (seperti yang didefinisikan oleh
Streams API HOWWG). Aliran data ini dapat dimanipulasi untuk memperkenalkan komponen
baru.
Memberi developer akses ke streaming video (atau audio) secara langsung memungkinkan mereka menerapkan
modifikasi secara langsung ke streaming. Sebaliknya, untuk mewujudkan tugas manipulasi video yang sama dengan
metode tradisional, developer harus menggunakan perantara seperti elemen <canvas>
. (Untuk mengetahui detail jenis proses ini, lihat, misalnya, video + kanvas = magic.)
Dukungan browser
Streaming yang dapat disisipkan untuk MediaStreamTrack
didukung dari 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 streaming yang dapat disisipkan untuk MediaStreamTrack
Deteksi fitur
Anda dapat mendeteksi streaming yang dapat disisipkan untuk dukungan MediaStreamTrack
seperti 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 objekMediaStreamTrack
dan menghasilkan aliran frame media, khususnya objekVideoFrame
atauAudioFrame
). Anda dapat menganggap ini sebagai sink jalur yang mampu mengekspos frame yang tidak dienkode dari jalur sebagaiReadableStream
.MediaStreamTrackGenerator
, yang menggunakan aliran frame media dan menampilkan antarmukaMediaStreamTrack
. Jalur ini dapat diberikan ke sink mana pun, seperti jalur darigetUserMedia()
. Dibutuhkan {i>frame<i} media sebagai input.
MediaStreamTrackProcessor
Objek MediaStreamTrackProcessor
mengekspos satu properti, readable
. Hal ini memungkinkan untuk membaca
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 data akan menerima objek AudioFrame
dan gagal dengan jenis lainnya. Jika jenisnya adalah
"video"
, aliran data akan menerima objek VideoFrame
dan akan gagal dengan jenis lainnya. Saat frame ditulis ke writable
, metode close()
frame akan otomatis dipanggil, sehingga resource medianya tidak lagi dapat diakses dari JavaScript.
MediaStreamTrackGenerator
adalah jalur tempat sumber kustom
dapat diimplementasikan 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 rangkaian ini untuk aplikasi pemindai kode batang yang menandai kode batang yang terdeteksi di 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 cara kerjanya pada browser desktop atau seluler. Pegang kode QR di depan kamera, lalu aplikasi akan mendeteksinya 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. Karena data ditampilkan menggunakan antarmuka VideoFrame
dan AudioFrame
, aturan antarmuka tersebut untuk menangani data yang tercemar asal akan berlaku. Misalnya, data dari resource lintas origin tidak dapat diakses karena
adanya batasan untuk mengakses resource tersebut (misalnya, piksel
gambar atau elemen 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 oleh API ini sudah tersedia
melalui API lain.
Masukan
Tim Chromium ingin mengetahui pengalaman Anda dengan streaming yang dapat disisipkan untuk
MediaStreamTrack
.
Beri tahu kami tentang desain API
Apakah ada sesuatu pada API yang tidak berfungsi seperti yang Anda harapkan? Atau apakah ada metode atau properti yang hilang yang Anda butuhkan untuk menerapkan ide Anda? Apakah Anda memiliki pertanyaan atau komentar tentang model keamanan? Laporkan masalah spesifikasi di repo GitHub yang sesuai, atau tambahkan pendapat Anda ke masalah yang sudah ada.
Melaporkan masalah terkait penerapan
Apakah Anda menemukan bug pada implementasi Chromium? Atau apakah implementasinya berbeda dari 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 berfungsi dengan baik 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 lain betapa pentingnya mendukung
fitur tersebut.
Kirim tweet ke @ChromiumDev menggunakan hashtag
#InsertableStreams
dan beri tahu kami di mana dan bagaimana Anda menggunakannya.
Link bermanfaat
Ucapan terima kasih
Streaming 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. Banner besar oleh
Chris Montgomery di
Unsplash.