WebRTC网页拨号器中MultiMediaRecorder仅录接收方语音的问题咨询

问题成因 #

• 仅传入远端流到MediaRecorder：你大概率只把WebRTC连接返回的remoteStream传给了MediaRecorder，完全没处理本地麦克风生成的localStream，自然只能录到对方的声音。
• 未合并独立音轨：WebRTC的本地流和远端流是两个独立的MediaStream实例，MediaRecorder默认只能处理单个流，不合并两者的音频轨就无法同时录制双方语音。
• 本地麦克风权限异常：极少数情况下，本地麦克风权限未正确获取，导致localStream中没有音频轨，最终录制结果只有远端声音。

解决办法：合并本地与远端音轨后录制 #

核心思路是创建一个包含本地和远端音频轨的新MediaStream，再用这个合并后的流初始化MediaRecorder。

1. 确认本地/远端流的有效性 #

首先确保你已经正确获取到本地流（通过getUserMedia）和远端流（通过WebRTC的ontrack事件），且两者都包含音频轨：

// 获取本地音频流
const localStream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });

// 监听远端流
peerConnection.ontrack = (event) => {
  const remoteStream = event.streams[0];
  // 确认远端流有音频轨
  if (remoteStream.getAudioTracks().length === 0) {
    console.error("远端流无音频轨");
    return;
  }
  // 后续执行合并与录制逻辑
};

2. 合并两个流的音频轨 #

写一个工具函数，将本地和远端的音频轨合并到同一个MediaStream中：

function mergeAudioStreams(localStream, remoteStream) {
  const mergedStream = new MediaStream();
  // 添加本地音频轨
  localStream.getAudioTracks().forEach(track => mergedStream.addTrack(track));
  // 添加远端音频轨
  remoteStream.getAudioTracks().forEach(track => mergedStream.addTrack(track));
  return mergedStream;
}

3. 基于合并流启动录制 #

用合并后的流初始化MediaRecorder，并处理录制结果：

// 合并流
const mergedStream = mergeAudioStreams(localStream, remoteStream);
// 初始化MediaRecorder
const mediaRecorder = new MediaRecorder(mergedStream);
const recordingChunks = [];

// 收集录制数据
mediaRecorder.ondataavailable = (e) => {
  if (e.data.size > 0) recordingChunks.push(e.data);
};

// 录制结束后处理音频文件
mediaRecorder.onstop = () => {
  const audioBlob = new Blob(recordingChunks, { type: 'audio/webm' });
  // 示例：下载录制文件
  const downloadLink = document.createElement('a');
  downloadLink.href = URL.createObjectURL(audioBlob);
  downloadLink.download = 'call-recording.webm';
  downloadLink.click();
};

// 开始录制（可在通话建立后调用）
mediaRecorder.start();

进阶：用Web Audio API实现更稳定的音频混合 #

如果直接合并流出现音频不同步或音量失衡的问题，可以用Web Audio API手动混合音频：

function mixAudioWithWebAudio(localStream, remoteStream) {
  const audioContext = new AudioContext();
  const mixedDestination = audioContext.createMediaStreamDestination();

  // 连接本地音频源到混合目标
  const localAudioSource = audioContext.createMediaStreamSource(localStream);
  localAudioSource.connect(mixedDestination);

  // 连接远端音频源到混合目标
  const remoteAudioSource = audioContext.createMediaStreamSource(remoteStream);
  remoteAudioSource.connect(mixedDestination);

  return mixedDestination.stream;
}

使用时直接替换mergeAudioStreams为这个函数即可，它能更精准地控制音频的混合过程。

额外注意事项 #

• 浏览器兼容性：MediaRecorder和Web Audio API在Chrome、Firefox、Edge等主流浏览器均支持，Safari 14.1+也已兼容，但低版本Safari可能需要额外适配。
• 权限检查：在获取本地流前，可通过navigator.permissions.query({ name: 'microphone' })确认用户已授权麦克风权限。
• 录制格式：示例中使用audio/webm格式，若需要其他格式（如MP3），可在录制完成后用第三方库转码，但注意浏览器原生支持的格式有限。

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