React+Socket.io+WebRTC P2P通话音频回环问题：无法传输至对端

针对你遇到的音频只能本地听见、无法传输到对方的问题，可按以下步骤排查修复：

• 确认Peer Connection的音轨添加逻辑
  仅将流存入状态不足以让WebRTC传输音频，需确保音轨被正确添加到Peer Connection（PC）。优先使用addTrack逐个添加轨道（比addStream兼容性更好）：

  window.navigator.mediaDevices
    .getUserMedia({ video: true, audio: true })
    .then(async (stream) => {
      setVideoStream(stream);
      // 遍历所有音视频轨道添加到PC
      stream.getTracks().forEach(track => {
        pc.addTrack(track, stream);
      });
    });
  

  若使用addStream，需确认调用时机在PC初始化之后：pc.addStream(stream);

• 强制SDP包含音频接收配置
  生成Offer和Answer时，显式指定接收音频，避免SDP中缺失音频相关m-line：

  // 发送方创建Offer
  const offer = await pc.createOffer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
  });
  await pc.setLocalDescription(offer);
  // 接收方创建Answer
  const answer = await pc.createAnswer({
    offerToReceiveAudio: true,
    offerToReceiveVideo: true
  });
  await pc.setLocalDescription(answer);
  

• 检查信令传输的完整性
  通过Socket.io传输SDP时，确保用JSON.stringify和JSON.parse完整序列化/反序列化，避免数据截断：

  // 发送方
  socket.emit('offer', JSON.stringify(pc.localDescription));
  // 接收方
  socket.on('offer', async (data) => {
    const offer = JSON.parse(data);
    await pc.setRemoteDescription(offer);
    // 后续创建Answer...
  });
  

• 验证接收方的流处理逻辑
  接收方需在ontrack事件中正确处理远端音频流，避免误绑定本地流：

  pc.ontrack = (event) => {
    const remoteStream = event.streams[0];
    // 将远端流绑定到音频元素
    if (audioRef.current) {
      audioRef.current.srcObject = remoteStream;
    }
  };
  

  检查音频元素是否未被本地流覆盖，确保srcObject指向远端流而非本地的videoStream

• 排查ICE连接与轨道状态

  • 监听ICE连接状态，确认连接已建立：

    pc.oniceconnectionstatechange = () => {
      console.log('ICE状态:', pc.iceConnectionState);
      // 正常状态应为connected或completed
    };
    

  • 确认音频轨道处于活跃状态：console.log('音频轨道状态:', stream.getAudioTracks()[0].enabled)，若为false需启用轨道

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