7

I'm new to WebRTC and I don't understand how the signaling works on the server side. I know the request must be two-way. I'm able to send an offer to a PHP page but from there I'm stuck.. How does the other peer pick that offer so that it can generate an answer? I don't want a socket solution because I don't have my own server and I don't want to have a third-party dependency.

I have created an offer and sent that offer to a PHP page. See my code:


var myPeerConnection;
var caller_video=document.getElementById('caller_video');
var receiver_video=document.getElementById('receiver_video');
var mediaConstraints = {
  video:true,
  audio:false
};
function sendToServer(msg){
    var msgJSON = JSON.stringify(msg);
    $.ajax({
        type:'get',
        url:'offer.php',
        data:'object='+msgJSON,
        beforeSend:function(){
        console.log('Sending...');  
        },
        success:function(data){
            console.log(data);
        }
    });
}
function reportError(error){
    console.log(error.name);
}
function handleNegotiationNeededEvent(){
  myPeerConnection.createOffer().then(function(offer) {
    return myPeerConnection.setLocalDescription(offer);
  })
  .then(function(){ // so here I'm supposed to send an offer
    sendToServer({
      name: myUsername,
      target: targetUsername,
      type: "video-offer",
      sdp: myPeerConnection.localDescription
    });
  })
  .catch(reportError);
}
function handleICECandidateEvent(event){
  if(event.candidate){//send the ICECandidates
    sendToServer({
      name: myUsername,
      target: targetUsername,
      type: "new-ice-candidate",
      candidate: event.candidate
    });
  }
}
function handleTrackEvent(event){
    console.log(event);
  document.getElementById("received_video").srcObject = event.streams[0];
}

function handleRemoveTrackEvent(event){
  var stream = document.getElementById("received_video").srcObject;
  var trackList = stream.getTracks();
  if (trackList.length == 0){
    closeVideoCall();
  }
}
function handleICEConnectionStateChangeEvent(event){
    console.log('ICE connection changed!');
  switch(myPeerConnection.iceConnectionState) {
    case "closed":
    case "failed":
    case "disconnected":
      closeVideoCall();
      break;
  }
}
function handleICEGatheringStateChangeEvent(event){
    console.log('Is gathering');
    console.log(event);
}
function handleSignalingStateChangeEvent(event) {
    console.log('Signaling state changed');
  switch(myPeerConnection.signalingState) {
    case "closed":
      closeVideoCall();
      break;
  }
};
function createPeerConnection() {
    var STUN = {
    'url': 'stun:stun.l.google.com:19302',
    };
    var iceServers = 
    {
        iceServers: [STUN]
    };

  myPeerConnection = new RTCPeerConnection(iceServers);
  myPeerConnection.onnegotiationneeded = handleNegotiationNeededEvent;
  myPeerConnection.onicecandidate = handleICECandidateEvent;
  myPeerConnection.ontrack = handleTrackEvent;
  myPeerConnection.onremovetrack = handleRemoveTrackEvent;
  myPeerConnection.oniceconnectionstatechange = handleICEConnectionStateChangeEvent;
  myPeerConnection.onicegatheringstatechange = handleICEGatheringStateChangeEvent;
  myPeerConnection.onsignalingstatechange = handleSignalingStateChangeEvent;
}
function handleGetUserMediaError(e) {
  switch(e.name) {
    case "NotFoundError":
      alert("Unable to open your call because no camera and/or microphone" +
            "were found.");
      break;
    case "SecurityError":
    case "PermissionDeniedError":
      // Do nothing; this is the same as the user canceling the call.
      break;
    default:
      alert("Error opening your camera and/or microphone: " + e.message);
      break;
  }
  closeVideoCall();
}
function closeVideoCall(){
//do something to exit the video call
}
    //invite the other peer...we want to send our SDP
function invite(evt){
  if (myPeerConnection){
    console.log('Call already started');
  } 
  else{
    //myPeerConnection=new MediaStream();
    targetUsername ='Nevil';//Unique other peer username
    myUsername='Philip';
    createPeerConnection();//this function creates a peer connection//uses the STUN/TURNS servers...updates myPeerConnection variable so it's not null
    navigator.mediaDevices.getUserMedia(mediaConstraints)//grab our media constraints
    .then(function(localStream) {
      caller_video.srcObject =localStream;
      caller_video.play();
      localStream.getTracks().forEach(track => myPeerConnection.addTrack(track, localStream));
    })
    .catch(handleGetUserMediaError);
  }
}

//we click the call button
document.querySelector('#callBt').addEventListener('click',function(){
    invite();
});

I know there must be a way to send back the answer but I would like to just send the offer; that way I will understand how both peers exchange the SDP on the backend. Please try using PHP. If anyone can create a signaling XHR request, I will appreciate it.

Boann
  • 48,794
  • 16
  • 117
  • 146
PhilipKim
  • 99
  • 4

0 Answers0