Registrazione audio e acquisizione schermo

Questa guida illustra i diversi approcci per la registrazione di audio e video da una scheda, una finestra o uno schermo utilizzando API come chrome.tabCapture o getDisplayMedia().

Registrazione dello schermo

Per la registrazione dello schermo, chiama getDisplayMedia() per attivare la finestra di dialogo mostrata di seguito. In questo modo l'utente può selezionare la scheda, la finestra o la schermata che vuole condividere e viene indicato chiaramente che la registrazione è in corso.

Finestra di dialogo Condivisione schermo per example.com.

L'esempio seguente richiede l'accesso per registrare audio e video.

const stream = await navigator.mediaDevices.getDisplayMedia({ audio: true, video: true });

Se chiamata all'interno di uno script di contenuti, la registrazione terminerà automaticamente quando l'utente accede a una nuova pagina. Per registrare in background e tra navigazioni, utilizza un documento fuori schermo con il motivo DISPLAY_MEDIA.

Acquisizione schede basata sul gesto dell'utente

La chiamata a getDisplayMedia() comporta la visualizzazione nel browser di una finestra di dialogo che chiede all'utente cosa vuole condividere. Tuttavia, in alcuni casi l'utente ha appena fatto clic sul pulsante di azione per richiamare l'estensione per una scheda specifica e vuoi iniziare subito ad acquisire la scheda senza questo messaggio.

Registra audio e video in background

A partire da Chrome 116, puoi chiamare l'API chrome.tabCapture in un service worker per ottenere un ID stream dopo il gesto dell'utente. Questi dati possono essere trasmessi a un documento fuori schermo per avviare la registrazione.

Nel service worker:

chrome.action.onClicked.addListener(async (tab) => {
  const existingContexts = await chrome.runtime.getContexts({});

  const offscreenDocument = existingContexts.find(
    (c) => c.contextType === 'OFFSCREEN_DOCUMENT'
  );

  // If an offscreen document is not already open, create one.
  if (!offscreenDocument) {
    // Create an offscreen document.
    await chrome.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from chrome.tabCapture API',
    });
  }

  // Get a MediaStream for the active tab.
  const streamId = await chrome.tabCapture.getMediaStreamId({
    targetTabId: tab.id
  });

  // Send the stream ID to the offscreen document to start recording.
  chrome.runtime.sendMessage({
    type: 'start-recording',
    target: 'offscreen',
    data: streamId
  });
});

Quindi, nel documento fuori schermo:

chrome.runtime.onMessage.addListener(async (message) => {
  if (message.target !== 'offscreen') return;
  
  if (message.type === 'start-recording') {
    const media = await navigator.mediaDevices.getUserMedia({
      audio: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
      video: {
        mandatory: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: message.data,
        },
      },
    });

    // Continue to play the captured audio to the user.
    const output = new AudioContext();
    const source = output.createMediaStreamSource(media);
    source.connect(output.destination);

    // TODO: Do something to recording the MediaStream.
  }
});

Per un esempio completo, vedi l'esempio di Cattura schede - Registratore.

Registra audio e video in una nuova scheda

Prima di Chrome 116, non era possibile utilizzare l'API chrome.tabCapture in un service worker o consumare un ID stream creato dall'API in un documento fuori schermo. Entrambi sono requisiti dell'approccio descritto sopra.

Puoi invece aprire la pagina di un'estensione in una nuova scheda o finestra e ottenere direttamente uno stream. Imposta la proprietà targetTabId per acquisire la scheda corretta.

Inizia aprendo una pagina di estensione (ad esempio nel popup o nel service worker):

chrome.windows.create({ url: chrome.runtime.getURL("recorder.html") });

Poi, nella pagina dell'estensione:

chrome.tabCapture.getMediaStreamId({ targetTabId: tabId }, async (id) => {
  const media = await navigator.mediaDevices.getUserMedia({
    audio: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
    video: {
      mandatory: {
        chromeMediaSource: "tab",
        chromeMediaSourceId: id,
      },
    },
  });

  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(media);
  source.connect(output.destination);
});

In alternativa, puoi utilizzare l'approccio della registrazione dello schermo, che ti consente di registrare in background usando un documento fuori schermo, ma mostra all'utente una finestra di dialogo per selezionare una scheda, una finestra o una schermata da cui registrare.

Registra l'audio in un popup

Attenzione: questo approccio funziona solo per l'audio, in quanto il tentativo di acquisire video dal popup fa spostare lo stato attivo e il popup si chiude.

Se devi solo registrare l'audio, puoi ottenere uno stream direttamente nella finestra popup dell'estensione utilizzando chrome.tabCapture.capture. Quando il popup si chiude, la registrazione viene interrotta.

chrome.tabCapture.capture({ audio: true }, (stream) => {
  // Continue to play the captured audio to the user.
  const output = new AudioContext();
  const source = output.createMediaStreamSource(stream);
  source.connect(output.destination);

  // TODO: Do something with the stream (e.g record it)
});

Se hai bisogno che la registrazione rimanga tra le navigazioni, puoi utilizzare l'approccio descritto nella sezione precedente.

Altre considerazioni

Per ulteriori informazioni su come registrare uno stream, consulta l'API MediaRecorder.