WebRTC旧项目调试：代码正确性验证与问题排查

1. 触发.call按钮后发送login和doneoif事件的逻辑问题 #

代码中按钮触发后先发送login事件，再通过2秒定时器发送doneoif事件，存在两处核心问题：

• 硬编码定时器不可靠：2秒延迟是固定值，无法适配网络波动或信令服务器的响应速度，可能出现login事件还未得到服务器确认，就提前发送doneoif，导致状态不一致。正确做法是等待login的成功响应（即信令监听中的showcall事件触发后），再发送doneoif。
• 信令映射缺失：客户端信令监听中只有donecall事件触发call函数，但未看到doneoif事件的处理逻辑，需确认信令服务器是否将doneoif正确映射为客户端的donecall事件，否则发送的doneoif事件无法触发后续通话流程。

对应问题代码片段：

// 错误：固定2秒延迟，未等待login确认
setTimeout(() => {
  wbsc.emit("SEND_EVENT_EMIT_CALL_AUDIO", {
    data: { type: "doneoif", id: id },
  });
}, 2e3);

2. ontrack事件处理逻辑问题 #

代码中的ontrack事件存在核心错误，同时可以简化远程流的设置：

• 错误的判断条件：ontrack事件的event对象不存在candidate属性，candidate是onicecandidate事件的参数，当前代码的if (event.candidate !== null)会直接走else分支，完全无法处理远程流。
• 可以直接设置remoteVideo.srcObject = event.streams[0]：event.streams[0]是完整的远程MediaStream，直接赋值给video元素的srcObject是WebRTC推荐的简洁写法，不需要手动创建remoteStream再逐个添加Track。

修正后的ontrack代码：

yourConn.ontrack = (event) => {
  if (event.streams && event.streams[0]) {
    remoteVideo.srcObject = event.streams[0];
  } else {
    console.error("ontrack事件未获取到有效流", event);
  }
};

3. 主叫端setRemoteDescription()的正确位置 #

根据WebRTC规范，主叫端需在收到被叫的Answer SDP后调用setRemoteDescription()，该逻辑必须放在handleAnswer函数中，而非handleCandidate：

• handleCandidate仅用于处理ICE候选地址，和SDP协商无关，不能在此处设置远程SDP。
• 当前代码中的handleAnswer函数已经实现了该逻辑，但需确保信令服务器的answercall事件正确触发handleAnswer，同时修复call函数中的语法错误（无效的RTCPeerConnection.createOffer().offer.await代码需删除）。

修正后的call函数关键片段：

async function call(id) {
  // ... 其他代码 ...
  try {
    const offer = await yourConn.createOffer();
    await yourConn.setLocalDescription(offer);
    wbsc.emit("SEND_EVENT_EMIT_CALL_AUDIO", {
      data: { type: "offer", offer: offer, id: connectedUser },
    });
  } catch (e) {
    fl(e);
  }
  // ... 其他代码 ...
}

4. 被叫端RTCPeerConnection的复用问题 #

• 不需要重新实例化，但需确保连接状态有效：如果被叫端已经完成handleLogin流程（已创建全局yourConn且未关闭），可以直接复用该变量；但如果yourConn已经被handleLeave关闭（yourConn.close()），则必须重新实例化，因为关闭后的连接无法再次使用。
• 优化建议：每次通话开始时检查yourConn的状态，若已关闭或未初始化，则重新创建RTCPeerConnection，避免复用无效连接。

5. 全局remoteStream的覆盖问题 #

• 不需要手动创建remoteStream：直接复用remoteVideo元素即可，通过ontrack事件直接将event.streams[0]赋值给remoteVideo.srcObject，既避免了remoteStream被覆盖的问题，也简化了代码逻辑。
• 当前代码中先创建remoteStream再赋值给remoteVideo，然后在ontrack中添加Track的逻辑是冗余的，完全可以删除remoteStream相关代码，直接使用event.streams[0]。

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