Audio- und Bildschirmaufnahme

In diesem Leitfaden werden verschiedene Ansätze zum Aufzeichnen von Audio und Video über einen Tab, ein Fenster oder mit APIs wie chrome.tabCapture oder getDisplayMedia()

Bildschirmaufzeichnung

Rufen Sie für die Bildschirmaufzeichnung getDisplayMedia() auf. Dadurch wird das Dialogfeld geöffnet. wie unten dargestellt. Damit können Nutzende den gewünschten Tab, das Fenster oder den Bildschirm auswählen. zu teilen und gibt einen klaren Hinweis, dass die Aufzeichnung stattfindet.

</ph>

Im folgenden Beispiel wird Zugriff zum Aufzeichnen von Audio und Video angefordert.

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

Wird sie innerhalb eines Content-Skripts aufgerufen, endet die Aufzeichnung automatisch, wenn der Nutzer zu einem neuen Seite. Wenn Sie im Hintergrund und in verschiedenen Navigationen aufnehmen möchten, verwenden Sie ein offscreen-Dokument mit dem Grund DISPLAY_MEDIA.

Tabaufnahme basierend auf Nutzergeste

Wenn getDisplayMedia() aufgerufen wird, wird im Browser ein Dialogfeld angezeigt, in dem Sie dazu aufgefordert werden, Nutzenden, was sie teilen möchten. In einigen Fällen hat der Nutzer jedoch nur auf den Link Aktionsschaltfläche, um die Erweiterung für einen bestimmten Tab aufzurufen, und Sie möchten ohne diese Aufforderung sofort mit der Erfassung des Tabs zu beginnen.

Audio und Video im Hintergrund aufnehmen

Ab Chrome 116 können Sie die chrome.tabCapture API in einem Service Worker aufrufen um nach der Nutzerbewegung eine Stream-ID abzurufen. Diese können dann an ein nicht sichtbares Dokument Aufnahme starten.

Im 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
  });
});

Gehen Sie dann in Ihrem nicht sichtbaren Dokument so vor:

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

Ein vollständiges Beispiel finden Sie unter Tab Capture – Rekorder.

Audio und Video in einem neuen Tab aufnehmen

Vor Chrome 116 war es nicht möglich, die chrome.tabCapture API in einem Service Worker verwenden oder eine von dieser API erstellte Stream-ID in einem nicht sichtbaren Dokument verwenden. Beides sind Anforderungen für den oben genannten Ansatz.

Stattdessen können Sie eine Erweiterungsseite in einem neuen Tab oder Fenster öffnen und direkt einen Stream abrufen. Festlegen targetTabId, um den richtigen Tab zu erfassen.

Öffnen Sie zunächst eine Erweiterungsseite, z. B. in einem Pop-up oder einem Service Worker:

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

Gehen Sie dann auf der Erweiterungsseite so vor:

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

Alternativ können Sie auch die Bildschirmaufzeichnung verwenden, bei der Sie Folgendes tun können: im Hintergrund mit einem nicht sichtbaren Dokument aufzeichnen, dem Nutzer aber ein Dialogfeld zum Auswählen eines Tabs, Fenster oder Bildschirm zum Aufnehmen auswählen.

Audio in einem Pop-up aufnehmen

Wenn du nur Audio aufzeichnen musst, kannst du einen Stream direkt im Pop-up der Erweiterung abrufen: chrome.tabCapture.capture Wenn das Pop-up-Fenster geschlossen wird, wird die Aufzeichnung beendet.

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

Wenn die Aufzeichnung über verschiedene Navigationspfade hinweg beibehalten werden soll, sollten Sie den beschriebenen Ansatz verwenden. im vorherigen Abschnitt.

Weitere Hinweise

Weitere Informationen zum Aufzeichnen eines Streams findest du in der MediaRecorder API.