(Kważi) webcam inutli streaming minn browser. Parti 2. WebRTC

B'xi mod fi wieħed Minn artikoli qodma u diġà abbandunati, ktibt dwar kif faċilment u b'mod naturali tista 'tixxandar vidjo minn tila permezz ta' websockets. Dak l-artikolu tkellem fil-qosor dwar kif jaqbad vidjo minn kamera u ħoss minn mikrofonu bl-użu MediaStream API, kif tikkodifika l-fluss li jirriżulta u tibgħatha permezz ta 'websockets lis-server. Madankollu, fir-realtà ma jagħmlux dan għal xandiriet jew jużaw softwer speċjali li jeħtieġ li jiġi installat u kkonfigurat: minn fuq ta 'rasi jista' jkun Softwer tax-Xandir Miftuħ, jew jużaw WebRTC, li jaħdem dritt barra mill-kaxxa, jiġifieri, ma jeħtieġx l-installazzjoni ta 'xi plugins ala flash player, li se jinqata' mill-browser Chromium f'Diċembru.

Illum ser nitkellmu dwar WebRTC.

Komunikazzjoni Web Real-Time (WebRTC) mhix protokoll wieħed biss, hija ġabra sħiħa ta 'standards, protokolli u JavaScript APIs li flimkien jipprovdu komunikazzjonijiet awdjo u vidjo peer-to-peer f'ħin reali, u jistgħu jintużaw ukoll biex jittrasferixxu kwalunkwe data binarja . Tipikament, il-pari huma browsers, iżda tista 'wkoll tkun applikazzjoni mobbli, pereżempju. Sabiex torganizza l-komunikazzjoni p2p bejn il-klijenti, il-browser jeħtieġ appoġġ għal diversi tipi ta 'kodifikazzjoni tal-vidjo u awdjo, appoġġ għal ħafna protokolli tan-netwerk, u jiżgura l-interazzjoni tal-ħardwer mal-browser (permezz ta' saffi tal-OS): webcams, sound cards. Dan il-ħoġol kollu ta 'teknoloġiji huwa moħbi wara l-astrazzjoni tal-API JavaScript għall-konvenjenza tal-iżviluppatur.

Kollox niżel għal tliet APIs:

• MediaStream API — irranġajna l-aħħar darba, illum nikteb ftit aktar dwarha. Użat biex tirċievi flussi tal-vidjo/awdjo mill-ħardwer

• RTCPeerConnection — jipprovdi komunikazzjonijiet bejn żewġ klijenti (p2p)

• RTCDataChannel — użata biex tittrasferixxi data arbitrarja bejn żewġ klijenti

Tħejjija ta' flussi ta' awdjo u vidjo għat-trasmissjoni

Kollox jibda bil-“qbid” tal-flussi tal-midja mill-webcam u l-mikrofonu. Il-flussi mhux ipproċessati, ovvjament, mhumiex adattati għall-organizzazzjoni ta 'telekonferenza kull fluss għandu jiġi pproċessat: ittejjeb il-kwalità, issinkronizza l-awdjo mal-vidjo, poġġi marki ta' sinkronizzazzjoni fil-fluss tal-vidjo, u tiżgura bitrate li tikkorrispondi mal-bandwidth tal-kanal li dejjem qed jinbidel; . Il-browser jieħu ħsieb ta 'dan kollu l-iżviluppatur lanqas biss għalfejn tinkwieta dwar il-kodifikazzjoni tal-flussi tal-midja. Ġewwa browser modern diġà hemm saffi tas-softwer għall-qbid, titjib tal-kwalità (neħħi l-eku u l-istorbju mill-ħoss, ittejjeb l-istampa), kodifikazzjoni tal-vidjo u tal-awdjo. Id-dijagramma tas-saff hija murija fil-Fig. 1:

Ross. 1. Saffi ta 'proċessar awdjo u vidjo fil-browser

L-ipproċessar kollu jseħħ direttament fil-browser innifsu, l-ebda ekstras. ebda plugins meħtieġa. Madankollu, l-affarijiet għadhom mhux daqshekk wardru għall-2020. Għad hemm browsers li għadhom ma jappoġġjawx bis-sħiħ MediaStream API, tista 'ssegwi l-link u tħares lejn it-tabella ta' kompatibilità fil-qiegħ nett. IE b'mod partikolari hija għal darb'oħra diżappuntanti.

Tista 'tagħmel affarijiet interessanti ħafna bil-flussi li jirriżultaw: tista' tikklona, ​​tibdel ir-riżoluzzjoni tal-vidjo, timmanipula l-kwalità tal-awdjo, tista 'tieħu u "tehmeż" stream Media Stream ma' tikketta u ħares lejn il-maħbub tiegħek fuq il-paġna html. Jew tista 'tiġbed il-fluss fuq il-kanvas, tapplika WebGL jew CSS3, u tapplika diversi filtri għall-vidjo, taqbad il-vidjo pproċessat mill-kanvas u mbagħad ibgħatha fuq in-netwerk lis-server, tittraskodifika u tippubblikaha lil kulħadd (hello bigo live, twitch u oħrajn). Hawnhekk mhux se tanalizza kif isiru affarijiet bħal dawn, se nagħti ftit eżempji misjuba fuq l-Internet:

https://jeeliz.com/ — il-ġuvini qed jagħmlu CV f'ħin reali fil-Javascript. Għandhom sħiħ armament diversi libreriji js biex jaħdmu bi stream tal-vidjo fuq tila: skoperta uċuħ, oġġetti, applikazzjoni ta 'filtri (maskri, bħal f'Instagram), eċċ Eżempju eċċellenti ta' kif, mingħajr plugins addizzjonali, tista 'tipproċessa vidjo f'ħin reali direttament fil-browser .

Kanvas captureStream API — Dokumentazzjoni tal-API għall-qbid ta' streams tal-vidjo mill-kanvas. Diġà appoġġjat fi Chrome, Opera u Firefox

RTCPeerConnection

Issa wasalna għall-mistoqsija: kif fil-fatt tittrasferixxi l-vidjo lil utent ieħor? Jiġi fuq quddiem RTCPeerConnection. Fil-qosor, prattikament f'dan il-pass trid toħloq oġġett RTCPeerConnection:

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

Waħda mill-għażliet hija iceServers - dan huwa server li jgħin biex jipprovdi konnessjoni bejn żewġ browsers li jinsabu wara NAT. Jiġifieri, il-problema tissolva hawn: kif issir taf l-IP tal-interlokutur jekk ikun wara n-NAT tal-fornitur tiegħu? Il-protokoll ICE jiġi għas-salvataġġ fil-fatt, l-ICE mhu relatat ma 'WebRTC xejn, iżda aktar dwar dan aktar tard.

Preċedentement irċevejna streams tal-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);

