如何在 Chrome 扩展中正确捕获当前标签页的音频流-js教程-PHP中文网

如何在 Chrome 扩展中正确捕获当前标签页的音频流

本文详解解决 Chrome 扩展中 DOMException: Error starting tab capture 错误的关键步骤：添加 tabCapture 权限、使用 chrome.tabCapture.getMediaStreamId() 获取合法 stream ID，并在内容脚本中通过标准 getUserMedia 捕获音频流。

本文详解解决 chrome 扩展中 `domexception: error starting tab capture` 错误的关键步骤：添加 `tabcapture` 权限、使用 `chrome.tabcapture.getmediastreamid()` 获取合法 stream id，并在内容脚本中通过标准 `getusermedia` 捕获音频流。

在 Chrome 扩展中实现标签页（Tab）音频捕获是一项常见但易出错的需求。你遇到的 Uncaught (in promise) DOMException: Error starting tab capture 错误，根本原因并非权限缺失（如 activeTab），而是未正确申请 tabCapture 特权，且错误地将 chromeMediaSourceId 直接传入 getUserMedia 的约束对象中——该字段仅对 Chrome 内部媒体管道有效，不能在前端 JS 中手动构造。

✅ 正确实现流程

1. 声明必要权限

在 manifest.json 中添加：

{
  "permissions": ["tabCapture", "activeTab", "scripting"],
  "host_permissions": ["<all_urls>"]
}</all_urls>

⚠️ 注意：tabCapture 是独立权限，不可被 activeTab 或其他权限替代，必须显式声明。

2. 在后台脚本或弹出页中获取合法 stream ID

使用 chrome.tabCapture.getMediaStreamId() 获取受浏览器认证的 stream ID（它会自动处理用户授权提示）：

Open Chrome Tabs

读取Chrome等基于Chromium的浏览器（Arc、Brave、Edge等）当前打开的标签页。用于需要了解用户打开了哪些URL，或者...

下载

// background.js 或 popup.js
chrome.action.onClicked.addListener(async (tab) => {
  try {
    const streamId = await chrome.tabCapture.getMediaStreamId({
      consumerTabId: tab.id // 关键：指定消费该流的目标标签页 ID
    });
    // 将 streamId 发送给目标标签页的内容脚本
    await chrome.tabs.sendMessage(tab.id, {
      command: "captureStream",
      data: { streamId }
    });
  } catch (err) {
    console.error("Failed to get tab capture stream ID:", err);
  }
});

3. 在内容脚本中安全调用 `getUserMedia`

内容脚本收到 streamId 后，必须使用标准约束对象格式（非嵌套 mandatory），且仅需 audio: true + chromeMediaSource: 'tab' + chromeMediaSourceId：

// content-script.js
chrome.runtime.onMessage.addListener(async (req, sender, sendResponse) => {
  if (req.command === "captureStream") {
    const { streamId } = req.data;

    try {
      // ✅ 正确约束格式：顶层 audio 对象，非嵌套 mandatory
      const stream = await navigator.mediaDevices.getUserMedia({
        audio: {
          chromeMediaSource: "tab",
          chromeMediaSourceId: streamId
        },
        video: false
      });

      // 示例：播放捕获的音频（需在用户手势触发后）
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const source = audioContext.createMediaStreamSource(stream);
      source.connect(audioContext.destination);

      console.log("Tab audio capture started successfully.");
    } catch (err) {
      console.error("Failed to start tab audio capture:", err);
      // 常见错误包括：用户拒绝授权、streamId 过期、跨源限制等
    }
  }
});