未建立 Web RTC 连接答案

【问题标题】：Web RTC connection is not established未建立 Web RTC 连接
【发布时间】：2022-01-24 11:44:07
【问题描述】：

当我运行这段代码时连接没有建立，

在 Firefox 控制台中出现错误“WebRTC: ICE failed, add a STUN server and 有关更多详细信息，请参见 about:webrtc”显示，并且 dataChannel.readyState 是连接

在 Chrome 控制台中错误未出现但再次出现 dataChannel.readyState 正在连接

 var localconn, remoteconn, dataChannel, recievedDataChannel;
 connect();
 async function connect(){
     localconn = new RTCPeerConnection();
     remoteconn = new RTCPeerConnection();
     dataChannel = localconn.createDataChannel("dataChannel");

     dataChannel.onopen = e =>{
         console.log("data channel is open");
     }
     dataChannel.onmessage = e=>{
         console.log("new message: " +e.data);
     }

 remoteconn.ondatachannel = e =>{
     recievedDataChannel = e.channel;
     recievedDataChannel.onmessage = e=>{
         console.log("new message from remote : " +e.data);
     }

 }

 var offer = await localconn.createOffer();
 await localconn.setLocalDescription(offer);
 await remoteconn.setRemoteDescription(offer);
 var answer = await remoteconn.createAnswer();
 await remoteconn.setLocalDescription(answer);
 await localconn.setRemoteDescription(answer);

}

【问题讨论】：

标签： javascript webrtc p2p

【解决方案1】：

您需要一个侦听器来侦听对等连接上的 ICE 候选对象，并将这些侦听器应用到另一个对等点。

localconn.onicecandidate = function(event) {
  if (event.candidate) {
    remoteconn.addIceCandidate(event.candidate);
  } else {
    // All ICE candidates have been sent
  }
}

remoteconn.onicecandidate = function(event) {
  if (event.candidate) {
    localconn.addIceCandidate(event.candidate);
  } else {
    // All ICE candidates have been sent
  }
}

另见https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate

【讨论】：