Web API Cookbook

Capitolo 18. I media

Questo lavoro è stato tradotto utilizzando l'AI. Siamo lieti di ricevere il tuo feedback e i tuoi commenti: [e-mail]

Introduzione

I moderni browser dispongono di ricche API per lavorare con i flussi video e audio. L'API WebRTC supporta la creazione di questi flussi da dispositivi come le telecamere.

Un flusso video può essere riprodotto in diretta all'interno di un elemento <video> e da lì puoi catturare un fotogramma del video per salvarlo come immagine o caricarlo su un'API. Un elemento <video> può anche essere utilizzato per riprodurre un video registrato da un flusso.

Prima che queste API fossero disponibili, avresti avuto bisogno di plug-in per il browser per accedere alla fotocamera dell'utente. Oggi puoi utilizzare le API Media Capture e Streams per iniziare a leggere i dati dalla fotocamera e dal microfono con una piccola quantità di codice.

Registrazione dello schermo

Problema

Vuoi catturare un video dello schermo dell'utente.

Soluzione

Utilizza l'API Screen Capture per catturare un video dello schermo, quindi impostalo come sorgente di un elemento <video> (vedi Esempio 18-1).

Esempio 18-1. Catturare un video dello schermo

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 ...