📼 🛀🏾 📛 WebRTC Membuat aplikasi dengan blackjack dan panggilan video 🖕🏽 👩🏿‍💼 🌀

Pembaca yang budiman, sebelum kita mulai menulis kode, mari kita lihat konsep panggilan video.

Bayangkan situasinya: kita memiliki platform obrolan dan kita perlu mempercepat panggilan video ke sana, yaitu, Vasya tertentu sedang duduk online dan dia ingin memanggil Petya, untuk mengimplementasikan fitur seperti itu, kita membutuhkan teknologi WebSocket .

Baiklah, mari kita tingkatkan server WebSocket kami, node.js akan membantu kami dengan ini;
Buat file sockets.js dan tulis kode soket server di sana:

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

Buat file index.html dan tulis kode di sana untuk membuka koneksi socket:

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

Sekarang buat dan hubungkan file script.js ke file html kami:

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


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

Jadi, kembali ke Vasya dan Petya kami

Ini adalah tahap awal di mana Vasya dan Petya hanya bertukar JSON tentang apakah kita akan menerima panggilan atau tidak. Artinya, ketika memasuki halaman kita, kita harus membuka koneksi WebSocket untuk berkomunikasi dengan server soket kita.

Kami pertama-tama mengirim helm ke soket server JSON sehingga kami ingin memanggil Petya dari akun Vasya
```
connection.send(JSON.stringify({
//  
}))
```

Kami harus menerima JSON ini di server soket, setelah kami menerima permintaan, kami melampirkan acara pesan ke server kami :

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

Setelah berbicara dan memutuskan bahwa kedua pengguna siap untuk percakapan, kita perlu mencari tahu bagaimana komunikasi video bekerja di browser, modul untuk ini dibangun di js - RTCPeerConnection

Kita perlu membuka RTCPeerConnection, yang dengannya kita dapat menghasilkan penawaran dan mengirimkannya ke pengguna yang kita butuhkan, lagi melalui server soket kami, yang, setelah menerimanya, akan menghasilkan respons dan mengirimkannya kembali, setelah itu kami mulai bertukar paket es yang berisi informasi tentang lingkungan komputer ini, yang diperlukan untuk keberhasilan pembentukan komunikasi video.

Kami menghasilkan dan mengirim penawaran

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

Kami memproses penawaran dan menghasilkan jawaban

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

Kami menerima jawabannya dan membuat aliran video

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

Dan hal terakhir yang perlu kita lakukan adalah mengolah paket es

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