Angular中WebRTC的peerConnection.onicecandidate回调未触发问题求助

你好呀！看你作为新手在做WebRTC视频通话项目，已经搞定了WebSocket传输SDP，但卡在ICE候选回调不触发的问题上，我来帮你梳理几个最可能的原因和解决思路~

1. 核心问题：PeerConnection没有绑定媒体轨道 #

WebRTC的ICE候选收集机制是按需触发的——只有当PeerConnection需要传输媒体数据（音频/视频轨道）时，浏览器才会启动ICE候选的收集流程。看你的代码，目前只创建了PeerConnection、交换了SDP，但完全没有添加任何媒体轨道到连接里！

举个例子，你需要先获取本地音视频流，把轨道添加到PeerConnection中：

// 在创建PeerConnection后添加这段代码（比如处理join消息或offer的逻辑里）
async function addLocalMedia(peerConnection: RTCPeerConnection) {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    });
    // 将所有轨道添加到PeerConnection
    stream.getTracks().forEach(track => {
      peerConnection.addTrack(track, stream);
    });
  } catch (err) {
    console.error("获取本地媒体失败:", err);
  }
}

没有媒体轨道的话，浏览器会认为这个PeerConnection没有实际数据要传输，自然不会去联系STUN服务器收集ICE候选，onicecandidate回调也就不会被调用。

2. 检查STUN服务器的有效性 #

虽然你配置了谷歌的STUN服务器，但可以通过浏览器的WebRTC调试工具确认是否能正常连接：

• Chrome浏览器可以打开 chrome://webrtc-internals/，找到对应的PeerConnection实例，查看ICE gathering state（正常流程应该从new变为gathering再到complete），同时看STUN服务器的连接状态是否正常。
• 如果STUN服务器无法访问，ICE收集也会失败，但这种情况一般会在控制台有错误日志，你可以先排查媒体轨道的问题，再看这个。

3. 确认PeerConnection的引用是否被保留 #

看你的代码，在处理join和offer消息时创建了PeerConnection并存在stableMembers数组里，要确保这个引用不会被意外销毁（比如数组被重置、对象被覆盖）。不过这个问题导致回调不触发的概率较低，先优先解决媒体轨道的问题。

4. 手动触发ICE收集（临时调试用） #

如果已经添加了媒体轨道但还是没触发，可以尝试手动调用restartIce()强制启动ICE收集：

peerConnection.onicegatheringstatechange = () => {
  console.log("ICE收集状态:", peerConnection.iceGatheringState);
};
// 在setLocalDescription之后调用
await peerConnection.setLocalDescription(await peerConnection.createOffer());
peerConnection.restartIce();

这个方法可以帮你验证ICE机制是否能正常工作，不过最终还是要保证媒体轨道的正确绑定。

另外，等onicecandidate回调触发后，记得要把收集到的候选通过WebSocket发送给对方，对方需要调用peerConnection.addIceCandidate(event.candidate)来完成ICE连接哦~

备注：内容来源于stack exchange，提问作者Horia Bosoanca