没有 Ice Candidates 聚集，peerConnection.iceGatheringState 立即返回“完成”

Question

我已经被困在这个问题上有一段时间了。我的代码基于https://webrtc.org/getting-started/firebase-rtc-codelab。我基本上只是将其更改为 React 和 firebase 实时数据库而不是 firestore。

const VideoRoom = () => {
  const config = {
    apiKey: xxx,
    authDomain: xxx,
    databaseURL: xxx,
    projectId: xxx,
    storageBucket: xxx,
    messagingSenderId: xxx,
    appId: xxx,
  };

  const rtcconfig = {
    iceServers: [
      {
        urls: [
          "stun:stun1.l.google.com:19302",
          "stun:stun2.l.google.com:19302",
        ],
      },
    ],
    iceCandidatePoolSize: 10,
  };

  const { roomId } = useParams();

  if (!firebase.apps.length) {
    firebase.initializeApp(config);
  }

  const db = firebase.database();
  const rooms = () => db.ref("rooms");
  const room = (roomId) => db.ref(`rooms/${roomId}`);
  const callerCandidates = (roomId) =>
    db.ref(`rooms/${roomId}/callerCandidates`);
  const calleeCandidates = (roomId) =>
    db.ref(`rooms/${roomId}/calleeCandidates`);

  const peerConnection = new RTCPeerConnection(rtcconfig);
  var localStream = new MediaStream();
  var remoteStream = null;

  var localVideo = useRef(null);
  var remoteVideo = useRef(null);

  room(roomId)
    .once("value")
    .then((snapshot) => {
      if (!snapshot.val()) {
        createRoom();
        return;
      }
      joinRoomById(roomId, snapshot.val());
    });

  useEffect(() => {
    peerConnection.addEventListener("icegatheringstatechange", () => {
      console.log(
        `ICE gathering state changed: ${peerConnection.iceGatheringState}`
      );
    });

    peerConnection.addEventListener("connectionstatechange", () => {
      console.log(`Connection state change: ${peerConnection.connectionState}`);
    });

    peerConnection.addEventListener("signalingstatechange", () => {
      console.log(`Signaling state change: ${peerConnection.signalingState}`);
    });

    peerConnection.addEventListener("iceconnectionstatechange ", () => {
      console.log(
        `ICE connection state change: ${peerConnection.iceConnectionState}`
      );
    });
  });

  const createRoom = async () => {
    console.log("create room");
    localStream.getTracks().forEach((track) => {
      console.log("adding localStream to peerConnection");
      peerConnection.addTrack(track, localStream);
    });

    peerConnection.addEventListener("icecandidate", (event) => {
      console.log("listening for icecandidate on peerConnection");
      if (!event.candidate) {
        console.log("final icecandidate");
        return;
      }
      console.log("callerCandidate written to database");
      callerCandidates(roomId).set(event.candidate.toJSON());
    });

    const offer = await peerConnection.createOffer();
    await peerConnection.setLocalDescription(offer);
    console.log("Offer created and added to peerConnection local description");

    const roomWithOffer = {
      offer: {
        type: offer.type,
        sdp: offer.sdp,
      },
    };

    await room(roomId).update(roomWithOffer);
    console.log("Offer written to room database document");

    peerConnection.addEventListener("track", (event) => {
      event.streams[0].getTracks().forEach((track) => {
        console.log(
          "listening for track on peerConnection and adding them to remoteStream"
        );
        remoteStream.addTrack(track);
      });
    });

    room(roomId).on("value", async (snapshot) => {
      console.log("listening for remote session in room database document");
      const data = snapshot.val();
      if (!peerConnection.currentRemoteDescription && data && data.answer) {
        console.log("Got remote description: ", data.answer);
        const rtcSessionDescription = new RTCSessionDescription(data.answer);
        await peerConnection.setRemoteDescription(rtcSessionDescription);
      }
    });

    calleeCandidates(roomId).on("value", (snapshot) => {
      console.log(
        "listening for remote ICE candidates in room/calleCandidates database document"
      );
      if (snapshot.val()) {
        snapshot.val().forEach(async (change) => {
          if (change.type === "added") {
            let data = change.doc.data();
            await peerConnection.addIceCandidate(new RTCIceCandidate(data));
          }
        });
      }
    });
  };
};

我通过反应路由器获取 roomId，为了可读性，我省略了组件的其余部分。

控制台返回如下：

创建房间
信令状态更改：have-local-offer
创建优惠并添加到peerConnection 本地描述
ICE 收集状态已更改：
在peerConnection 上完成icecandidate 的侦听
最终icecandidate
将localStream 添加到peerConnection
将offer 写入房间数据库文档，
侦听房间/中的远程ICE 候选者calleCandidates 数据库文档
侦听房间数据库文档中的远程会话

在 about:webrtc firefox 选项卡中，我可以看到报价已成功创建，但没有任何ice候选人

提前致谢！

Answer 1

因此，事实证明，ICE 候选人收集仅在某些曲目添加到流中时才开始，并且必须在创建报价之前完成。

因此，如果您在创建报价之前收集媒体并将其添加到 RTCPeerConnection 实例，那么您将看到 ICE 候选者被正确收集。

编辑：除此之外，如果您在创建报价时提供如下选项，它将按预期开始 ICE 收集：

await this.connection.createOffer({
  offerToReceiveAudio: true,
  offerToReceiveVideo: true,
});

希望能帮助到你！