Chrome插件使用getUserMedia录屏无音频问题求助

1. 确认插件权限配置 #

在manifest.json中必须声明以下权限，否则无法捕获系统/标签页音频：

{
  "permissions": ["desktopCapture", "audioCapture", "activeTab"]
}

2. 修正getUserMedia约束参数 #

旧代码中使用的mandatory语法已被废弃，且音频约束缺少关键配置，替换为标准约束写法：

chrome.desktopCapture.chooseDesktopMedia(
  ['screen', 'window'],
  function (streamId) {
    if (!streamId) return;

    navigator.mediaDevices.getUserMedia({
      audio: {
        mediaSource: 'desktop',
        chromeMediaSourceId: streamId,
        echoCancellation: false,
        noiseSuppression: false,
        autoGainControl: false
      },
      video: {
        mediaSource: 'desktop',
        chromeMediaSourceId: streamId
      }
    }).then(stream => {
      // 检查是否成功获取音频轨道，用于定位问题
      console.log('音频轨道:', stream.getAudioTracks());
      
      // 指定支持音视频的MIME类型，避免编码不兼容导致音频丢失
      const mediaRecorder = new MediaRecorder(stream, {
        mimeType: 'video/webm; codecs=vp9,opus'
      });

      mediaRecorder.ondataavailable = function(e) {
        if (e.data.size > 0 && socket.readyState === WebSocket.OPEN) {
          // 处理数据块逻辑
        }
      };

      mediaRecorder.onstop = function(e) {
        stream.getTracks().forEach(track => track.stop());
      };

      mediaRecorder.start(1000);
      
    }).finally(async () => {
      await chrome.tabs.update(message.body.currentTab.id, { active: true });
    });
  }
);

3. 关键注意事项 #

• 确保用户在选择捕获源时，Chrome弹窗中勾选了音频选项（部分系统/Chrome版本会单独询问音频权限）
• 若仅需捕获单个标签页音频，可将['screen', 'window']替换为['tab']，专门针对标签页捕获音视频
• 测试时打开Chrome开发者工具的Media面板，查看流中是否包含音频轨道，快速定位问题环节

内容的提问来源于stack exchange，提问作者Random Code Guy