💪🏿 🕙 🏂🏻 WebRTC Erstellen einer Anwendung mit Blackjack- und Videoanrufen 👩‍🔧 👇🏾 🕰️

Sehr geehrter Leser, bevor wir mit dem Schreiben des Codes beginnen, werfen wir einen Blick auf das Konzept der Videoanrufe.

Stellen Sie sich die Situation vor: Wir haben eine Chat-Plattform und müssen Videoanrufe daran befestigen, das heißt, ein bestimmter Vasya sitzt online und er möchte Petya anrufen. Um eine solche Funktion zu implementieren, benötigen wir die WebSocket- Technologie .

Lassen Sie uns unseren WebSocket-Server erhöhen. Node.js hilft uns dabei.
Erstellen Sie die Datei sockets.js und schreiben Sie dort den Server-Socket-Code:

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

Erstellen Sie eine index.html- Datei und schreiben Sie dort den Code, um eine Socket-Verbindung herzustellen:

     <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> <!--  -->

Erstellen Sie nun die Datei script.js und verbinden Sie sie mit unserer HTML-Datei:

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


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

Also zurück zu unserer Vasya und Petya

Dies ist die erste Phase, in der Vasya und Petya einfach JSON austauschen, ob wir einen Anruf erhalten oder nicht. Das heißt, beim Aufrufen unserer Seite müssen wir eine WebSocket-Verbindung öffnen, um mit unserem Socket-Server zu kommunizieren.

Wir werden zuerst einen Helm an den JSON-Server-Socket senden, damit wir Petya von Vasya aus anrufen können
```
connection.send(JSON.stringify({
//  
}))
```
Wir müssen diesen JSON auf dem Socket-Server akzeptieren. Nachdem wir die Anforderung erhalten haben, hängen wir das Nachrichtenereignis an unseren Server an :
```
connection.on('message',function(message){
//   message    ,     JSON  JS
let self = JSON.parse(message.utf8Data);
})
```

Nachdem wir gesprochen und entschieden haben, dass beide Benutzer für ein Gespräch bereit sind, müssen wir herausfinden, wie die Videokommunikation in einem Browser funktioniert. Ein Modul hierfür ist in js - RTCPeerConnection integriert

Wir müssen RTCPeerConnection öffnen, mit dem wir ein Angebot generieren und an den von uns benötigten Benutzer senden können, und zwar erneut über unseren Socket-Server, der nach Erhalt eine Antwort generiert und zurücksendet. Danach beginnen wir mit dem Austausch von Eispaketen mit Informationen über die Umgebung dieser Computer, der für den erfolgreichen Aufbau der Videokommunikation notwendig ist.

Wir generieren und senden Angebote

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

Wir bearbeiten Angebote und generieren Antworten

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

Wir akzeptieren die Antwort und erstellen einen Videostream

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

Und das Letzte, was wir tun müssen, ist die Verarbeitung der Eispakete

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