捕获Chrome标签页音频时出现Error starting tab capture错误排查

核心问题分析 #

你的代码存在两个关键错误，同时还有一个潜在的浏览器限制问题，导致标签页音频捕获失败：

1. Promise语法错误 #

你将getUserMedia的调用与回调函数用逗号分隔，这是无效语法，导致回调不会被执行，且Promise的错误无法被捕获，直接抛出未处理的DOMException。

2. MediaConstraints配置错误 #

配置中重复声明了audio键（audio: true和audio: {mandatory:...}），对象里重复的键会被后面的覆盖，导致音频约束配置异常。

3. 潜在的AudioContext激活限制 #

Chrome的AudioContext默认处于暂停状态，必须通过用户交互（比如点击事件）才能激活，否则无法处理音频流。

修正后的内容脚本代码 #

chrome.runtime.onMessage.addListener((req, sender, res) => {
    const message = stringify(req.command);
    if (message === "captureStream") {      
        console.log(req.data.streamId);
        // 修复MediaConstraints格式，合并audio配置
        navigator.mediaDevices.getUserMedia({
            video: false,
            audio: {
                mandatory: {
                    chromeMediaSource: "tab",
                    chromeMediaSourceId: req.data.streamId
                }
            }
        })
        .then((stream) => {
            // 处理AudioContext激活问题
            const output = new AudioContext();
            if (output.state === 'suspended') {
                output.resume();
            }
            const source = output.createMediaStreamSource(stream);
            source.connect(output.destination);
        })
        .catch((err) => {
            // 捕获并打印错误，方便排查
            console.error("音频捕获失败:", err);
        });
    }
});

额外排查点 #

• 确认streamId生成逻辑正确：streamId必须通过chrome.tabCapture.capture()或chrome.desktopCapture.chooseDesktopMedia()正确获取，且传递过程中未被篡改。
• 检查扩展权限：除了activeTab，确保manifest.json中还声明了tabCapture（若使用chrome.tabCapture）或desktopCapture（若使用桌面捕获）权限。
• 确保内容脚本注入时机正确：需在标签页加载完成后注入，或使用runAt: 'document_start'但保证DOM已就绪。

内容的提问来源于stack exchange，提问作者theknightD2