使用chrome.tabCapture录制标签页音频时的静音问题及解决咨询

目标 #

录制标签页的音频，同时在录制过程中能够听到该音频

实现方式 #

使用chrome.tabCapture，因为它比chrome.desktopCapture或navigator.mediaDevices.getDisplayMedia的侵入性更低。前者能提供更好的用户体验，而后两者每次都要求选择标签页，还会强制显示带状态栏的蓝色矩形框及“停止共享”按钮

核心问题 #

获取媒体流后（无需录制，仅调用getUserMedia）标签页音频被静音，且无法取消静音。这是BUG吗？如何避免？

技术实现细节 #

• 在前台页面（弹窗、选项页或由内容脚本注入当前DOM的指向扩展页面的iframe）中获取流ID，因为只有这些位置可使用tabCapture

const tabId = ...get current tab id...
chrome.tabCapture.getMediaStreamId({ consumerTabId: tabId }, function(streamId) {
    // send the streamId to the content script
})

• 接收流ID后开始捕获

const options = {
    audio: {
        mandatory: {
            chromeMediaSource: 'tab',
            chromeMediaSourceId: streamId
        }
    }
}
navigator.mediaDevices.getUserMedia(options).then((tabStream) => {
    // at this point the sound of the tab becomes muted with no way to unmute it
});

• 仅调用tabCapture就会使标签页静音。AudioContext源连接到默认输出对该流无效，且无错误抛出。若getUserMedia的回调Promise未被使用，标签页音频约20秒后会自行恢复；若MediaRecorder使用该流录制音频，音频需到录制停止后才会恢复。标签页的音频在录制文件中是存在的，仅录制期间被静音。

对比方案 #

对比1：直接使用chrome.tabCapture.capture #

直接获取MediaStream的方式符合预期：标签页音频会被静音，但可通过AudioContext重新连接到扬声器。但该方法在注入的iframe中无法成功启动（始终抛出模糊的“Error starting tab capture”错误），因此无法捕获音频；它在弹窗中可正常工作，但弹窗的不稳定特性使其并非可行选项。

对比2：chrome.desktopCapture #

表现相反：录制期间标签页音频始终保持播放状态，且无法静音（这并非问题）。

解决方案 #

这并非Chrome的BUG，而是chrome.tabCapture的设计特性——当通过getMediaStreamId配合getUserMedia捕获标签页音频时，Chrome会自动静音原标签页的音频输出，避免回声或重复播放。要实现录制同时监听，可采用以下方法：

1. 重新路由音频流到扬声器
   获取tabStream后，通过AudioContext将流中的音频轨道连接到系统输出，注意需确保AudioContext未被浏览器自动暂停：

navigator.mediaDevices.getUserMedia(options).then((tabStream) => {
    const audioContext = new AudioContext();
    // 若AudioContext处于暂停状态，通过用户交互触发恢复
    if (audioContext.state === 'suspended') {
        audioContext.resume();
    }
    const source = audioContext.createMediaStreamSource(tabStream);
    source.connect(audioContext.destination);
    // 执行MediaRecorder录制逻辑
});

2. 切换到后台页面处理流
   将流ID发送到扩展后台页面，在后台环境中调用getUserMedia获取流并通过AudioContext路由音频。后台页面不受iframe或弹窗的限制，稳定性更高，能有效规避部分场景下的静音问题。

3. 用选项页作为流获取载体
   若iframe无法使用chrome.tabCapture.capture，可改用扩展选项页获取流，再通过消息通信将流传递给内容脚本。这种方式既保证稳定性，又能利用AudioContext恢复音频播放。

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