WebRTC लाठी और वीडियो कॉल के साथ एक आवेदन करना

const WebSocketServer = require('websocket').server;
const http = require('http');

const server = http.createServer(function(request, response) {
 //    ,    ,  http
});
server.listen(1337, function() {});

//   
const wsServer = new WebSocketServer({
  httpServer: server
});

wsServer.on('request', function(request) {
  let connection = request.accept(null, request.origin);
//   
})

     <video autoplay muted height='300' width='300' style="position:fixed;bottom:0;left:0;z-index: 9999;" src="" id='my'>
          </video> <!--   --> 

          <video autoplay height='300' width='300' style="position:fixed;bottom:0;left:300px;z-index: 999999;" src="" id='not_my'>
          </video> <!--  -->

  let connection = new WebSocket('ws://127.0.0.1:1337');//   -
  connection.onopen = function(){
//  ,  -      
 }
connection.onmessage = function(message){
//        


}
connection.onerror = function (error) {
        console.error(error)
       //  ,   
      };

तो, हमारे वास्या और पेट्या पर वापस जाएं

1. हम सबसे पहले JSON सर्वर सॉकेट में एक हेलमेट भेजते हैं, ताकि हम वासा के खाते से पेटीएम को कॉल करें
   
   

   connection.send(JSON.stringify({
   //  
   }))
   

2. हमें सॉकेट सर्वर पर इस JSON को स्वीकार करना चाहिए, अनुरोध प्राप्त होने के बाद, हम अपने सर्वर को संदेश घटना देते हैं :
   
   

   connection.on('message',function(message){
   //   message    ,     JSON  JS
   let self = JSON.parse(message.utf8Data);
   })
   

बातचीत करने और निर्णय लेने के बाद कि दोनों उपयोगकर्ता बातचीत के लिए तैयार हैं, हमें यह पता लगाना होगा कि ब्राउज़र में वीडियो संचार कैसे काम करता है, इसके लिए एक मॉड्यूल js में बनाया गया है - RTCPeerConnection

हम प्रस्ताव देते हैं और भेजते हैं

var pc = new RTCPeerConnection();
            
            var peerConnectionConfig = {
              iceServers: [
                  {
                      urls: 'stun:stun.l.google.com:19302'
                  }
                ]
            }
            pc.onicecandidate = function (event) {
              console.log('new ice candidate', event.candidate);

              if (event.candidate !== null) {
                connection.send(JSON.stringify({
                 // json  ice 
                }))
              }
          };

            navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;
                      

            navigator.getUserMedia({video: true,audio:true}, function(stream) {
              //      onaddstream  ,
              //    .
            var my_video = document.getElementById('my')
            my_video.srcObject = stream

              pc.onaddstream = e => {
                document.getElementById('not_my').srcObject = e.stream;
                console.log('not stream is added')
              }
              pc.addStream(stream);   
            
              pc.createOffer(function(offer) {
                pc.setLocalDescription(offer, function() {
                  //  offer  
                  }))
                }, e=> console.log(e));
              }, e=> console.log(e));
            },function (){console.warn("Error getting audio stream from getUserMedia")});

            //  
            function endCall() {
              var videos = document.getElementsByTagName("video");
              for (var i = 0; i < videos.length; i++) {
                videos[i].pause();
              }
            
              pc.close();
            }

            function error(err) {
              endCall();
            }
 

हम प्रस्ताव की प्रक्रिया करते हैं और उत्तर देते हैं

var pc = new RTCPeerConnection();// connection
var peerConnectionConfig = { // ice server
              iceServers: [
                  {
                      urls: 'stun:stun.l.google.com:19302'
                  }
                ]
            }
            pc.onicecandidate = function (event) {
              console.log('new ice candidate', event.candidate);

              if (event.candidate !== null) {
                // ice 
              }
          };


            navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia;

            navigator.getUserMedia({video: true,audio:true}, function(stream) {//          
              var my_video = document.getElementById('my')
              my_video.srcObject = stream
              console.log('stream is added while offering')

              pc.onaddstream = e => {
                console.log('not my stream is added while offering')
                document.getElementById('not_my').srcObject = e.stream;
                
              }
              pc.addStream(stream);
            
              pc.setRemoteDescription(new RTCSessionDescription(data.offer), function() {
                pc.createAnswer(function(answer) {
                  pc.setLocalDescription(answer, function() {
                    // 
                  }, e => console.log(e));
                }, e => console.log(e));
              }, e => console.log(e));
            },function (){console.warn("Error getting audio stream from getUserMedia")});
          }
        }

हम उत्तर स्वीकार करते हैं और एक वीडियो स्ट्रीम बनाते हैं

pc.setRemoteDescription(new RTCSessionDescription(data.answer), function() { }, error);

और आखिरी चीज जो हमें करने की ज़रूरत है वह है आइस पैकेट

pc.addIceCandidate(new RTCIceCandidate(ice))// ice -  ,