Registrazione audio e acquisizione schermo

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

Registrazione dello schermo

Per la registrazione dello schermo, chiama il numero getDisplayMedia(); viene attivata la finestra di dialogo come mostrato di seguito. Ciò consente all'utente di selezionare la scheda, la finestra o la schermata che preferisce condividere e fornisce una chiara indicazione che la registrazione è in corso.

Finestra di dialogo Condivisione schermo per example.com.

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

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

Se viene richiamata all'interno di un copione dei contenuti, la registrazione terminerà automaticamente quando l'utente accede a un nuovo . Per registrare in background e tra una navigazione e l'altra, utilizza un documento fuori schermo con il motivo DISPLAY_MEDIA.

Acquisizione delle schede basata sul gesto dell'utente

La chiamata di 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 tu vorresti iniziare immediatamente ad acquisire la scheda senza questo prompt.

Registra audio e video in background

A partire da Chrome 116, puoi chiamare l'API chrome.tabCapture in un service worker per ottenere l'ID stream dopo il gesto dell'utente. Questo può quindi essere passato a un documento fuori schermo per avvia la registrazione.

Nel tuo 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 Acquisizione schede - Registratore.

Registra audio e video in una nuova scheda

Prima di Chrome 116, non era possibile utilizzare l'API chrome.tabCapture in una il service worker o il consumo di un ID flusso creato da quell'API in un documento fuori schermo. Entrambe le opzioni sono requisiti per l'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") });

Quindi, 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, valuta la possibilità di utilizzare l'approccio della registrazione dello schermo, che ti consente di registra in background utilizzando un documento fuori schermo, ma mostra all'utente una finestra di dialogo per selezionare una scheda; finestra o schermo da cui registrare.

Registra l'audio in un popup

Attenzione:questo approccio funziona solo per gli audio, in quanto il tentativo di acquisire video dai popup causa lo stato attivo per spostare e il popup si chiude.

Se devi solo registrare l'audio, puoi ottenere lo stream direttamente nel popup dell'estensione utilizzando chrome.tabCapture.capture. Quando il popup si chiude, la registrazione verrà 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 è necessario che la registrazione rimanga tra le navigazioni, valuta l'utilizzo dell'approccio descritto. nella sezione precedente.

Altre considerazioni

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