基于WebRTC、Socket.IO与Node.js的CRA项目音频群呼流异常排查

环境信息 #

• Node.js: 18.17.1
• npm: 9.6.7
• 依赖版本：
  • socket.io-client: ^4.8.1
  • simple-peer: ^9.11.1

现状 #

• React客户端与Node.js Socket.IO服务器连接正常，join-room、user-joined、signal、user-left事件均能正常触发
• 使用simple-peer实现多端Peer连接，自定义Audio组件中Peer的stream事件未触发，无法接收远端音频流
• 已完成本地麦克风流初始化，本地音频可正常播放

排查与修复步骤 #

1. 确认本地流是否正确传入simple-peer实例 #

创建Peer实例时，必须确保stream参数传入有效的MediaStream对象，且已成功获取麦克风权限：

// 正确示例：创建Peer时传入已获取的本地流
const peer = new SimplePeer({
  initiator: isInitiator,
  trickle: false,
  stream: this.localStream // 需确认此处localStream不为null/undefined
});

可在getUserMedia成功回调中打印localStream.getTracks()，验证是否包含活跃的音频轨道。

2. 提前绑定stream事件 #

必须在Peer实例创建后立即绑定stream事件，避免事件触发时未完成监听：

// 创建Peer后第一时间绑定stream事件
const peer = new SimplePeer({ /* 配置项 */ });
peer.on('stream', (remoteStream) => {
  // 将远端流存入状态，传给Audio组件
  this.setState(prev => ({
    peers: [...prev.peers, { id: remoteUserId, stream: remoteStream }]
  }));
});
// 再绑定其他事件
peer.on('signal', (data) => { /* 发送信令到服务器 */ });

3. 验证信令转发的完整性 #

• 服务器端需确保将用户的signal信令（offer/answer/candidate）完整转发给房间内所有其他用户，不能遗漏
• 客户端收到信令后，必须调用peer.signal(data)处理，确保每一条信令都被正确传递

4. 检查浏览器权限与流状态 #

• 确认浏览器已授予麦克风权限（地址栏左侧可查看权限状态）
• 验证本地流未被暂停：执行this.localStream.getAudioTracks()[0].enabled，确保返回true

5. 调整simple-peer配置 #

• 确认initiator标记正确：房间内第一个加入的用户设为initiator: true，后续用户设为false
• 尝试开启trickle（设为true），部分网络环境下关闭trickle可能导致连接建立失败

6. 查看WebRTC底层日志 #

在Chrome中打开chrome://webrtc-internals/，检查关键状态：

• 查看iceConnectionState是否变为connected
• 确认ICE候选是否成功配对
• 检查远端流的轨道是否存在且处于活跃状态

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