Libro de recetas de la API web

Capítulo 18. Medios de comunicación

Este trabajo se ha traducido utilizando IA. Agradecemos tus opiniones y comentarios: [e-mail]

Introducción

Los navegadores modernos tienen ricas API para trabajar con flujos de vídeo y audio. La API WebRTC permite crear estos flujos desde dispositivos como cámaras.

Un flujo de vídeo puede reproducirse en directo dentro de un elemento <video>, y desde ahí puedes capturar un fotograma del vídeo para guardarlo como imagen o subirlo a una API. También se puede utilizar un elemento <video> para reproducir vídeo grabado desde un flujo.

Antes de que estas API estuvieran disponibles, habrías necesitado plug-ins del navegador para acceder a la cámara del usuario. Hoy puedes utilizar la API de Captura y Flujo de Medios para empezar a leer datos de la cámara y el micrófono con sólo una pequeña cantidad de código.

Grabar la pantalla

Problema

Quieres capturar un vídeo de la pantalla del usuario.

Solución

Utiliza la API de Captura de Pantalla para capturar un vídeo de la pantalla, y luego establécelo como fuente de un elemento <video> (consulta el Ejemplo 18-1).

Ejemplo 18-1. Capturar un vídeo de la pantalla

async function captureScreen() {
  const stream = await navigator.mediaDevices.getDisplayMedia();
  const mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'video/webm'
  });

  mediaRecorder.addEventListener('dataavailable', event => {
    const blob = new Blob([event.data], {
      type: 'video/webm',
    });

    const url = URL.createObjectURL ...