基于agora-rtc-react的Next.js应用音频回声问题排查求助

云上老周

2026-6-17

回声问题排查与解决方案

代码中存在的直接风险点

你的代码里有一个引发回声的关键问题：在<LocalUser>组件中传入了本地麦克风轨道作为audioTrack属性。

<LocalUser
  micOn={micOn}
  id="local-user"
  allowFullScreen
  cameraOn={camOn}
  className="tele-view__call-view__video"
  videoTrack={camTrack?.localCameraTrack}
  audioTrack={micTrack?.localMicrophoneTrack} // 此处是核心问题
  cover="/images/users/user-dummy-img-dark.webp"
/>

本地麦克风轨道的作用是采集你的声音并发送给远端用户，完全不需要在本地播放。如果本地播放自己的麦克风轨道，扬声器输出的声音会被麦克风重新采集，直接形成循环回声——这是Web音视频应用中回声的最常见诱因。

修复与优化步骤

1. 移除本地音频播放配置

删除<LocalUser>组件中的audioTrack参数，本地只渲染视频轨道即可：

<LocalUser
  micOn={micOn}
  id="local-user"
  allowFullScreen
  cameraOn={camOn}
  className="tele-view__call-view__video"
  videoTrack={camTrack?.localCameraTrack}
  cover="/images/users/user-dummy-img-dark.webp"
/>

2. 强化回声抑制配置

虽然你已开启AEC，但可以设置更激进的模式提升抑制效果：

const micTrack = useLocalMicrophoneTrack(micOn, {
  AEC: true,
  ANS: true,
  AECMode: 'aggressive' // 开启强回声抑制模式
});

3. 全局客户端音频配置校验

确保创建Agora客户端时，开启完整的音频处理选项：

const client = useRTCClient({
  mode: 'rtc',
  codec: 'vp8',
  audioProcessingOptions: {
    echoCancellation: true,
    noiseSuppression: true,
    autoGainControl: true
  }
});