Merekam audio dan video dengan MediaRecorder

Sam Dutton

Pecahkan sampanye dan donat! Fitur Chrome paling berbintang kini telah diimplementasikan.

Bayangkan perekam ski yang menyinkronkan video dengan data GeoLocation, atau aplikasi memo suara yang sangat simpel, atau widget yang memungkinkan Anda merekam video dan menguploadnya ke YouTube — semuanya tanpa plugin.

MediaRecorder API memungkinkan Anda merekam audio dan video dari aplikasi web. Fitur ini sekarang tersedia di Firefox dan di Chrome untuk Android serta desktop.

Cobalah di sini.

Catatan: Penjelasan tentang dukungan - Untuk menggunakan MediaRecorder di Chrome 47 dan 48, aktifkan fitur Platform Web eksperimental dari halaman chrome://flags. - Perekaman audio dapat dilakukan di Firefox dan Chrome 49 dan yang lebih baru; Chrome 47 dan 48 hanya mendukung perekaman video. - Di Chrome pada Android, Anda dapat menyimpan dan mendownload rekaman yang dibuat dengan MediaRecorder. Namun, Anda belum dapat melihat rekaman dalam elemen video melalui window.URL.createObjectURL(). Lihat bug ini.

API ini mudah, yang akan saya tunjukkan menggunakan kode dari demo repo contoh WebRTC. Perlu diperhatikan bahwa API hanya dapat digunakan dari asal yang aman: HTTPS atau localhost.

Pertama, buat instance MediaRecorder dengan MediaStream. Atau, gunakan parameter options untuk menentukan format output yang diinginkan:

var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);

MediaStream dapat berasal dari:

• Panggilan getUserMedia().
• Akhir penerimaan panggilan WebRTC.
• Rekaman layar.
• Audio Web, setelah masalah ini diterapkan.

Untuk options, Anda dapat menentukan jenis MIME dan, di masa mendatang, kecepatan bit audio dan video.

Jenis MIME memiliki nilai yang kurang lebih spesifik, yang menggabungkan container dan codec. Contoh:

• audio/webm
• video/webm
• video/webm;codecs=vp8
• video/webm;codecs=vp9

Gunakan metode statis MediaRecorder.isTypeSupported() untuk memeriksa apakah jenis MIME didukung, misalnya saat Anda membuat instance MediaRecorder:

var options;
if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) {
    options = {mimeType: 'video/webm; codecs=vp9'};
} else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
    options = {mimeType: 'video/webm; codecs=vp8'};
} else {
    // ...
}

Daftar lengkap jenis MIME yang didukung oleh MediaRecorder di Chrome tersedia di sini.

Perhatian: Pembuatan instance akan gagal jika browser tidak mendukung jenis MIME yang ditentukan, jadi gunakan MediaRecorder.isTypeSupported() atau try/catch — atau jangan gunakan argumen options jika Anda puas dengan default browser.

Selanjutnya, tambahkan pengendali data dan panggil metode start() untuk mulai merekam:

var recordedChunks = [];

var options = {mimeType: 'video/webm;codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();

function handleDataAvailable(event) {
    if (event.data.size > 0) {
    recordedChunks.push(event.data);
    } else {
    // ...
    }
}

Contoh ini menambahkan Blob ke array recordedChunks setiap kali data tersedia. Metode start() dapat diberi argumen timeSlice yang menentukan panjang media yang akan diambil untuk setiap Blob.

Setelah selesai merekam, beri tahu MediaRecorder:

mediaRecorder.stop();

Mainkan Blob yang direkam dalam elemen video dengan membuat 'super-Blob' dari array Blob yang direkam:

function play() {
    var superBuffer = new Blob(recordedChunks);
    videoElement.src =
    window.URL.createObjectURL(superBuffer);
}

Atau, Anda dapat mengupload ke server melalui XHR, atau menggunakan API seperti YouTube (lihat demo eksperimental di bawah).

Download dapat dilakukan dengan peretasan link:

function download() {
    var blob = new Blob(recordedChunks, {
    type: 'video/webm'
    });
    var url = URL.createObjectURL(blob);
    var a = document.createElement('a');
    document.body.appendChild(a);
    a.style = 'display: none';
    a.href = url;
    a.download = 'test.webm';
    a.click();
    window.URL.revokeObjectURL(url);
}

Masukan tentang API dan demo

Kemampuan merekam audio dan video tanpa plugin relatif baru bagi aplikasi web, jadi kami sangat menghargai masukan Anda tentang API.

• Bug implementasi MediaRecorder: crbug.com/262211
• Chrome: crbug.com/new
• Firefox: bugzil.la
• Demo: github.com/webrtc/samples

Kami juga ingin tahu skenario penggunaan apa yang paling penting bagi Anda, dan fitur apa yang Anda ingin kami prioritaskan. Komentari artikel ini atau lacak progresnya di crbug.com/262211.

Demo

• webrtc.github.io/samples/src/content/getusermedia/record
• simpl.info/mr (kode yang sama, URL yang lebih mudah untuk seluler!)
• Merekam video dan menguploadnya ke YouTube dengan elemen <google-youtube-upload> kustom eksperimental

Aplikasi

• Aplikasi Voice Memos Paul Lewis sekarang memiliki dukungan MediaRecorder, yang di-polyfill untuk browser yang tidak mendukung audio MediaRecorder.

Polyfill

• MediaStreamRecorder Muaz Khan adalah library JavaScript untuk merekam audio dan video yang kompatibel dengan MediaRecorder.
• Recorderjs memungkinkan perekaman dari node Web Audio API. Anda dapat melihat cara kerjanya di aplikasi Voice Memos Paul Lewis.

Dukungan browser

• Chrome 49 dan yang lebih baru secara default
• Chrome desktop 47 dan 48 dengan fitur Platform Web Eksperimental yang diaktifkan dari chrome://flags
• Firefox dari versi 25
• Edge: 'Dalam Pertimbangan'

Spesifikasi

w3c.github.io/mediacapture-record/MediaRecorder.html

Informasi API

developer.mozilla.org/en/docs/Web/API/MediaRecorder_API