Cómo activar la cámara y capturar vídeos desde tu PWA

En este tutorial aprenderemos a utilizar la API nativa de navegador que nos permite activar la cámara de nuestro ordenador y dispositivo móvil y capturar vídeos con audio.

🎥 Aprende a capturar vídeos desde la cámara con tan sólo un poco de HTML y algo de JavaScript

Volvemos con un nuevo tutorial que enlaza sí o sí con uno anterior, en el que hablamos sobre cómo activar el micrófono en tu PWA. En esta ocasión, os quería presentar una variante sobre la api "MediaRecorder" en la que, además de capturar audio desde el micrófono de tu ordenador o móvil, puedes capturar vídeo. Genial, ¿no? :)

Recordemos: Qué es la API MediaStream Recording

La API de proceso MediaStream, a veces llamada Media Stream API o Stream API, es parte de la norma WebRTC y describe un flujo de datos de audio o video. Los métodos para trabajar con ellos, las limitaciones asociadas con este tipo de datos, las respuestas de error y éxito, al usar los datos asincrónicamente y, los eventos que se disparan durante el proceso.

De nuevo, los principales eventos con los que trabajaremos serán "start", "stop" y "dataavailable".

Cómo obtener vídeo desde una Progressive Web Application

Lo primero que debemos hacer, es utilizar el método "MediaDevices.getUserMedia()" con el que otorgar al usuario, mediante una ventana emergente, la posibilidad de aceptar los permisos de activación de la cámara desde el navegador.

En este caso, debemos proporcionar las propiedades "audio" y "video" con valor true para que estos permisos sean efectivos en ambos features.

  // Declare global variables.
  const globalStream = null;
  
  // Active permisions of navigator for record video with audio.
  navigator.mediaDevices
    .getUserMedia({ audio: true, video: true })
    .then((stream) => { 
      globalStream = stream;
    });

Como segundo paso es necesario, al igual que con el audio, instanciar el objeto "MediaRecorder" con el tipo de dato o mimeType en el que queramos almacenar el vídeo, teniendo siempre en cuenta los que están y no disponibles en cada navegador.

  // Define config.
  const config = {mimeType: 'video/webm'};
  const globalStream = null;

  // Init instance MediaRecorder.
  const mediaRecorder = new MediaRecorder(globalStream, config);  

Aquí os dejo dos enlaces de interés:
MDN Mozilla - MediaRecorder.mimeType
MDN Mozilla - Web video codec guide

En tercer lugar, trabajaremos con los listener necesarios. Por un lado con "dataavailable" que nos permitirá ir almacenando trozo a trozo, o como comúnmente se llama “chunk a chunk”, cada parte del video que estamos generando para que, tras finalizar todo nuestro vídeo, podamos generar una url de archivo para su envío a un servidor o descarga del mismo.

Aquí os dejo un pequeño ejemplo de código en relación a esto último:

  // Declare array empty for save chunks.
  let recordedChunks = [];

  // Event for save data recorered into array chunks.
  mediaRecorder.addEventListener('dataavailable', (e) => {
    if (e.data.size > 0) {
      recordedChunks.push(e.data);
    }
  });

  // Event stop where you can execute custom actions.
  mediaRecorder.addEventListener('stop', function() {
    console.log('addEventListener stop');

    // Create object url from blob.
    const objectRef = URL.createObjectURL(new Blob(recordedChunks));
  });

Finalmente, estos eventos hay que lanzarlos de alguna forma. A modo de PoC, puedes crearte un proyecto que tenga dos elementos “button” en tu archivo index.html con los que ejecutar los métodos "mediaRecorder.start()" y "mediaRecorder.stop()".

  // Start recorder event of media recorder instance.
  mediaRecorder.start();

  // Stop recorder event of media recorder instance.
  mediaRecorder.stop();

Streaming de vídeo y audio

Sí, estás en lo cierto, estamos hablando de poder crear un proyecto web con el que poder realizar streaming de contenido visual como cualquiera de las plataformas que hay actualmente en el mercado. Ten en cuenta que al estar utilizando tecnología nativa del navegador, al igual que estas otras plataformas, te acercas a la posibilidad de crear un simple y a su vez complejo servicio de grabación/emisión de contenido visual por Streaming. Mola, ¿no? :)

Sé que de cara a toda la parte del back no hemos hablado pero, por ahora está bien con tener en mente que desde la parte front, podemos ya crearnos un proyecto y la lógica del mismo para que, a futuro, podamos crear el back y que nuestros videos se puedan emitir en tiempo real a otros usuarios mediante nuestro propio proyecto web.

Ejemplo

Finalmente os dejo un ejemplo en mi cuenta de GitHub que podréis probar en vuestro ordenador o dispositivo móvil: Tutorial PWA Video Capture

Si tienes dudas, deja un comentario para que entre todos podamos ir mejorando.

Espero que os haya gustado y gracias por leerlo! 😝