WebRTC peerConnection 'icecandidate' 事件监听器不工作答案

【问题标题】：WebRTC peerConnection 'icecandidate' event listener not workingWebRTC peerConnection 'icecandidate' 事件监听器不工作
【发布时间】：2021-04-03 21:50:55
【问题描述】：

我正在尝试使用 socket.io 和以下文档建立 webRTC 连接：https://webrtc.org/getting-started/peer-connections。看起来我已经能够建立连接并设置 LocalDescription 和 Remote Description 但“icecandidate”事件侦听器永远不会触发将候选人添加到另一个。任何帮助将不胜感激！

客户

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

async function makeCall() {

  const offer = await peerConnection.createOffer();
  await peerConnection.setLocalDescription(offer);

  socket.emit('offer', (offer));

  socket.on('answer', async (answer) => {
    if(answer) {
      console.log("answer successful");
      const remoteDesc = new RTCSessionDescription(answer);
      await peerConnection.setRemoteDescription(remoteDesc);
      console.log(peerConnection);

    }
  });
}

makeCall();

socket.on('offer', async (offer) => {
  if(offer) {
    console.log("now sending offer: " + offer);
    peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
    const answer = await peerConnection.createAnswer();
    await peerConnection.setLocalDescription(answer);
    socket.emit('answer', (answer));
    //signalingChannel.send({'answer': answer});
  }
});
    
// !!! THIS CODE NEVER TRIGGERS AND 'peerConnection.iceCandidate' returns null
peerConnection.addEventListener('icecandidate', event => {
  console.log('triggered outside scope'); // trigger check
    if (event.candidate) {
        console.log('triggered inside scope'); // trigger check
        socket.emit('candidate', event.candidate);
    }
});


// BELOW WILL NOT TRIGGER WITHOUT 'icecandidate' LISTENER

// Listen for remote ICE candidates and add them to the local RTCPeerConnection ()
socket.on('candidate', async (iceCandidate) => {
    if (iceCandidate) {
        try {
            await peerConnection.addIceCandidate(iceCandidate);
        } catch (e) {
            console.error('Error adding received ice candidate', e);
        }
    }
  })

// Confirm they are connected
peerConnection.addEventListener('connectionstatechange', event => {
    if (peerConnection.connectionState === 'connected') {
        // Peers connected!
        console.log('success')
    }
});

服务器

io.on("connection", (socket) => {
    

  socket.on('offer', (offer, answer) => {
    console.log(offer);
    socket.broadcast.emit('offer', (offer));
  }) 

  socket.on('answer', (answer) => {
    console.log(answer);
    socket.broadcast.emit('answer', (answer));
  }) 

  socket.on('candidate', (candidate) => {
    console.log(candidate);
    socket.broadcast.emit('candidate', (candidate));
  }) 

});

【问题讨论】：

标签： javascript reactjs socket.io webrtc

【解决方案1】：

您尝试建立的连接没有任何媒体轨道（通过 addTrack 或 addTransceiver 添加），也没有数据通道。因此，您提供的将不会有任何 SDP m= 线路，并且由于冰候选人与那些您不会得到任何相关联并且不会建立连接。

【讨论】：