WebRTC录屏仅捕获本地麦克风音频，远程音频缺失问题排查

核心问题 #

你当前的代码只合并了本地麦克风音频和屏幕共享的系统音频，完全没有将远程参与者的音频流加入到录制的混音中——这就是远程声音没被捕获的根本原因。

解决方案 #

要录制所有参会者的音频，你需要把每个远程用户的音频流都添加到AudioContext的混音器里，具体步骤如下：

• 维护远程音频源列表，用来管理所有加入会议的远程用户音频，方便后续添加/移除
• 动态添加远程音频到混音器：当新用户加入时，把他们的音频流接入AudioContext的目标节点
• 清理离开用户的音频源：用户退出时断开连接，避免内存泄漏

修改后的代码示例 #

// 组件内或全局维护远程音频源集合，用于管理参会者音频
let remoteAudioSources = [];
// 初始化音频上下文和混音目标
const audioCtx = new AudioContext();
const destination = audioCtx.createMediaStreamDestination();

// 1. 接入本地麦克风和屏幕音频
const micSource = audioCtx.createMediaStreamSource(localStream);
const screenAudioSource = audioCtx.createMediaStreamSource(screenStream);
micSource.connect(destination);
screenAudioSource.connect(destination);

// 2. 新增：添加远程用户音频到混音器的函数
function addRemoteParticipantAudio(remoteStream) {
  // 检查远程流是否有音频轨道
  if (!remoteStream.getAudioTracks().length) return;
  const remoteSource = audioCtx.createMediaStreamSource(remoteStream);
  remoteSource.connect(destination);
  remoteAudioSources.push(remoteSource);
}

// 3. 新增：移除离开用户的音频源
function removeRemoteParticipantAudio(remoteSource) {
  remoteSource.disconnect(destination);
  remoteAudioSources = remoteAudioSources.filter(src => src !== remoteSource);
}

// 构建用于录制的流：屏幕视频 + 混合后的所有音频
const outputStream = new MediaStream();
outputStream.addTrack(screenStream.getVideoTracks()[0]);
outputStream.addTrack(destination.stream.getAudioTracks()[0]);

// 初始化MediaRecorder（原有逻辑不变）
const vp9Codec = "video/webm;codecs=vp9,opus";
const vp9Options = { mimeType: vp9Codec };
mediaRecorder = MediaRecorder.isTypeSupported(vp9Codec) 
  ? new MediaRecorder(outputStream, vp9Options) 
  : new MediaRecorder(outputStream);

mediaRecorder.ondataavailable = handelDataAvailable;
mediaRecorder.start();

关键注意事项 #

• 音频上下文激活：Chrome要求AudioContext必须在用户交互（比如点击「开始录制」按钮）时初始化，否则会处于暂停状态，导致混音失败。
• 远程流校验：每次添加远程音频前，要确认流包含有效音频轨道，避免空轨道报错。
• 组件清理：如果是React组件，在卸载时要断开所有音频源连接，并关闭AudioContext，防止内存泄漏：

  useEffect(() => {
    return () => {
      micSource.disconnect();
      screenAudioSource.disconnect();
      remoteAudioSources.forEach(src => src.disconnect());
      audioCtx.close();
    };
  }, []);
  

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