¡Saca el champán y los donuts! Se implementó la función de Chrome más destacada de la historia.
Imagina una grabadora de carrera de esquí que sincroniza el video con los datos de ubicación geográfica, una aplicación muy sencilla de notas de voz o un widget que te permite grabar un video y subirlo a YouTube, todo sin complementos.
La API de MediaRecorder te permite grabar audio y video desde una app web. Ya está disponible en Firefox y Chrome para Android y computadoras.
Pruébala aquí.
La API es sencilla, lo que demostraré con el código de la demostración del repositorio de muestra de WebRTC. Ten en cuenta que la API solo se puede usar desde orígenes seguros: HTTPS o localhost.
Primero, crea una instancia de MediaRecorder con un MediaStream. De manera opcional, usa un parámetro options para especificar el formato de salida deseado:
var options = {mimeType: 'video/webm; codecs=vp9'};
mediaRecorder = new MediaRecorder(stream, options);
El MediaStream puede ser desde:
- Una llamada a
getUserMedia() - Es el extremo receptor de una llamada de WebRTC.
- Una grabación de pantalla
- Web Audio, una vez que se implemente este problema
En el caso de options, es posible especificar el tipo de MIME y, en el futuro, los bitrates de audio y video.
Los tipos MIME tienen valores más o menos específicos que combinan el contenedor y los códecs. Por ejemplo:
- audio/webm
- video/webm
- video/webm;códecs=vp8
- video/webm;códecs=vp9
Usa el método estático MediaRecorder.isTypeSupported() para verificar si se admite un tipo de MIME, por ejemplo, cuando creas una instancia de 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 {
// ...
}
La lista completa de los tipos de MIME compatibles con MediaRecorder en Chrome está disponible aquí.
A continuación, agrega un controlador de datos y llama al método start() para comenzar a grabar:
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 {
// ...
}
}
En este ejemplo, se agrega un Blob al array recordedChunks cada vez que los datos están disponibles. De manera opcional, al método start() se le puede dar un argumento timeSlice que especifique la longitud del contenido multimedia que se debe capturar para cada BLOB.
Cuando termines de grabar, di lo siguiente a MediaRecorder:
mediaRecorder.stop();
Para reproducir los BLOB grabados en un elemento de video, crea un "super-Blob" a partir del array de BLOB grabados:
function play() {
var superBuffer = new Blob(recordedChunks);
videoElement.src =
window.URL.createObjectURL(superBuffer);
}
Como alternativa, puedes subir el archivo a un servidor a través de XHR o usar una API como YouTube (consulta la demostración experimental a continuación).
La descarga se puede lograr con algunos hackeos de vínculos:
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);
}
Comentarios sobre las APIs y las demostraciones
La capacidad de grabar audio y video sin complementos es relativamente nueva para las apps web, por lo que agradecemos especialmente tus comentarios sobre las APIs.
- Error de implementación de MediaRecorder: crbug.com/262211
- Chrome: crbug.com/new
- Firefox: bugzil.la
- Demostraciones: github.com/webrtc/samples
También nos gustaría saber qué situaciones de uso son más importantes para ti y qué funciones te gustaría que priorizáramos. Deja un comentario en este artículo o haz un seguimiento del progreso en crbug.com/262211.
Demostraciones
- webrtc.github.io/samples/src/content/getusermedia/record
- simpl.info/mr (el mismo código y una URL más sencilla para dispositivos móviles)
- Graba un video y súbelo a YouTube con un elemento
<google-youtube-upload>personalizado experimental
Aplicaciones
- La app de Voice Memos de Paul Lewis ahora es compatible con MediaRecorder, que se reemplaza en los navegadores que no admiten audio de MediaRecorder.
Polyfills
- MediaStreamRecorder de Muaz Khan es una biblioteca de JavaScript para grabar audio y video compatible con MediaRecorder.
- Recorderjs habilita la grabación desde un nodo de la API de Web Audio. Puedes ver esto en acción en la app de Notas de voz de Paul Lewis.
Navegadores compatibles
- Chrome 49 y versiones posteriores de forma predeterminada
- Chrome para computadoras de escritorio 47 y 48 con funciones experimentales de la plataforma web habilitadas desde chrome://flags
- Firefox a partir de la versión 25
- Edge: “En consideración”
Spec
w3c.github.io/mediacapture-record/MediaRecorder.html