如何在WebRTC中消除回声？搭建P2P视频通话应用遇回声问题

核心问题排查与修复步骤 #

• 先解决"发起通话前就听到自己声音"的问题
  这种情况大概率是你获取到本地音频流后，不小心把它绑定到了页面的<audio>元素并自动播放了。检查代码里有没有类似audioElement.srcObject = stream的语句，如果有，发起通话前不要播放本地流，或者给本地播放的音频元素加上静音（audioElement.muted = true）。

• 在采集音频时就开启降噪与回声消除
  你之前的getUserMedia没配置任何音频约束，浏览器默认可能未启用这些功能。修改获取流的代码：

  const chunks = [];
  // 配置音频约束，强制开启回声消除、降噪、自动增益
  navigator.mediaDevices.getUserMedia({
    audio: {
      echoCancellation: true,
      noiseSuppression: true,
      autoGainControl: true,
      sampleRate: 48000 // 可选，提升采样率优化音质
    },
    video: false
  }).then(handleSuccess);
  
  const handleSuccess = function (stream) {
    const mediaRecorder = new MediaRecorder(stream);
    mediaRecorder.addEventListener('dataavailable', (event) => {
        chunks.push(event.data);
        sendData(event.data);
    });
  };
  

• 正确配置RTCPeerConnection
  你之前的setConfiguration调用有误，每次调用都会覆盖之前的配置而非叠加。应该在创建PeerConnection时就传入完整配置，或者合并现有配置后再设置：

  // 创建时直接传入完整配置
  const servers = {}; // 你的ICE服务器配置
  const pc = new RTCPeerConnection({
    ...servers,
    mediaConstraints: {
      audio: {
        echoCancellation: true,
        noiseSuppression: true,
        autoGainControl: true
      }
    }
  });
  
  // 若需后续修改，合并现有配置后再更新
  // const currentConfig = pc.getConfiguration();
  // pc.setConfiguration({
  //   ...currentConfig,
  //   mediaConstraints: {
  //     audio: {
  //       echoCancellation: true,
  //       noiseSuppression: true,
  //       autoGainControl: true
  //     }
  //   }
  // });
  

• 关于第三方库
  浏览器原生WebRTC的音频处理已经能解决大部分回声和降噪问题，不需要额外引入第三方库。如果原生配置后仍有问题，可以检查设备状态（比如Mac/iPhone的麦克风是否被其他应用占用），或者重置浏览器的音频权限设置。

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