Rekam Cross Browser Media yang Kompatibel – Artikel oleh Christoph Guttandin – Beragampengetahuan

Cara termudah untuk merekam media di browser Anda adalah dengan menggunakan MediaRecorder. Ini telah tersedia di semua browser sejak 2021. Namun, menggunakannya untuk benar -benar merekam audio dan video yang kompatibel adalah sebuah tantangan. Untungnya, ini telah berubah.

Kurangnya format wajib

Mediarecorder yang ditentukan oleh spesifikasi perekaman Mediastream adalah API tingkat tinggi untuk merekam media di browser. Sengaja mudah digunakan. Masalah dengan media, adalah bahwa itu dapat direkam dalam berbagai format. Namun, spesifikasi tidak menentukan format mana yang harus didukung. Itu hanya mengatakan bahwa browser harus dapat memutar file yang direkamnya. Itu ditulis di bagian deskripsi mimeType milik.

Agen pengguna harus dapat memutar ulang semua jenis rekaman MIME yang didukung. Misalnya, itu harus bisa berada di HTML

Akibatnya, setiap vendor browser mengimplementasikan format favorit mereka. Firefox sangat enggan menjadi codec yang dilindungi. Di sisi lain, Apple sepertinya tidak menyukai codec gratis. Chrome berada di suatu tempat di antaranya. Google telah membeli beberapa paten di masa lalu hanya untuk membuat beberapa codec gratis. Tetapi Chrome juga mengirim dengan beberapa codec yang dilindungi paten. Akhirnya, tidak ada format tunggal yang dapat direkam di setiap browser.

Jika Anda ingin membangun solusi yang benar -benar interoperable yang dapat merekam dan memainkan media di setiap browser, Anda harus mentranskode media yang sudah dikodekan yang telah dikodekan dengan codec lossy. Atau, jika Anda tidak keberatan dalam jumlah besar data yang direkam dalam format yang tidak terkompresi di browser terlebih dahulu. Rekaman kemudian dapat digunakan untuk menyandikannya ke dalam berbagai format yang berbeda. Saya membangun catatan media yang dapat diperluas untuk melakukan ini.

Format pertama didukung di semua browser

Untungnya, banyak hal telah berubah dengan rilis Safari 18.4. Sejak saat itu, pemeriksaan kontainer berikut harus kembali true Di Chrome, Firefox, dan Safari.

MediaRecorder.isTypeSupported(
    'audio/webm; codecs=opus'
);
MediaRecorder.isTypeSupported(
    'video/webm; codecs=opus, vp8'
);

Sekarang semua browser mendukung audio perekaman karena opus dibungkus dalam wadah webm. Demikian pula, merekam video di VP8 juga didukung, di mana opus yang dibungkus dalam wadah Webm juga didukung.

VP8 bukan codec paling modern untuk video yang dikodekan. Ini mendapat superseed dari VP9 (sudah didukung di Chrome dan Safari) dan AV1 (sudah didukung di Chrome). Tapi ini awalnya. Saya sangat suka format pertama yang mendukung di semua browser berasal dari kategori bebas royalti.

Demonstrasi yang mencolok

Hanya untuk memastikan isTypeSupported() Tidak berbohong kepada kami, saya membangun beberapa demo yang dapat Anda coba di sini. Kotak berikut menunjukkan userAgent String browser. Menekan tombol menghasilkan dan merekam akan mengubah string menjadi serangkaian nada DTMF dan menghasilkan beberapa visual dasar. Semua ini akan direkam dengan Mediarecorder.

Perhatikan bahwa ini akan berisik dan mencolok.

Sayangnya, rekaman harus dilakukan secara real time. Ini adalah salah satu batasan perintah Cina. Tapi setelah selesai, Anda dapat mengunduh file hasilnya. Simpan di disk dan setelah membuka halaman ini di browser yang berbeda, pilih tabel di bawah ini.

