CODEWITHSUNDEEP
webrtcstun
Michael
Michael

Reputation: 61

WebRTC videocall Mobile hotspot errors

I am trying to build a simple p2p video call with WebRTC and SocketIO for messaging. The videochat works fine when both clients are connected to different WIFI networks, but when on of them is using a mobile hotspot, the connection can't be establishd. Here are some key code chunks that might help find the issue: Starting a call/createOffer

function callNeighbor(){
  if(buddy=={}){console.log('CALL_NEIGHBOR Neighbor NULL')}
  else{

    const servers = {iceServers: [{urls: 'stun:stun1.l.google.com:19305'}]};
    pc=new RTCPeerConnection(servers);
    pc.onicecandidate = e => onIceCandidate(pc, e);
    pc.ontrack=gotRemoteStream;
    pc.onnegotiationneeded=function(){
      pc.createOffer().then(success=>{
        console.log(success)
        pc.setLocalDescription(success).then(success=>{
          socket.emit('rtcRequest',{from:name,to:buddy.name,body:pc.localDescription});

        },error=>{
          console.log(failure);
        });

      },
        failure=>{
          console.log(failure);
        })
    }
    navigator.mediaDevices.getUserMedia(constraints).then(handleSuccess).catch(handleError);
  }
}

onICECandidate

function onIceCandidate(pc, event) {
  const candidate=event.candidate
  if(candidate==null){return}
  console.log('**SENDING ICE** '+candidate)
  console.log(candidate)
  socket.emit("rtcICE",{from:name,to:buddy.name, body:candidate});
  console.log(`PC ICE candidate:\n${candidate ? candidate.candidate : '(null)'}`);
}

Receiving call/createAnswer

function handleCall(stream) {
  console.log(stream);
  localOut.srcObject = stream;

  localStream = stream;
  const audioTracks = localStream.getAudioTracks();
  if (audioTracks.length > 0) {
    // console.log(`Using Audio device: ${audioTracks[0].label}`);
  }
  localStream.getTracks().forEach(track => pc.addTrack(track, localStream));
  // console.log('Adding Local Stream to peer connection');
  pc.createAnswer().then(answer=>{
    pc.setLocalDescription(answer).then(success=>{
        socket.emit('rtcResponse',{from:name,to:buddy.name,body:pc.localDescription});

    },error=>{console.log(error)})

  },error=>{console.log(error)})
}

Adding Ice Candidate

socket.on('rtcICE',function(data){//rtcICE is via socketIO see onICECandidate above
  pc.addIceCandidate((data.body)).then(success=>console.log(success),error=>console.log(error));
})

LOGS

Caller

Caller's logs

Receiver Receiver's logs

EDIT Here's the code for setting remote description

socket.on('rtcRequest',function(data){
  const offer=data.body;
  const servers = {iceServers: [{urls: 'stun:stun1.l.google.com:19305'}]};;
  pc=new RTCPeerConnection(servers);
  pc.onicecandidate = e => onIceCandidate(pc, e);
  pc.ontrack=gotRemoteStream;
  pc.onnegotiationneeded=function(){
    console.log('NEGOTIATION NEEDED!!!')}
  pc.setRemoteDescription(data.body).then(success=>{
    navigator.mediaDevices.getUserMedia(constraints).then(handleCall).catch(handleError);
    },
    error=>{console.log(error)
    }
  );

})

Upvotes: 1

Views: 385

Answers (1)

Marck Regio
Marck Regio

Reputation: 1

I had the same problem. If you control your own TURN Server, check all the needed ports UDP and TCP ports. In my case, I forgot to open the 3748 in my TCP port I had only UDP opened.

Upvotes: 0

Related Questions