Enregistrement audio et capture d'écran

Ce guide explique différentes approches pour enregistrer de l'audio et de la vidéo à partir d'un onglet, d'une fenêtre ou d'un écran à l'aide d'API telles que browser.tabCapture ou getDisplayMedia().

Enregistrement de l'écran

Pour l'enregistrement d'écran, appelez getDisplayMedia(), ce qui déclenche la boîte de dialogue ci-dessous. L'utilisateur peut ainsi sélectionner l'onglet, la fenêtre ou l'écran qu'il souhaite partager, et il est clairement indiqué que l'enregistrement est en cours.

L'exemple suivant demande l'accès à l'enregistrement audio et vidéo.

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

Si elle est appelée dans un script de contenu, l'enregistrement s'arrête automatiquement lorsque l'utilisateur accède à une nouvelle page. Pour enregistrer en arrière-plan et lors des navigations, utilisez un document hors écran avec le motif DISPLAY_MEDIA.

Capture d'onglet basée sur le geste de l'utilisateur

L'appel de getDisplayMedia() entraîne l'affichage d'une boîte de dialogue dans le navigateur, qui demande à l'utilisateur ce qu'il souhaite partager. Toutefois, dans certains cas, l'utilisateur vient de cliquer sur le bouton d'action pour appeler votre extension pour un onglet spécifique, et vous souhaitez commencer immédiatement à capturer l'onglet sans cette invite.

Enregistrer de l'audio et de la vidéo en arrière-plan

À partir de Chrome 116, vous pouvez appeler l'API browser.tabCapture dans un service worker pour obtenir un ID de flux après un geste de l'utilisateur. Il peut ensuite être transmis à un document hors écran pour lancer l'enregistrement.

Dans votre service worker :

browser.action.onClicked.addListener(async (tab) => {
  const existingContexts = await browser.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 browser.offscreen.createDocument({
      url: 'offscreen.html',
      reasons: ['USER_MEDIA'],
      justification: 'Recording from browser.tabCapture API',
    });
  }

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

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

Ensuite, dans votre document hors écran :

browser.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 record the MediaStream.
  }
});

Pour obtenir un exemple complet, consultez l'exemple Tab Capture – Recorder.

Enregistrer de l'audio et de la vidéo dans un nouvel onglet

Avant Chrome 116, il n'était pas possible d'utiliser l'API browser.tabCapture dans un service worker ni de consommer un ID de flux créé par cette API dans un document hors écran. Ces deux éléments sont obligatoires pour l'approche ci-dessus.

Vous pouvez ouvrir une page d'extension dans un nouvel onglet ou une nouvelle fenêtre, et obtenir directement un flux. Définissez la propriété targetTabId pour capturer le bon onglet.

Commencez par ouvrir une page d'extension (par exemple, dans votre pop-up ou votre service worker) :

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

Ensuite, sur la page de votre extension :

browser.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);
});

Vous pouvez également utiliser l'approche d'enregistrement d'écran, qui vous permet d'enregistrer en arrière-plan à l'aide d'un document hors écran, mais qui affiche une boîte de dialogue permettant à l'utilisateur de sélectionner un onglet, une fenêtre ou un écran à partir duquel enregistrer.

Enregistrer de l'audio dans un pop-up

Si vous n'avez besoin d'enregistrer que l'audio, vous pouvez obtenir directement un flux dans le pop-up de l'extension à l'aide de browser.tabCapture.capture. Lorsque le pop-up se ferme, l'enregistrement s'arrête.

browser.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)
});

Si vous avez besoin que l'enregistrement persiste lors des navigations, envisagez d'utiliser l'approche décrite dans la section précédente.

Autres points à noter

Pour savoir comment enregistrer un flux, consultez l'API MediaRecorder.