I-ProHoster > Π‘Π»ΠΎΠ³ > Ukuphatha > (Cishe) ukusakazwa kwekhamera yewebhu okungenamsebenzi kusuka kusiphequluli. Ingxenye 2. I-WebRTC

(Cishe) ukusakazwa kwekhamera yewebhu okungenamsebenzi kusuka kusiphequluli. Ingxenye 2. I-WebRTC

Ngandlela thize phakathi eyodwa kusukela ezihlokweni ezindala nezivele zilahliwe, ngibhale ukuthi ungasakaza kanjani kalula futhi ngokwemvelo ividiyo kusuka kukhanvasi usebenzisa ama-websockets. Kuleso sihloko, ngikhulume kafushane mayelana nendlela yokuthwebula ividiyo kusuka kukhamera nomsindo ovela kumakrofoni usebenzisa I-MediaStream API, ungabhala kanjani ukusakaza okutholiwe futhi ukuthumele ngama-websockets kuseva. Kodwa-ke, empeleni abakwenzi lokhu, ngokusakaza basebenzisa noma isofthiwe ekhethekile edinga ukufakwa futhi ilungiswe: ngaphandle, lokhu kungase Vula isoftware Broadcast, noma basebenzisa i-WebRTC, esebenza ngaphandle kwebhokisi, okungukuthi, ayidingi ukufakwa kwanoma yimaphi ama-plugin isidlali se-flash, esizosikwa kusiphequluli se-Chromium kakade ngoDisemba.

Namuhla sizokhuluma ngeWebRTC.

I-Web Real-Time Communication (WebRTC) ayiyona iphrothokholi eyodwa, iyiqoqo eliphelele lamazinga, izivumelwano kanye nama-JavaScript APIs ahlinzeka ngokuxhumana komsindo wevidiyo kontanga kuya kontanga ngesikhathi sangempela, futhi angasetshenziswa ukudlulisa noma yikuphi. idatha kanambambili . Ngokuvamile iziphequluli zisebenza njengontanga, kodwa futhi kungaba uhlelo lokusebenza lweselula, isibonelo. Ukuze uhlele ukuxhumana kwe-p2p phakathi kwamaklayenti, ukusekelwa kwesiphequluli sezinhlobo ezahlukene zombhalo wekhodi wevidiyo nomsindo kuyadingeka, ukusekelwa kwezinqubo ezihlukahlukene zenethiwekhi, ukuqinisekisa ukusebenzisana kwehadiwe nesiphequluli (ngezendlalelo ze-OS): amakhamera ewebhu, amakhadi omsindo. Yonke le hodgepodge yobuchwepheshe ifihliwe ngemuva kwe-JavaScript API abstraction ukuze kube lula kunjiniyela.

Konke kubilisa kuma-API amathathu:

  • I-MediaStream API β€” yahlakazwa okokugcina, namuhla ngizobhala okwengeziwe ngaye. Isebenzela ukwamukela ukusakazwa kwevidiyo / okulalelwayo kusuka kuhadiwe

  • RTCPeerConnection - inikeza ukuxhumana phakathi kwamaklayenti amabili (p2p)

  • I-RTCDataChannel - Isebenzela ukudlulisa idatha phakathi kwamaklayenti amabili

Ilungiselela ukusakazwa komsindo nevidiyo ukuze kudluliselwe

Konke kuqala "ngokuthwebula" ikhamera yewebhu kanye nokusakaza kwemidiya yemakrofoni. Impela, ukusakaza okuluhlaza akufanelekile ukuhlela i-teleconference, ukusakaza ngakunye kudinga ukucutshungulwa: ukuthuthukisa ikhwalithi, ukuvumelanisa umsindo nevidiyo, beka izimpawu zokuvumelanisa ekusakazeni kwevidiyo, futhi uqinisekise i-bitrate ehambisana nomkhawulokudonsa oshintsha njalo wesiteshi. . Isiphequluli sinakekela konke lokhu, umthuthukisi akudingeki akhathazeke ngokuhlinzeka ngombhalo wekhodi wokusakazwa kwemidiya. Ngaphakathi kwesiphequluli sesimanje, sekuvele kunezendlalelo zesoftware zokuthwebula, ukuthuthukisa ikhwalithi (susa i-echo nomsindo emsindweni, thuthukisa isithombe), ividiyo kanye nombhalo wekhodi womsindo. Isikimu sesendlalelo siboniswa ku fig. 1:

