如何使用 JavaScript 同时录制桌面音频与麦克风音频

本文详解在 web 环境中通过 `mediastream` 与 `web audio api` 融合多路音频源（如系统桌面音频 + 本地麦克风），并借助 `recordrtc` 实现高质量同步录音的完整方案，解决耳机电流干扰导致桌面音频丢失等常见兼容性问题。

在现代浏览器中，原生 MediaRecorder API 无法直接捕获桌面音频（即系统播放声音），它仅支持来自 getUserMedia() 的媒体流——而该 API 默认只提供麦克风（audio: true）或屏幕（displayMedia），且桌面音频（system audio）在标准 Web API 中始终不可访问，这是出于严格的安全与隐私限制（Chrome、Edge 等均不开放此能力）。因此，你遇到的“插耳机后桌面音频消失”现象，并非代码缺陷，而是根本性限制：当耳机插入时，系统音频输出路径变更，navigator.mediaDevices.getUserMedia({ audio: true }) 仍只采集麦克风，完全不包含任何桌面声音。

✅ 正确解法是：分离采集 + 混音合成
你需要分别获取两个独立音频流（麦克风 + 桌面音频），再通过 Web Audio API 在内存中实时混音，最后将混合后的 MediaStream 交由录音器处理。但关键前提：桌面音频必须来自合法可获取的源头——目前唯一可行路径是：

1. 用户主动共享桌面（含系统音频）：调用 navigator.mediaDevices.getDisplayMedia({ audio: true })（需 Chrome 72+ / Edge 79+，且用户手动勾选「共享音频」选项）；
2. 麦克风流单独获取：navigator.mediaDevices.getUserMedia({ audio: true })；
3. 混音处理：用 AudioContext 将两路 MediaStreamTrack 接入同一上下文，合并为单一流。

以下是生产级实现示例（基于 RecordRTC 封装，兼容性更优）：

import RecordRTC, { StereoAudioRecorder } from 'recordrtc';

const startDualAudioRecording = async () => {
  let micStream, screenStream;
  const ac = new AudioContext();

  try {
    // 步骤1：获取麦克风流（禁用降噪/回声抑制以保真）
    micStream = await navigator.mediaDevices.getUserMedia({
      audio: {
        echoCancellation: false,
        noiseSuppression: false,
        autoGainControl: false
      }
    });

    // 步骤2：获取桌面流（含系统音频）→ 用户必须手动授权并勾选"共享音频"
    screenStream = await navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true // ⚠️ 关键：启用此选项才能捕获系统声音
    });

    // 步骤3：创建混音流
    const destination = ac.createMediaStreamDestination();
    const micSource = ac.createMediaStreamSource(new MediaStream([micStream.getAudioTracks()[0]]));
    const screenSource = ac.createMediaStreamSource(new MediaStream([screenStream.getAudioTracks()[0]]));

    micSource.connect(destination);
    screenSource.connect(destination);

    // 步骤4：使用 RecordRTC 录制混音后流（优于原生 MediaRecorder 的 WAV 支持与稳定性）
    const recorder = new RecordRTC(destination.stream, {
      type: 'audio',
      mimeType: 'audio/wav',
      recorderType: StereoAudioRecorder,
      numberOfAudioChannels: 2, // 保留立体声
      timeSlice: 4000,
      ondataavailable: (blob) => {
        // 处理分片：上传、拼接或转 Base64
        console.log('录音分片生成:', blob.size, 'bytes');
      }
    });

    recorder.startRecording();
    return recorder;

  } catch (err) {
    console.error('录音初始化失败:', err.name === 'NotAllowedError' 
      ? '用户未授权麦克风或桌面音频共享' 
      : err.message);
    throw err;
  }
};

// 停止录制示例
const stopRecording = async (recorder) => {
  if (!recorder) return;
  recorder.stopRecording(() => {
    const blob = recorder.getBlob();
    const url = URL.createObjectURL(blob);
    // 保存或上传 blob...
    console.log('完整录音完成:', url);
  });
};

⚠️ 重要注意事项：

• getDisplayMedia({ audio: true }) 仅在安全上下文（HTTPS）下可用，HTTP 协议将静默失败；
• 用户必须手动在弹窗中勾选「共享音频」复选框，否则 screenStream 不含音频轨道；
• 部分旧版 Chrome（
• RecordRTC 内部封装了 Web Audio API 混音逻辑，比手写 MediaRecorder 更可靠，尤其在多源同步、采样率对齐方面；
• 若需更高保真（如 48kHz），可在 AudioContext 构造时指定：new AudioContext({ sampleRate: 48000 })（需浏览器支持）。

? 替代方案提示：
若业务场景允许桌面端部署，可考虑 Electron + node-record-lpcm16 或 ffmpeg.wasm 进行深度音频捕获；纯 Web 场景下，上述 getDisplayMedia + Web Audio + RecordRTC 是当前最合规、兼容性最佳的方案。

总结：不要尝试用 getUserMedia 直接“偷取”系统音频——这是不可能的。正确路径是引导用户主动共享桌面（含音频），再与麦克风流科学混音。代码健壮性取决于权限处理、错误降级与用户引导，而非单纯替换库。