WebRTC在Chrome/Opera GX正常，Firefox连接失败如何解决？

以下是针对你代码中可能导致Firefox连接失败的几个关键修复点：

1. 等待setLocalDescription完成后再处理SDP #

Chrome会自动兼容setLocalDescription的异步状态，但Firefox要求必须等待该操作完成后再向外发送SDP。你的代码直接调用setLocalDescription却未等待Promise完成，会导致SDP未完全就绪就被序列化发送。

修改createOffer和createAnswer函数：

const createOffer = async () => {
  try {
    const pc = pc.current;
    const sdp = await pc.createOffer({ offerToReceiveAudio: true, offerToReceiveVideo: true });
    // 必须等待setLocalDescription完成后再处理SDP
    await pc.setLocalDescription(sdp);
    // 此时再序列化就绪的本地描述
    console.log(JSON.stringify(pc.localDescription));
  } catch (error) {
    console.error("Error creating offer:", error);
  }
};

const createAnswer = async () => {
  try {
    const pc = pc.current;
    const sdp = await pc.createAnswer({ offerToReceiveAudio: true, offerToReceiveVideo: true });
    await pc.setLocalDescription(sdp);
    console.log(JSON.stringify(pc.localDescription));
  } catch (error) {
    console.error("Error creating answer:", error);
  }
};

2. 为setRemoteDescription和addIceCandidate添加错误处理与异步等待 #

Firefox对WebRTC异步操作的错误更敏感，未处理的Promise拒绝会直接导致连接失败。同时必须确保在setRemoteDescription完成后再添加ICE候选，否则Firefox会拒绝无效的候选。

修改这两个函数：

const setRemoteDescription = async () => {
  try {
    const pc = pc.current;
    const sdp = JSON.parse(inputRef.current.value);
    console.log(sdp);
    await pc.setRemoteDescription(new RTCSessionDescription(sdp));
  } catch (error) {
    console.error("Error setting remote description:", error);
  }
};

const addIceCandidate = async () => {
  try {
    const pc = pc.current;
    const candidate = JSON.parse(inputRef.current.value);
    // 过滤空候选（部分浏览器会生成空候选标记ICE收集结束）
    if (candidate.candidate) {
      await pc.addIceCandidate(new RTCIceCandidate(candidate));
    }
  } catch (error) {
    console.error("Error adding ICE candidate:", error);
  }
};

3. 监控连接状态排查细节 #

添加ICE连接状态监听，方便定位失败的具体原因：

pc.current.oniceconnectionstatechange = () => {
  console.log("ICE connection state:", pc.current.iceConnectionState);
  if (pc.current.iceConnectionState === "failed") {
    console.log("ICE gathering state when failed:", pc.current.iceGatheringState);
  }
};

4. 验证SDP序列化完整性 #

Firefox的SDP格式包含部分Chrome忽略的字段，直接序列化手动创建的sdp对象可能丢失关键信息。建议直接使用pc.localDescription进行序列化，而非createOffer/createAnswer返回的原始对象。

完成以上修改后，重新测试Firefox中的连接，即可解决大部分兼容性问题。

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