(Cishe) ukusakazwa kwekhamera yewebhu okungenamsebenzi kusuka kusiphequluli. Ingxenye 2. I-WebRTCIlayisi. 1. Izendlalelo zokucutshungulwa komsindo nevidiyo esipheqululini

Konke ukucubungula kwenzeka ngqo esipheqululini ngokwaso, akukho okwengeziwe. awekho ama-plugin adingekayo. Kodwa-ke, izinto azikakabi kuhle kangako ngo-2020. Kuneziphequluli ezingakasekeli ngokugcwele I-MediaStream API, ungalandela isixhumanisi futhi ubone ithebula lokusebenzisana phansi impela. I-IE ikakhulukazi iyadumaza futhi.

Ungenza izinto ezithakazelisa kakhulu ngemifudlana eyamukelwe: ungahlanganisa, uguqule ukulungiswa kwevidiyo, ulawule ikhwalithi yomsindo, ungathatha futhi "uxhume" ukusakaza kweMedia ukuze maka futhi uzibheke ekhasini le-html. Noma ungadweba umfudlana kukhanvasi, bese usetha i-WebGL noma i-CSS3, futhi usebenzise izihlungi ezihlukahlukene kuvidiyo, uthwebule ividiyo ecutshunguliwe kukhanvasi bese uyithumela ngenethiwekhi kuseva, udlulise ikhodi futhi ushicilele kuwo wonke umuntu (sawubona bigo bukhoma, twitch nabanye). Lapha ngeke ngihlaziye ukuthi izinto ezinjalo zenziwa kanjani, ngizonikeza izibonelo ezimbalwa ezitholakala kuwebhu:

https://jeeliz.com/ - abafana benza i-CV yesikhathi sangempela ku-Javascript. Banakho konke i-arsenal imitapo yolwazi ehlukahlukene ye-js yokusebenza ngokusakaza kwevidiyo kukhanvasi: ukubona ubuso, izinto, ukusebenzisa izihlungi (imaski, njengaku-Instagram), njll. Isibonelo esihle kakhulu sokuthi ungacubungula kanjani ividiyo yesikhathi sangempela ngqo kusiphequluli ngaphandle kwama-plugin engeziwe.

I-Canvas CaptureStream API - Amadokhumenti e-API wokuthwebula ukusakazwa kwevidiyo kusuka kukhanvasi. Sekuvele kusekelwa ku-Chrome, Opera neFirefox

RTCPeerConnection

Ngakho-ke sifike ephuzwini, kepha siyidlulisela kanjani ividiyo komunye umsebenzisi? Iza phambili RTCPeerConnection. Ngamafuphi, cishe lesi sinyathelo udinga ukudala into ye-RTCPeerConnection:

const peerConnection = new RTCPeerConnection({
  iceServers: [{
    urls: 'stun:stun.l.google.com:19302'
  }]
});

Sicacisa ama-iceServer njengenye yezinketho - lena iseva esiza ekuhlinzekeni ukuxhumana phakathi kweziphequluli ezimbili ngemuva kwe-NAT'om. Okungukuthi, inkinga ixazululwa lapha: indlela yokuthola i-ip ye-interlocutor uma engemuva kwe-NAT yomhlinzeki wakhe? Iphrothokholi ye-ICE iyasiza, empeleni, i-ICE ayisebenzi ku-WebRTC nhlobo, kodwa okwengeziwe ngalokho kamuva.

Ngaphambilini, sithole ukusakazwa kwe-Usermedia:

navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then(stream => {
  // Usermedia-ΠΏΠΎΡ‚ΠΎΠΊΠΈ, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ это Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π°ΡƒΠ΄ΠΈΠΎ 
  const tracks = stream.getTracks();

   for (const track of tracks) {
     // ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ‚Ρ€Π΅ΠΊ присоСдиняСм ΠΊ peerConnection
     peerConnection.addTrack(track);
   }
}).catch(console.error);

Okulandelayo, umcimbi odinga ukuxoxisana uvutha ku-peerConnection, kusibambi okufanele sakhe isipho (ngokwe-SDP - Iphrothokholi Yencazelo Yeseshini) futhi sinikeze i-peerConnection ngendlela ye-setLocalDescription. Mayelana ne-SDP - ukuthi iyini futhi mayelana namafomethi okunikezwayo nezimpendulo - sizokhuluma ngokuqhubekayo.