Sussegwentement, l-avveniment onnegotiationneeded jiġi attivat fuq il-peerConnection, li fil-handler tiegħu għandna noħolqu offerta (f'termini ta 'SDP - Session Description Protocol) u nassenjawha lill-peerConnection permezz tal-metodu setLocalDescription. Nitkellmu dwar SDP - x'inhu u dwar il-formati ta 'offerta u tweġiba - aktar tard.

Wara li jassenja LocalDescription peerConnection, il-browser "jiġbor" kandidati tas-silġ, jiġifieri jsib mogħdijiet differenti għall-komunikazzjoni permezz tan-NAT. L-avveniment onicegatheringstatechange jiġi sparat. Fl-onicegatheringstatechange handler, inħallu konnessjoni mal-fluss webrtc-signaling-server biex tiskambja Deskrizzjoni tas-Sessjoni bejn sħabhom:

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

webrtc-signaling-server huwa server meħtieġ biex jiżgura l-iskambju tad-deskrizzjoni tas-sessjoni bejn żewġ peers jista 'jkun sempliċi websocket jew xhr server fuq kwalunkwe lingwa. Il-kompitu tiegħu huwa sempliċi: aċċetta d-deskrizzjoni tas-sessjoni minn peer u għaddiha lil ieħor.

Wara l-iskambju tad-deskrizzjonijiet tas-Sessjoni, iż-żewġ naħat huma lesti li jxandru u jirċievu flussi tal-vidjow Fuq in-naħa li tirċievi l-fluss tal-vidjo, l-avveniment ontrack jiġi attivat fuq peerConnection, li fil-handler tiegħu jistgħu jiġu assenjati l-binarji riċevuti. u ħares lejn l-interlokutur favorit tiegħek. Aktar teorija u dettalji.

Links u letteratura:

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

https://github.com/pion/webrtc — implimentazzjoni ta' protokolli WebRTC għaddejjin

https://webrtcforthecurious.com/ — ktieb mill-ħallieqa tal-pion

https://hpbn.co/ — ktieb High Performance Browser Networking. Il-kwistjonijiet li jiżguraw prestazzjoni għolja tal-applikazzjonijiet tal-web huma diskussi fid-dettall. Fl-aħħar, WebRTC huwa deskritt. Il-ktieb huwa ċertament antik (2013), iżda ma jitlifx ir-rilevanza tiegħu.

Fil-parti li jmiss irrid nagħti ftit aktar teorija u fil-prattika tanalizza r-riċeviment u l-ipproċessar ta 'stream video fuq is-server bl-użu ta' pion, transcoding għal HLS permezz ta 'ffmpeg għal xandira sussegwenti lit-telespettaturi fil-browser.

Għall-paċenzja: il-prototip mhux raffinat tiegħi ta' xandir ta' vidjow minn webcam biex jirreaġixxi permezz ta' server ibbażat fuq pion fi twitch (dan huwa biss esperiment).

Sors: www.habr.com