Web RTC connection is not established

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

}

Solution

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