¡Descorcha el champán y saca los donuts! Se implementó la función de Chrome más destacada de la historia.
Imagina una grabadora de descensos de esquí que sincronice el video con datos de Geolocalización, una app de notas de voz muy sencilla o un widget que te permita 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 demo de la muestra del repositorio 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 forma 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);
MediaStream puede ser de las siguientes fuentes:
- Una llamada a
getUserMedia() - Es el extremo receptor de una llamada de WebRTC.
- Una grabación de pantalla
- Audio web, 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;codecs=vp8
- video/webm;codecs=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, el método start() puede recibir un argumento timeSlice que especifique la duración del contenido multimedia que se capturará para cada BLOB.
Cuando termines de grabar, di lo siguiente a MediaRecorder:
mediaRecorder.stop();
Para reproducir los blobs grabados en un elemento de video, crea un "superblob" a partir del array de blobs 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 (mismo código, URL más fácil 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