Web RTC connection is not established

Question

When I run this code connection is not established,

• in firefox console error "WebRTC: ICE failed, add a STUN server and see about:webrtc for more details" shows up and dataChannel.readyState is connecting

• in Chrome console error does not show up but again dataChannel.readyState is connecting

   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);
  

  }

Answer 1

You need a listener for ICE candidates on the peer connection and apply those to the other peer.

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
  }
}

See also https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/onicecandidate