自动通话录制：JSIP WebRTC多方会议中本地与远程流合并问题

在一对一通话中正常的MediaRecorder录制功能，到多方会议场景下出现仅录本地/远程音频、录制失败或无声音频的问题，核心原因是异步远程流的时机处理不当和MediaRecorder对动态轨道的兼容性限制，以下是具体分析和解决方案：

问题根源 #

1. 远程流添加时机错误：你的代码在创建mixedStream时直接合并remoteStreams，但ontrack是异步触发的，此时可能部分远程流还未被添加到数组中，导致混合流缺少对应音频轨道。
2. MediaRecorder不支持动态更新源：即使后续将远程轨道添加到mixedStream，多数浏览器的MediaRecorder不会自动识别新增的轨道，只会录制初始创建时的轨道内容。
3. 轨道状态未校验：部分远程音频轨道可能还未激活（readyState不为live），直接合并会导致录制异常。

解决方案 #

方案1：使用AudioContext混合音频（推荐，兼容性更强） #

通过Web Audio API的AudioContext将所有音频轨道混合成一个输出流，再传给MediaRecorder，这种方式支持动态添加远程轨道，且能更好地控制音频混合逻辑。

async function startMixedRecording(localStream) {
  // 必须在用户交互后创建AudioContext（浏览器安全限制）
  const audioContext = new AudioContext();
  const destination = audioContext.createMediaStreamDestination();

  // 注入本地音频轨道
  localStream.getAudioTracks().forEach(track => {
    const source = audioContext.createMediaStreamSource(new MediaStream([track]));
    source.connect(destination);
  });

  const remoteStreams = [];

  // 处理新加入的远程流
  peerConnection.ontrack = (event) => {
    const remoteStream = event.streams[0];
    remoteStreams.push(remoteStream);
    
    // 为每个远程音频轨道创建源并连接到输出
    remoteStream.getAudioTracks().forEach(track => {
      // 确保轨道处于激活状态
      if (track.readyState === 'live') {
        const source = audioContext.createMediaStreamSource(new MediaStream([track]));
        source.connect(destination);
      }
    });
  };

  // 初始化录制器
  const recorder = new MediaRecorder(destination.stream);
  recorder.start();
  return recorder;
}

// 调用示例（需在用户交互事件内执行，比如按钮点击）
document.getElementById('startRecordBtn').addEventListener('click', async () => {
  const localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const recorder = await startMixedRecording(localStream);
  
  // 处理录制完成事件
  recorder.ondataavailable = (e) => {
    const audioBlob = new Blob([e.data], { type: 'audio/webm' });
    // 后续处理：下载或上传音频文件
  };
});

方案2：动态更新MediaStream（兼容性有限） #

如果坚持使用原生MediaStream混合，可尝试在远程轨道加入时动态添加到已有的混合流中，但注意仅部分现代浏览器支持MediaRecorder识别新增轨道。

async function startRecording() {
  const localStream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const remoteStreams = [];
  const mixedStream = new MediaStream(localStream.getTracks());

  // 初始化录制器
  const recorder = new MediaRecorder(mixedStream);
  recorder.start();

  // 动态添加远程轨道
  peerConnection.ontrack = (event) => {
    const remoteStream = event.streams[0];
    remoteStreams.push(remoteStream);
    
    remoteStream.getAudioTracks().forEach(track => {
      if (track.readyState === 'live') {
        mixedStream.addTrack(track);
      }
    });
  };

  return recorder;
}

关键注意事项 #

• 用户交互触发：浏览器要求AudioContext和MediaRecorder必须在用户主动交互（如点击、触摸）后初始化，否则会处于暂停状态，导致无声音频。
• 轨道状态监听：为每个音频轨道添加onended事件，及时断开对应的AudioContext源节点，避免资源泄漏。
• 格式兼容性：不同浏览器对MediaRecorder的输出格式支持不同，建议优先使用audio/webm格式，兼容性更广。

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