WebRTC手动交换Offer/Answer超时致iceConnectionState失败问题排查

核心行为原因 #

WebRTC的ICE框架内置连接超时机制：当PeerConnection发起连接尝试后，若在指定时间内（Firefox默认10秒、Chrome默认15秒）无法找到可配对的远端ICE候选或完成SDP交换，会将iceConnectionState置为failed。你的场景中，发起端创建Offer后立刻启动ICE连接流程，但此时远端Answer还未交换，ICE没有远端候选可配对，最终触发超时失败。

代码中的Bug #

1. 过早创建DataChannel触发ICE连接 #

在createPeerConnection方法中，直接调用openDataChannel创建DataChannel。对于发起端（创建Offer的一方），DataChannel创建后，PeerConnection会立即启动ICE收集和连接尝试，但此时远端还未交换Answer，无任何远端候选可配对，必然触发ICE超时。

2. getIceCandidates仅等待ICE收集完成，未处理连接状态 #

getIceCandidates只监听iceGatheringState变为complete就resolve，但ICE收集完成不代表连接成功。同时这里覆盖了oniceconnectionstatechange事件，却未处理failed状态的恢复逻辑。

3. acceptAnswer缺少await，状态处理不及时 #

acceptAnswer中调用setRemoteDescription未加await，会导致后续逻辑在SDP设置完成前执行，且无法捕获设置过程中的错误，影响连接状态同步。

修复建议 #

1. 延迟创建DataChannel，直到SDP交换完成

   • 发起端：在acceptAnswer执行成功后，或监听connectionstatechange变为connecting/connected时再创建DataChannel。
   • 应答端：无需主动创建DataChannel，通过监听datachannel事件接收发起端创建的通道即可。

2. 调整ICE连接触发时机
   避免在SDP交换完成前启动ICE连接尝试，确保PeerConnection收到远端SDP后再开始ICE候选配对。

3. 修复acceptAnswer的异步逻辑

   acceptAnswer = async (answer) => {
     if (!this.peerConnection.currentRemoteDescription) {
       answer = new RTCSessionDescription(answer);
       await this.peerConnection.setRemoteDescription(answer);
       console.log('accepted')
     };
   };
   

4. 添加ICE失败后的重试逻辑
   在oniceconnectionstatechange中监听failed状态，触发ICE重启：

   this.peerConnection.oniceconnectionstatechange = () => {
     console.log(this.peerConnection.iceConnectionState, this.peerConnection.iceGatheringState);
     if (this.peerConnection.iceConnectionState === 'failed') {
       // 重启ICE流程
       this.peerConnection.restartIce();
     }
   };
   

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