音訊錄音和螢幕畫面擷取

本指南說明如何使用 browser.tabCapture 或 getDisplayMedia() 等 API，從分頁、視窗或螢幕錄製音訊和影片。

錄製螢幕畫面

如要錄製螢幕畫面，請呼叫 getDisplayMedia()，系統會觸發如下所示的對話方塊。使用者可以選取要分享的索引標籤、視窗或畫面，並清楚瞭解錄製作業正在進行中。

example.com 的分享螢幕畫面對話方塊
example.com 的螢幕分享對話方塊。

以下範例要求存取權，可同時錄製音訊和影片。

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

如果在內容指令碼中呼叫，當使用者前往新網頁時，錄製作業就會自動結束。如要在背景錄製及跨導覽錄製，請使用 DISPLAY_MEDIA 原因的螢幕外文件。

根據使用者手勢擷取分頁

呼叫 getDisplayMedia() 會導致瀏覽器顯示對話方塊，詢問使用者要分享的內容。不過，在某些情況下，使用者可能剛點選動作按鈕，為特定分頁叫用擴充功能，而您希望立即開始擷取分頁，不必顯示這項提示。

在背景錄製音訊和視訊

從 Chrome 116 版開始，您可以在 Service Worker 中呼叫 browser.tabCapture API，在使用者手勢後取得串流 ID。然後傳遞至螢幕外文件，開始錄製。

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

接著，在螢幕外文件執行下列步驟：

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

如需完整範例，請參閱「Tab Capture - Recorder」範例。

在新分頁中錄製音訊和影片

在 Chrome 116 之前，您無法在 Service Worker 中使用 browser.tabCapture API，也無法在螢幕外文件中使用該 API 建立的串流 ID。以上兩者皆為上述方法的必要條件。

您可以在新分頁或視窗中開啟擴充功能頁面，直接取得串流。設定 targetTabId 屬性，擷取正確的分頁。

首先，請開啟擴充功能頁面 (可能在彈出式視窗或 Service Worker 中)：

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

接著在擴充功能頁面中：

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

或者，您也可以考慮使用螢幕錄影方法，透過螢幕外文件在背景錄影，但會向使用者顯示對話方塊，讓他們選取要錄製的分頁、視窗或畫面。

在彈出式視窗中錄製音訊

如果只需要錄製音訊，可以直接在擴充功能彈出式視窗中使用 browser.tabCapture.capture 取得串流。關閉彈出式視窗後，系統就會停止錄音。

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

如要讓錄音在導覽期間持續進行，請考慮使用上一節所述方法。

其他注意事項

如要進一步瞭解如何錄製串流，請參閱 MediaRecorder API。