如何使用 AJAX 和 PHP 发送 WebRTC 信号？

Question

我是 WebRTC 新手，我不明白信号在服务器端是如何工作的。我知道这个请求必须是双向的。我能够向 PHP 页面发送报价，但从那里我陷入困境。其他同行如何选择该报价以便它可以生成答案？我不需要套接字解决方案，因为我没有自己的服务器，并且我不想有第三方依赖项。

我已经创建了一个报价并将该报价发送到 PHP 页面。看我的代码：

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

我知道一定有办法发回答案，但我只想发送报价；这样我就能了解双方如何在后端交换 SDP。请尝试使用 PHP。如果有人可以创建一个信令 XHR 请求，我将不胜感激。

Answer 1

我知道关于这个话题还有其他答案，这个问题已经有 4 年历史了，但我只是自己想出来并想分享：

我对 Nielsbaloe 优秀的 PHP 示例 进行了一些扩展，这对我来说使其更加可靠。谢谢尼尔斯！

请参阅我的文章：（其中包含我的 github 存储库的链接）

https://peacocksoftware.com/blog/webrtc-video-chat-only-php-and-javascript-no-nodejs-or-websockets

它不使用 NodeJS 或 WebSockets，但它使用数据库来跟踪消息。该代码在技术上适用于 Drupal，但它旨在用作在任何 PHP 环境中构建视频聊天的指南。