离线状态下Local WebRTC连接卡在‘checking’状态的技术求助

DevOps 小满

2026-5-28

问题原因分析

这个问题我之前也碰到过，核心原因是你用了默认的RTCPeerConnection配置——当你传入null时，浏览器会自动添加公共STUN服务器（比如谷歌的stun.l.google.com:19302）。在线时这些服务器能正常响应，帮浏览器收集到可用的ICE候选，连接自然能顺利建立；但离线时，浏览器无法访问这些外部服务器，会一直卡在ICE候选收集阶段，导致iceConnectionState停留在checking状态，它在等STUN的响应，而永远等不到。

解决方案

显式指定ICE服务器为空数组，告诉浏览器只使用本地候选（host candidates），完全不依赖外部STUN/TURN服务器：

把代码中两处的new RTCPeerConnection(null)修改为：

new RTCPeerConnection({ iceServers: [] })

修改后的关键代码片段

Joiner 部分：

(() => {
  const log = (message) => logWithIndent(message, 50);
  // 显式设置空ICE服务器列表
  const pc = new RTCPeerConnection({ iceServers: [] });
  const sdpConstraints = { optional: [{RtpDataChannels: true}] };
  // 剩余代码保持不变...
})();

Creator 部分：

(() => {
  const log = (message) => logWithIndent(message, 0);
  // 显式设置空ICE服务器列表
  const pc = new RTCPeerConnection({ iceServers: [] });
  let dataChannel = null;
  // 剩余代码保持不变...
})();

为什么这样能解决问题？

当iceServers为空时，浏览器只会收集本地IP地址对应的host候选，不需要和任何外部服务器通信。对于单台电脑内的WebRTC连接（同一页面的两个PeerConnection实例），host候选完全足够完成连接——因为两个Peer都在同一设备上，直接通过本地IP就能完成ICE协商，离线环境下也能正常走完连接流程。

验证步骤