PeerJS+WebRTC多人语音聊天call.on('stream')偶发不触发问题排查

问题场景 #

使用Node.js、socket.io、Express、PeerJS和React构建语音聊天应用：

• 两台远程电脑（PC A和PC B）测试时，无论谁先进入房间，Peer连接均能稳定建立，流共享正常。
• 第三台电脑（PC C）加入已有PC A/B的房间时，连接偶发失败：
  • 若PC A已在房间，PC C加入后能看到PC A的流，但PC A无法看到PC C的流；
  • 若PC C先进入房间，能与PC A/B稳定建立音视频连接。

关键代码片段 #

偶发不触发call.on('stream')的代码（现有用户呼叫新用户） #

socket.on("user-joined", ({ peerId, username }) => {
  const call = myPeer.call(peerId, myStream, {
    metadata: { userName },
  });
  console.log("call", call);
  call.on("stream", (userVideoStream) => {
    console.log("call on stream user join");
    setPeers((prevPeers) => ({
      ...prevPeers,
      [peerId]: {
        stream: userVideoStream,
        userName: username,
      },
    }));
  });
});

能正常打印call对象，但call.on('stream')事件有时不触发。

始终触发call.on('stream')的代码（应答呼叫） #

myPeer.on("call", (call) => {
  console.log("callanswer");
  call.answer(myStream);
  call.on("stream", (userVideoStream) => {
    console.log("call on stream answer");
    setPeers((prevPeers) => ({
      ...prevPeers,
      [call.peer]: {
        stream: userVideoStream,
        userName: call.options.metadata.userName
      },
    }));
 });

Peer实例初始化代码 #

const peer = new Peer({
  config: {
    iceServers: [
      { url: "stun:stun.l.google.com:19302" },
      {
        url: "turn:numb.viagenie.ca",
        credential: "muazkh",
        username: "webrtc@live.com",
      },
    ],
  },
  host: "mypeerserver.com",
  path: "/",
  secure: true,
});

可能原因分析 #

1. 呼叫发起时机过早：现有用户收到user-joined事件后立即发起呼叫，此时本地ICE候选可能尚未收集完成，Peer连接建立不完整，无法接收新用户的流。
2. 缺少错误监听：未对call对象和Peer实例添加错误监听，无法捕获ICE连接失败、PeerID无效等异常，难以定位问题根源。
3. 本地流未完全就绪：发起呼叫时myStream的媒体轨道可能还未进入活跃状态，导致新用户无法正确接收并返回流。
4. PeerServer信令延迟：第三台用户加入时，PeerServer可能因负载或网络波动，出现PeerID同步、信令传递延迟，影响连接建立流程。

解决建议 #

1. 添加错误监听排查异常：
   给call对象和Peer实例补充错误监听，捕获连接过程中的问题：

   // 呼叫对象错误监听
   call.on('error', (err) => {
     console.error('呼叫错误:', err);
   });
   
   // Peer实例错误监听
   peer.on('error', (err) => {
     console.error('Peer实例错误:', err);
   });
   

2. 等待ICE候选收集完成后发起呼叫：
   确保Peer实例完全初始化、本地ICE候选收集完成后再处理房间呼叫逻辑，可通过peer.on('open', () => { ... })包裹房间加入相关代码。

3. 校验本地流的就绪状态：
   发起呼叫前检查流的轨道状态，确保所有媒体轨道处于活跃状态：

   const isStreamReady = myStream.getTracks().every(track => track.readyState === 'live');
   if (isStreamReady) {
     const call = myPeer.call(peerId, myStream, { metadata: { userName } });
     // 后续流监听逻辑
   } else {
     console.warn('本地流未就绪，延迟发起呼叫');
     setTimeout(() => {
       // 重试呼叫逻辑
     }, 1000);
   }
   

4. 优化双向呼叫逻辑：
   新用户加入房间时，不仅现有用户主动呼叫新用户，新用户也应主动获取房间内所有现有用户的PeerID并发起呼叫，形成双向呼叫机制，避免单向呼叫失败导致的流缺失。

5. 检查PeerServer状态与兼容性：
   确认PeerServer版本与PeerJS客户端版本兼容，查看PeerServer日志排查连接超时、PeerID冲突等问题；必要时升级或更换PeerServer服务。

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