Siapkan sampanye dan donat. Fitur Chrome yang paling banyak diberi bintang kini telah diterapkan.
Bayangkan perekam ski yang menyinkronkan video dengan data GeoLocation, atau aplikasi memo suara yang sangat sederhana, 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. API ini kini tersedia di Firefox dan Chrome untuk Android dan desktop.
Cobalah di sini.
API ini mudah, yang akan saya tunjukkan menggunakan kode dari demo repo contoh WebRTC. Perhatikan bahwa API hanya dapat digunakan dari origin yang aman: HTTPS atau localhost.
Pertama, buat instance MediaRecorder dengan MediaStream. Secara opsional, 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(). - Bagian penerima panggilan WebRTC.
- Perekaman layar.
- Audio Web, setelah masalah ini diterapkan.
Untuk options, Anda dapat menentukan jenis MIME dan, pada masa mendatang, bitrate 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.
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() secara opsional dapat diberi argumen timeSlice yang menentukan panjang media yang akan diambil untuk setiap Blob.
Setelah selesai merekam, beri tahu MediaRecorder:
mediaRecorder.stop();
Putar 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 beberapa 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 untuk merekam audio dan video tanpa plugin relatif baru untuk aplikasi web, jadi kami sangat menghargai masukan Anda tentang API.
- Bug penerapan MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demo: github.com/webrtc/samples
Kami juga ingin mengetahui skenario penggunaan yang paling penting bagi Anda, dan fitur apa yang ingin Anda prioritaskan. Berikan komentar pada 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 perangkat seluler!)
- Merekam video dan menguploadnya ke YouTube dengan elemen
<google-youtube-upload>kustom eksperimental
Aplikasi
- Aplikasi Voice Memos Paul Lewis kini memiliki dukungan MediaRecorder, yang diisi ulang 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: 'Under Consideration'
Spek
w3c.github.io/mediacapture-record/MediaRecorder.html