WEB API – Capturando la pantalla usando mediaDevices

Continúo revisando el amplio listado de API´s que puedes encontrar en MDN Web Docs y para esta nueva entrada del blog vamos a practicar y conocer la API mediaDevices.

Esta API nos da acceso acceso a los dispositivos de entrada tanto externos como los integrados en el dispositivo (cámaras, micrófonos) y la capacidad de compartir nuestra pantalla (audio y video).

La aplicación final la puedes probar desde aquí y el repositorio con el código lo puedes encontrar en github.

Como funciona mediaDevices

De todo el código que puedes encontrar en el repositorio, solo voy comentar la parte que hace uso de la API ya que el resto se ha creado usando Javascript nativo y bueno no tiene mucho misterio.

const config = {
   video: {
      cursor: 'always',
      mandatory: {
         maxWidth: data.width,
         maxHeight: data.height
      }
   },
   audio: true
};
data.buffer = [];
data.stream = await navigator.mediaDevices.getDisplayMedia(config);
preview.srcObject = data.stream;
if (data.stream) {
   if (!MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) {
      throw 'No video format support';
   }
   data.iMediaRecorder = new MediaRecorder(data.stream, { mimeType: 'video/webm;codecs=vp8' });
   data.iMediaRecorder.ondataavailable = evt => evt && evt.data && evt.data.size > 0 && data.buffer.push(evt.data);
   data.iMediaRecorder.onstop = () => {
      data.capture = !data.capture;
      data.stream && buttonStatus.call(this, data);
      stopStream(data);
   }
   data.iMediaRecorder.start(10);
else {
   throw `There aren't data to save`;
}

De la línea 1 a la línea 10 añadiremos la configuración para el video que estamos capturando.

En la línea 11 crearemos un buffer que se usará para almacenar los datos que está capturando y en la línea 12 estaremos usando el método que nos permite seleccionar que vamos a capturar y conceder los permisos necesarios para realizar dicha tarea.

En la línea 13 estamos asignando el flujo de datos (lo que estamos capturando) a la etiqueta <video> de HTML, y de esta forma podemos ver lo que estamos capturando.

Con la línea 18 ya estamos listos para realizar la grabación, en este caso de nuestra pantalla.

Con la línea 19 y línea 20 añadiremos unos eventos para tener controlado qué sucede cuando se para la grabación y mientras se están obteniendo datos de la captura.

Para finalizar, en la línea 25 estaremos usando el método start para iniciar la grabación. Este método nos permite añadir un argumento de entrada con el tamaño en milisegundos que tendrá cada blob.

A continuación un video demostración de cómo funciona la aplicación de captura de video, que por cierto está creado con la misma aplicación que se ha creado para este ejemplo.