How do I do WebRTC signaling using AJAX and PHP? - php

Question

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.