音訊錄音和螢幕畫面擷取

本指南說明各種從分頁、視窗或 使用 chrome.tabCapture 或 getDisplayMedia()。

錄製螢幕畫面

如要錄製螢幕畫面，請呼叫 getDisplayMedia() 來觸發對話方塊 如下所示。讓使用者能自行選取想要的分頁、視窗或畫面 分享並明確指出錄影正在進行。

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

以下範例要求錄製音訊和視訊的權限。

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

如果在內容指令碼中呼叫，系統會在使用者瀏覽新的內容時自動結束錄製。 頁面。如要在背景錄製及瀏覽其他內容，請使用 螢幕外文件，並附上 DISPLAY_MEDIA 原因。

根據使用者手勢擷取分頁

呼叫 getDisplayMedia() 後，瀏覽器就會顯示對話方塊，詢問 使用者想分享的內容然而，在某些情況下 動作按鈕來叫用特定分頁的擴充功能，進而 這樣就能在不顯示此提示的情況下，立即開始擷取分頁。

在背景中錄音和錄影

從 Chrome 116 版開始，您可以在 Service Worker 中呼叫 chrome.tabCapture API 來取得串流 ID。即可將這個檔案傳遞至螢幕外文件 開始錄製。

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

接著，在螢幕外文件中：

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

如需完整範例，請參閱「分頁擷取 - 錄音工具」範例。

在新分頁錄製音訊和影片

在 Chrome 116 之前，您無法在chrome.tabCapture 或稱該 API 建立的串流 ID。您可以 符合上述做法的規定。

你可以改為在新分頁或視窗中開啟擴充功能頁面，然後直接取得串流。組合 targetTabId 屬性來擷取正確的分頁。

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

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

接著，在擴充功能頁面中：

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

您也可以考慮使用螢幕錄影功能， 錄製在背景執行，但顯示讓使用者選取分頁的對話方塊 錄製來源、視窗或螢幕畫面。

在彈出式視窗中錄音

注意：這個方法僅適用於音訊，因為嘗試從彈出式視窗擷取原因擷取影片 並關閉彈出式視窗。

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

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

如果需要在各導覽間保留錄製內容，建議使用 請參閱上一節的說明。

其他注意事項

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