Setelah menambahkan file ke formulir di atas trek audio, analisis dilakukan untuk membaca nada DTMF untuk akhirnya membangun kembali string pengguna yang digunakan untuk melakukan perekaman. Jika semuanya berjalan dengan baik, Anda akan melihat pengguna browser yang digunakan untuk merekam file dalam kotak merah muda di atas video.

membatasi

Ini belum sempurna. File yang dihasilkan dapat diputar di setiap browser, tetapi mereka dapat dimainkan tanpa menggunakan pemutar media bawaan pada macOS. VLC akan senang bermain. Mendukung file webm di semua browser sangat bagus, tetapi itu tidak berarti bahwa format tersebut diadopsi dan didukung secara luas.

Hal lain yang perlu diperhatikan adalah bahwa tidak ada browser yang akan menghasilkan file yang mendukung pencarian. Untuk melakukan ini, file perlu menyertakan Seekhead dan elemen cepat, seperti yang dijelaskan dalam panduan muxer. Saat menghasilkan file perekaman dalam blok, tidak mungkin untuk menulis elemen -elemen ini. MediaRecorder perlu mendukung pola ini karena saat menggunakan parameter Timeslice atau memanggil requestData (), bagian tersebut dapat diminta sebelum file selesai. Tetapi contoh di atas tidak melakukan ini. File yang direkam kemungkinan berisi elemen yang diperlukan.

Lebih banyak detail kutu buku

Tidak hanya ada banyak format file dan codec yang berbeda untuk dipilih. Ada banyak cara untuk menyandikan media dalam format yang sama. Ada cukup pengaturan untuk disesuaikan. Saat menggunakan MediaRecorder, hanya ada beberapa yang dapat mengendalikannya.

Bit rate adalah salah satu dari beberapa hal yang dapat dikontrol. Namun, contoh di atas tidak menentukan masing -masing AudioBitsScond, VideObitSepend, atau Bitpersecond. Dibandingkan dengan Safari, nilai -nilai ini default ke nilai yang berbeda di Chrome dan Firefox. Tetapi mengubah nilai -nilai ini sebenarnya dapat merusak kompatibilitas browser silang. Misalnya, mengatur nilai AudioBitsScond ke 510 Kbps, misalnya, file yang tidak dapat diputar di Safari akan direkam di Chrome.

Opus audio codec mengkode audio dalam bingkai durasi tertentu. Secara default, bingkai berisi 20ms audio. Ini juga nilai default yang digunakan oleh WebRTC. Chrome dan Firefox juga menggunakannya untuk merekam. WebKit memilih bingkai dengan durasi minimum 2,5 ms. Nilai ini tidak dapat dikontrol saat menggunakan MediaRecorder.

Wadah Webm dapat menentukan MuxingApp dan WritingApp. Chrome dan Safari mengaturnya masing -masing ke Chrome dan Webkit. Firefox mengaturnya ke QtmuxingAppLibWebM-0.0.1 dan QtwritingappLibwebm-0.0.1.

Terakhir namun tidak kalah pentingnya, file yang dihasilkan oleh Chrome dan Firefox secara teknis adalah apa yang dikatakan MKValidator, alat verifikasi resmi.

Hanya awal

API WebCodec saat ini diimplementasikan di semua browser. Sebagai produk sampingan dari karya ini, lebih banyak codec mencapai kompatibilitas lintas-browser. Pada titik tertentu, codec ini juga dapat digunakan dengan Mediarecorder.

Sampai saat itu, perpustakaan seperti perpustakaan dapat dikombinasikan dengan WebCodec untuk secara efektif merekam lebih banyak format yang kompatibel dengan silang-browser. WebCodec bukan tanpa masalah kompatibilitas, tetapi perpustakaan Anda benar -benar dirancang untuk menyelesaikan masalah ini. Tapi saya akan meninggalkan topik ini untuk artikel mendatang.