Livro de receitas da API da Web

Capítulo 18. Meios de comunicação social

Este trabalho foi traduzido com recurso a IA. Agradecemos o teu feedback e comentários: [e-mail]

Introdução

Os navegadores modernos têm APIs ricas para trabalhar com fluxos de vídeo e áudio. A API WebRTC suporta a criação destes fluxos a partir de dispositivos como câmaras.

Um fluxo de vídeo pode ser reproduzido em direto dentro de um elemento <video> e, a partir daí, podes capturar um fotograma do vídeo para guardar como uma imagem ou carregar para uma API. Um elemento <video> também pode ser utilizado para reproduzir vídeo que foi gravado a partir de um fluxo.

Antes de estas APIs estarem disponíveis, terias precisado de plug-ins de browser para aceder à câmara do utilizador. Atualmente, podes utilizar a API Media Capture and Streams para começar a ler dados da câmara e do microfone com apenas uma pequena quantidade de código.

Gravar o ecrã

Problema

Pretendes capturar um vídeo do ecrã do utilizador.

Solução

Utiliza a API Screen Capture para capturar um vídeo do ecrã e, em seguida, define-o como a fonte de um elemento <video> (ver Exemplo 18-1).

Exemplo 18-1. Capturar um vídeo do ecrã

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(