Cómo grabar audio y video con MediaRecorder

¡Saca el champán y las donas! Ya se implementó la función de Chrome más destacada.

Imagina una grabadora de carrera en esquí que sincroniza videos con datos de ubicación geográfica, una app de notas de voz muy simple 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. Ahora está disponible en Firefox y en Chrome para Android y computadoras de escritorio.

Pruébala aquí.

Captura de pantalla de la demostración de mediaRecorder en Android Nexus 5X

La API es sencilla, y lo 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);

Un MediaStream puede provenir de las siguientes fuentes:

  • Una llamada a getUserMedia()
  • La parte receptora de una llamada de WebRTC.
  • Una grabación de pantalla
  • Web Audio, una vez que se implemente este problema.

Para options, es posible especificar el tipo de MIME y, más adelante, las tasas de bits de audio y video.

Los tipos de MIME tienen valores más o menos específicos, que combinan contenedor y 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 cuando hay datos disponibles. De manera opcional, al método start() se le puede proporcionar un argumento timeSlice que especifique la longitud de contenido multimedia que se capturará para cada BLOB.

Cuando hayas terminado de grabar, indícale al MediaRecorder lo siguiente:

mediaRecorder.stop();

Para reproducir los Blobs grabados en un elemento de video, crea un “super-BLOB” a partir del arreglo de BLOB grabados:

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

También puedes subir el archivo a un servidor a través de XHR o utilizar una API como YouTube (consulta la demostración experimental que se encuentra más abajo).

La descarga se puede lograr mediante el hackeo 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 en las apps web, por lo que apreciamos especialmente tus comentarios sobre las APIs.

También nos gustaría saber qué situaciones de uso consideras más importantes y qué funciones te gustaría que prioricemos. Comenta este artículo o realiza un seguimiento del progreso en crbug.com/262211.

Demostraciones

Aplicaciones

  • La app Voice Memos de Paul Lewis ahora es compatible con MediaRecorder, que admite polyfills para 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 permite grabar desde un nodo de la API de Web Audio. Puedes ver esto en acción en la app Voice Memos de Paul Lewis.

Navegadores compatibles

  • De forma predeterminada, Chrome 49 y versiones posteriores
  • Computadoras de escritorio Chrome 47 y 48 con funciones de plataforma web experimental habilitadas desde chrome://flags
  • Firefox a partir de la versión 25
  • Edge: “En consideración”

Especificaciones

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

Información de la API

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