Ngemva kokwabela i-LocalDescription peerConnection, isiphequluli "sihlanganisa" amakhandidethi eqhwa, okungukuthi, sithola izindlela ezihlukahlukene zokuxhumana nge-NAT. Umcimbi we-onicegatheringstatechange uyasha. Kusibambi se-Onicegatheringstatechange, sivumela uxhumo ekusakazweni kweseva ye-webrtc-signaling-kushintshanisa Incazelo Yeseshini phakathi kontanga:

peerConnection.oniceconnectionstatechange = (event) => {
      console.log('Connection state: ', peerConnection.iceConnectionState);

      if (peerConnection.iceConnectionState === 'connected') {
        // МоТСм Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ½ΠΎΠΏΠΊΡƒ Start broadcast
        setBroadcasting(true);
        setBroadcastingBtnActive(true);
      }
    };

// Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ срабатываСт сразу, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ добавился ΠΌΠ΅Π΄Π°ΠΈΠ°ΠΏΠΎΡ‚ΠΎΠΊ Π² peerConnection
peerConnection.onnegotiationneeded = (event) => {
      // Π‘ΠΎΠ·Π΄Π°Π΅ΠΌ ΠΈ Π½Π°Π·Π½Π°Ρ‡Π°Π΅ΠΌ SDP offer
      peerConnection.createOffer().
        then((offer) => peerConnection.setLocalDescription(offer)).
        catch(console.error);
    };

// Π‘ΠΎΠ±Ρ‹Ρ‚ΠΈΠ΅ срабатываСт ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ Ρ€Π°Π·, ΠΊΠ°ΠΊ появляСтся ICE ΠΊΠ°Π½Π΄ΠΈΠ΄Π°Ρ‚
peerConnection.onicegatheringstatechange = (ev) => {
      let connection = ev.target;

      // Now we can activate broadcast button
      if (connection.iceGatheringState === 'complete') {
        let delay = 50;
        let tries = 0;
        let maxTries = 3;

        let timerId = setTimeout(function allowStreaming() {
          if (isOnline) {
            setBroadcastingBtnActive(true);
            return;
          }

          if (tries < maxTries) {
            tries += 1;
            delay *= 2;
            timerId = setTimeout(allowStreaming, delay);
          } else {
            // TODO: show user notification
            console.error("Can't connect to server");

            alert("Can't connect to server");
          }
        }, delay);
      }
    };

Iseva ye-webrtc-signaling iyiseva edingekayo ukushintshanisa incazelo yeseshini phakathi kontanga ababili, ingaba i-websocket elula kakhulu noma iseva ye-xhr kunoma iyiphi i-PL. Umsebenzi wayo ulula: ukwamukela incazelo yeseshini kusuka kontanga eyodwa bese uyidlulisela komunye.

Ngemuva kokushintshaniswa kwezincazelo zeSeshini, izinhlangothi zombili zilungele ukusakaza nokwamukela ukusakazwa kwevidiyo, ohlangothini oluthola ukusakazwa kwevidiyo, umcimbi we-ontrack uculwa ku-peerConnection, kusiphathi lapho, amathrekhi atholiwe angabelwa futhi ubheke interlocutor oyikhonzile. Ithiyori eyengeziwe nemininingwane.

Izixhumanisi nemibhalo:

https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection - imibhalo RTCPeerConnection

https://github.com/pion/webrtc - ukuqaliswa kwezivumelwano ze-WebRTC usohambeni

https://webrtcforthecurious.com/ - incwadi evela kubadali be-pion

https://hpbn.co/ - Book High Performance Browser Networking. Izinkinga zokuqinisekisa ukusebenza okuphezulu kwezinhlelo zokusebenza zewebhu kuxoxwa ngazo ngokuningiliziwe. Ekugcineni, i-WebRTC iyachazwa. Impela le ncwadi indala (2013), kodwa ayilahlekelwa ukuhambisana kwayo.

Engxenyeni elandelayo, ngifuna ukunikeza ingxenye encane yethiyori kanye nokusebenza ukuhlaziya ukwamukela nokucubungula ukusakazwa kwevidiyo kuseva kusetshenziswa i-pion, i-transcoding ku-HLS nge-ffmpeg ukuze isakazwe kubabukeli esipheqululini.

Kwabangenasineke: i-prototype yami engcolile kakhulu yokusakaza ividiyo esuka kukhamera yewebhu ukuze isabele ngeseva esekwe ku-pion ngokushintshashintsha (lokhu ukuhlola nje).

Source: www.habr.com

Engeza amazwana