Chrome扩展：chrome.desktopCapture与RecordRTC无法获取扬声器及麦克风音频

嘿，这是Chrome扩展录屏时音频捕获的典型坑，我帮你一步步拆解解决：

1. 先把扩展权限配置拉满 #

首先检查你的manifest.json，必须包含这些核心权限，否则Chrome会直接阻止音频捕获：

{
  "permissions": [
    "desktopCapture",
    "audioCapture",
    "videoCapture",
    "activeTab"
  ],
  "host_permissions": ["<all_urls>"] // 如果需要在任意页面触发录制的话
}

划重点：desktopCapture是捕获系统音频的核心权限，audioCapture用于申请麦克风权限，缺一个都不行。

2. 桌面捕获时必须包含音频源 #

调用chrome.desktopCapture.chooseDesktopMedia时，一定要把audio加入sources数组，默认只捕获视频的：

chrome.desktopCapture.chooseDesktopMedia(
  ['screen', 'window', 'audio'], // 这里必须带audio
  (streamId) => {
    // 后续获取MediaStream的逻辑
  }
);

注意：Chrome 72及以上版本才支持桌面音频捕获，要确保用户的Chrome版本达标。

3. 正确获取带音频的MediaStream #

拿到streamId后，获取流时要同时指定视频和音频的约束，确保音频轨道被包含：

const captureConstraints = {
  video: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  },
  audio: {
    mandatory: {
      chromeMediaSource: 'desktop',
      chromeMediaSourceId: streamId
    }
  }
};

navigator.mediaDevices.getUserMedia(captureConstraints)
  .then(desktopStream => {
    // 这里可以打印确认音频轨道是否存在
    console.log("捕获到的音频轨道：", desktopStream.getAudioTracks());
  });

4. 混合麦克风+系统音频（如果需要双轨录制） #

如果要同时录扬声器和麦克风，得单独请求麦克风流，再把两个音频轨道合并：

// 先获取麦克风流
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(micStream => {
    // 再获取桌面流（含系统音频）
    navigator.mediaDevices.getUserMedia(captureConstraints)
      .then(desktopStream => {
        // 创建音频混合器
        const audioCtx = new AudioContext();
        const mixedDest = audioCtx.createMediaStreamDestination();

        // 接入系统音频
        const desktopAudioSource = audioCtx.createMediaStreamSource(desktopStream);
        desktopAudioSource.connect(mixedDest);

        // 接入麦克风音频
        const micAudioSource = audioCtx.createMediaStreamSource(micStream);
        micAudioSource.connect(mixedDest);

        // 合并视频+混合音频成最终流
        const finalStream = new MediaStream([
          ...desktopStream.getVideoTracks(),
          ...mixedDest.stream.getAudioTracks()
        ]);

        // 用这个最终流初始化RecordRTC
        const recorder = RecordRTC(finalStream, {
          type: 'video',
          mimeType: 'video/webm;codecs=vp9,opus', // 指定opus音频编码，避免兼容性问题
          audioBitsPerSecond: 128000
        });
        recorder.startRecording();
      });
  });

5. 检查RecordRTC的初始化配置 #

初始化RecordRTC时，别漏了音频相关的设置，避免默认配置不生效：

const recorder = RecordRTC(targetStream, {
  type: 'video',
  audio: true,
  mimeType: 'video/webm;codecs=vp9,opus',
  audioBitsPerSecond: 128000 // 可选，保证音频质量
});

最后提醒：测试时一定要用开发者模式加载的 unpacked 扩展，直接在网页里测试会有额外的权限限制，容易踩坑。

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