WebRT C: соединение успешно, но отвечающий узел никогда не получает "отслеживание" событий - PullRequest
0 голосов
/ 22 апреля 2020

С двумя одноранговыми узлами, подключенными через WebRT C, мы можем видеть, что одноранговое соединение завершено, но только один клиент получает видеопоток (одноранговый «предлагающий»). «Отвечающий» одноранговый узел никогда не получает «отслеживаемые» события (peerConnection.ontrack).

код «отвечающего» однорангового узла, который отображает проблему:

const peerConnection = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun1.l.google.com:19302' }]});

const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localStream.getTracks().forEach((track) => { peerConnection.addTrack(track, localStream) });

const { data } = await axios.get("http://{HIDDEN}/offer");
if (data) {
  // console.log('received offer', data.offer)
  await peerConnection.setRemoteDescription(data.offer);
  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);
  connectionInfo.current.answer = peerConnection.localDescription;
  data.iceCandidates.forEach(async (candidate: any) => {
    await peerConnection.addIceCandidate(candidate);
  });

  // Set peer connection event handlers
  peerConnection.onicecandidate = (event) => {
    if (event.candidate) connectionInfo.current.iceCandidates.push(event.candidate);
  };
  peerConnection.onicegatheringstatechange = async () => {
    if (peerConnection.iceGatheringState === "complete" && connectionInfo.current.answer) {
      await axios.post("http://{HIDDEN}/answer", connectionInfo.current);
    }
  };
  peerConnection.ontrack = async (event) => {
    remoteStream.addTrack(event.track);
  };

  if (peerConnection.iceGatheringState === "complete") {
    await axios.post("http://{HIDDEN}/answer", connectionInfo.current);
  }
}

1 Ответ

0 голосов
/ 22 апреля 2020

Я нашел этот пост, в котором упоминается ваша проблема и предполагается, что порядок, в котором создаются прослушиватели событий относительно вызова peerConnection.setRemoteDescription(), является проблемой: https://github.com/w3c/webrtc-pc/issues/198

Перемещение Обработчики событий сразу после инициализации new RTCPeerConnection (до настройки описания) должны решить эту проблему. Например:

const peerConnection = new RTCPeerConnection({ iceServers: [{ urls: 'stun:stun1.l.google.com:19302' }]});

// Set peer connection event handlers - MOVED UP HERE
peerConnection.onicecandidate = (event) => {
  if (event.candidate) connectionInfo.current.iceCandidates.push(event.candidate);
};
peerConnection.onicegatheringstatechange = async () => {
  if (peerConnection.iceGatheringState === "complete" && connectionInfo.current.answer) {
    await axios.post("http://{HIDDEN}/answer", connectionInfo.current);
  }
};
peerConnection.ontrack = async (event) => {
  remoteStream.addTrack(event.track);
};

const localStream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
localStream.getTracks().forEach((track) => { peerConnection.addTrack(track, localStream) });

const { data } = await axios.get("http://{HIDDEN}/offer");
if (data) {
  // console.log('received offer', data.offer)
  await peerConnection.setRemoteDescription(data.offer);
  const answer = await peerConnection.createAnswer();
  await peerConnection.setLocalDescription(answer);
  connectionInfo.current.answer = peerConnection.localDescription;
  data.iceCandidates.forEach(async (candidate: any) => {
    await peerConnection.addIceCandidate(candidate);
  });

  if (peerConnection.iceGatheringState === "complete") {
    await axios.post("http://{HIDDEN}/answer", connectionInfo.current);
  }
}
...