Instalarea WebRTC. Cum se organizează difuzarea online WebRTC utilizând Webcam și serverul VPS. Conectarea unui utilizator nou

WebRTC (comunicații în timp real) este un standard care descrie transmiterea datelor audio streaming, a datelor video și a conținutului din browser și a browserului în timp real fără a instala plug-in-uri sau alte extensii. Standardul vă permite să transformați browserul în terminalul terminal al videoconferințelor, să deschideți pagina web pentru a începe comunicarea.

Ce este webrtc?

În acest articol, vom lua în considerare tot ce trebuie să știți despre tehnologia WebRTC pentru un utilizator obișnuit. Luați în considerare avantajele și dezavantajele proiectului, dezvăluiți unele secrete, vă vom spune cum funcționează, unde și ce este aplicat WebRTC.

Ce trebuie să știți despre WebRTC?

Evoluția standardelor și tehnologiilor Communicatii video

Sergey Yutzaytis, Cisco, Video + Conferința 2016

Cum funcționează WebRTC.

Pe partea clientului

  • Utilizatorul deschide o pagină care conține etichetă HTML5
  • Browserul solicită accesul la un webcam și un microfon utilizator.
  • Codul JavaScript de pe pagina de utilizator controlează parametrii conexiunii (adresele IP și serverul WebRTC sau alți clienți WebRTC) pentru a ocoli NAT și firewall.
  • Când primiți informații despre interlocutor sau un flux cu conferința, browserul începe să se potrivească cu codecurile audio și video utilizate.
  • Procesul de codificare și transmitere a datelor de streaming între clienții WebRTC (în cazul nostru, între browser și server) începe.

Pe partea laterală a serverului WebRTC

Pentru schimbul de date între cei doi participanți, serverul video nu este necesar, dar dacă trebuie să combinați mai mulți participanți la o conferință, serverul este necesar.



Serverul video va primi traficul media din diverse surse, îl va converti și îl trimite utilizatorilor care utilizează WebRTC ca terminal.

De asemenea, Serverul WebRTC va primi traficul media de la WebRTC Peters și va transfera la participanții la conferințe care utilizează aplicații pentru computere desktop sau dispozitive mobile, dacă există.

Avantajele standardului

  • Nu este necesară instalarea.
  • Comunicare foarte de înaltă calitate din cauza:
    • Utilizarea codecurilor video (VP8, H.264) și audio (OPUS).
    • Ajustarea automată a calității fluxului sub starea conexiunii.
    • ECHO încorporat și sistem de reducere a zgomotului.
    • Ajustarea automată a sensibilității microfoanelor participanților (ARU).
  • Securitate înaltă: Toate conexiunile sunt protejate și criptate în conformitate cu protocoalele TLS și SRTP.
  • Există un mecanism de captare a conținutului încorporat, cum ar fi desktopul.
  • Abilitatea de a implementa orice interfață de management HTML5 și JavaScript.
  • Abilitatea de a integra o interfață cu orice sisteme de back-end utilizând WebSockets.
  • Un proiect open source - poate fi implementat în produsul sau serviciul dvs.
  • Real Cross-Platform: aceeași aplicație WebRTC va funcționa la fel de bine pe orice sistem de operare, desktop sau mobil, cu condiția ca browserul să accepte webrtc. Acest lucru economisește semnificativ resurse pentru dezvoltarea software-ului.

Dezavantaje ale standardului

  • Pentru organizarea conferințelor audio și video de grup, este necesar serverul VKS, care ar amesteca videoclipul și sunetul de la participanți, deoarece Browserul nu știe cum să sincronizeze câteva fluxuri de intrare între ele.
  • Toate soluțiile WebRTC sunt incompatibile, deoarece Standardul descrie doar metode de transmisie video și de sunet, lăsând implementarea metodelor de abordare a abonaților, urmărirea disponibilității, mesageriei și a fișierelor, planificarea și alți furnizori.
  • Cu alte cuvinte, nu veți putea apela de la aplicația WebRTC a unui dezvoltator în aplicația WebRTC a unui alt dezvoltator.
  • Amestecarea conferințelor de grup necesită resurse mari de calcul, astfel încât acest tip de apel video necesită achiziționarea unui abonament plătit sau investiții în infrastructura sa, unde este necesar un nucleu fizic al procesorului modern pentru fiecare conferință.

Secretele WebRTC: Cum furnizorii beneficiază de tehnologia web descoperită


Tsakhi LeVi, Bloggeek.me, Video + Conferința 2015

Webrtc pentru piața VKS

Creșterea numărului de terminale VKS

Tehnologia WebRTC a avut un impact puternic asupra dezvoltării pieței VKS. După părăsirea primelor browsere cu suportul WebRTC în 2013, numărul potențial de terminale de conferințe video din întreaga lume a crescut imediat cu 1 miliard de dispozitive. În esență, fiecare browser a devenit un terminal CSM, nu inferior analogilor sa hardware din punctul de vedere al licitării.

Utilizați în soluții specializate

Utilizarea diferitelor biblioteci JavaScript și WebRTC Cloud Service API vă permite să adăugați cu ușurință suport de legătură video la orice proiecte web. Anterior, să transmită date în timpul dezvoltatorilor în timp real, era necesar să se studieze principiile protocoalelor și să utilizeze evoluțiile altor companii care au cerut cel mai adesea licențierea suplimentară, ceea ce a crescut costurile. Deja, WebRTC este utilizat în mod activ în "Site-ul de apel", "Suport pentru chat online" etc.

Ex-utilizatorii Skype pentru Linux

În 2014, Microsoft a anunțat încetarea suportului de proiect Skype pentru Linux, care a provocat o mare iritare din partea specialiștilor IT. Tehnologia WebRTC nu este legată de sistemul de operare și implementată la nivelul browserului, adică Utilizatorii Linux vor putea vedea produsele și serviciile bazate pe înlocuirea Skype Fulld WebRTC.

Competiția cu bliț.

WebRTC și HTML5 au devenit o lovitură fatală pentru tehnologia Flash, care și atât de îngrijorată de departe de cei mai buni ani. Din 2017, browserele de frunte au încetat oficial pentru a sprijini Flash și Tehnologia au dispărut în cele din urmă de pe piață. Dar trebuie să oferiți flash datorită, după tot ce a fost cel care a creat piața conferinței web și a propus oportunități tehnice pentru comunicațiile live în browsere.

Prezentare video WebRTC.

Dmitry Odintsov, TrueConf, Video + Conference Octombrie 2017

Codecs în WebRTC.

Codecuri audio

Pentru a comprima traficul audio în codecurile WebRTC, Opus și G.711 sunt utilizate.

G.711. - Cel mai vechi codec vocal cu o rată mare de biți (64 kbps), care este cel mai adesea folosit în sistemele de telefonie tradițională. Principalul avantaj este sarcina computațională minimă datorită utilizării algoritmilor de compresie a luminii. Codecul este caracterizat printr-un nivel scăzut de compresie a semnalului vocal și nu face o întârziere audio suplimentară în timpul comunicării dintre utilizatori.

G.711 este susținută de un număr mare de dispozitive. Sistemele în care acest CODEC este utilizat este mai ușor de utilizat decât cele bazate pe alte coduri audio (G.723, G.726, G.728 etc.). În ceea ce privește calitatea G.711, sa estimat 4.2 în testul MOS (o estimare în intervalul 4-5 este cea mai mare și înseamnă o calitate bună, similară cu calitatea transmisiei de trafic vocal în ISDN și chiar mai mare).

Opus. - Acesta este un codec cu o întârziere scăzută de codificare (2,5 ms la 60 ms), suport pentru un biți variabil și un nivel ridicat de compresie, care este ideal pentru transmiterea unui semnal audio streaming în rețele cu lățime de bandă variabilă. Opus este o soluție hibridă care combină cele mai bune caracteristici ale codecilor de mătase (comprimarea vocii, rezolvarea distorsiunii de vorbire umană) și CELT (codificarea datelor audio). Codecul este în acces liber, dezvoltatorii care îl folosesc, nu trebuie să plătească deducerile pentru deținătorii de drepturi de autor. În comparație cu alte coduri audio, Opus, fără îndoială câștigă în mulți indicatori. El a eclipsat codecuri destul de populare cu un bitrate scăzut, cum ar fi MP3, Vorbis, AAC LC. Opus restaurează cel mai aproape de "imaginea" originală a sunetului decât AMR-WB și Speex. În spatele acestui CODEC - viitorul, motiv pentru care tehnologiile WebRTC l-au inclus într-o gamă obligatorie de audiostandați susținuți.

Codec video.

Selecția unui codec video pentru WebRTC a durat câțiva ani de la dezvoltatori, ca rezultat, am decis să folosim H.264 și VP8. Aproape toate browserele moderne suportă ambele codecuri. Servere de conferințe video pentru lucrul cu WebRTC suport suficient doar unul.

VP8. - Video gratuit codificat cu o licență deschisă se distinge printr-o viteză mare de decodificare a fluxului video și o rezistență sporită la pierderea cadrelor. Codecul este universal, este ușor de introdus în platforme hardware, deci foarte des dezvoltatorii sistemelor de videoconferință îl utilizează în produsele lor.

CODEC VIDEO CODECUT H.264. El a devenit cunoscut mult mai devreme decât colegul său. Acesta este un codec cu un grad ridicat de compresie a fluxului video, menținând în același timp video de înaltă calitate. Prevalența ridicată a acestui CODEC printre sistemele hardware de conferințe video implică utilizarea sa în standardul WebRTC.

Google și Mozilla promovează în mod activ codecul VP8 și Microsoft, Apple și Cisco - H.264 (pentru a asigura compatibilitatea cu sistemele tradiționale de conferințe video). Și aici este o problemă foarte mare pentru dezvoltatorii de soluții Cloud WebRTC, deoarece, în cadrul conferinței, toți participanții folosesc un browser, conferința este suficientă pentru a se amesteca o dată cu un codec și dacă există browsere diferite și există Safari / Edge Browsere, apoi conferința va trebui să fie codificată de două ori diferite, ceea ce va dubla cerințele sistemului pentru serverul media și, ca rezultat, costul abonamentelor către serviciile WebRTC.

Webrtc api.

Tehnologia WebRTC se bazează pe trei API-uri principale:

  • (Responsabil pentru acceptarea unui semnal audio și video de browser web de la aparatul de fotografiat sau de pe desktopul utilizatorului).
  • RTCPEERCONNECTY. (Responsabil pentru legătura dintre browsere pentru "schimbul" primite de la aparatul foto, microfon și desktop, mediadanții. De asemenea, în "Drepturile" acestui API intră în procesul de procesare a semnalului (curățându-l din afară, reglarea volumului microfonului) și controlul codurile audio și video utilizate).
  • Canalul RTCDATA. (Oferă transmisia de date bilaterală prin conexiunea stabilită).

Înainte de a accesa microfonul și camera de utilizator, browserul solicită permisiunea. În Google Chrome, vă puteți regla în avans în secțiunea "Setări", în Opera și Firefox, selectarea dispozitivelor este efectuată direct în momentul accesului, din lista derulantă. Cererea de rezoluție va apărea întotdeauna la utilizarea protocolului HTTP și o dată dacă utilizați HTTPS:


RTCPEERCONNECTY.. Fiecare browser care participă la conferința WebRTC trebuie să aibă acces la acest obiect. Datorită utilizării RTCPEERCONNECTY, mediadentul dintr-un browser poate fi utilizat chiar și prin ecrane NAT și de rețea. Pentru a transfera cu succes porțiunile media, participanții ar trebui să schimbe următoarele date utilizând transportul, cum ar fi prizele web:

  • participantul inițiator trimite cel de-al doilea participant la ofertă-SDP (structura datelor, cu caracteristicile fluxului media, pe care le va transmite);
  • cel de-al doilea participant formează "răspunsul" - răspuns-SDP și îl transmite inițiatorului;
  • apoi, schimbul de candidați la gheață este organizat între participanți, dacă este cazul (dacă participanții sunt în spatele ecranelor NAT sau de rețea).

După finalizarea cu succes a acestui schimb între participanți, transferul performanțelor media (audio și video) este organizat direct.

Canalul RTCDATA.. Suportul protocolului canalelor de date a apărut în browsere relativ recent, prin urmare, acest API poate fi vizualizat exclusiv în cazurile de utilizare a browserelor WebRTC în Mozilla Firefox 22+ și Google Chrome 26+. Cu aceasta, participanții pot partaja mesaje text în browser.

Conexiune de către webrtc.

Browserele desktop acceptate

  • Google Chrome (17+) și toate browserele bazate pe motorul de crom;
  • Mozilla Firefox (18+);
  • Opera (12+);
  • Safari (11+);

Browsere mobile acceptate pentru Android

  • Google Chrome (28+);
  • Mozilla Firefox (24+);
  • Opera mobilă (12+);
  • Safari (11+).

Webrtc, Microsoft și Internet Explorer

Pentru o lungă perioadă de timp Microsoft a păstrat tăcerea cu privire la suportul WebRTC în Internet Explorer și în noul său browser Edge. Băieții de la Redmond nu doresc cu adevărat să dea tehnologiilor utilizatorilor că nu controlează, aceasta este o astfel de politică. Dar, treptat, cazul a fost mutat din punctul mort, pentru că WebRTC a mai fost imposibil de ignorat, iar proiectul ORTC derivat din standardul WebRTC a fost anunțat.

Potrivit dezvoltatorilor, ORTC este o extensie a standardului webRTC cu un set îmbunătățit de API și HTML5 bazat pe JavaScript, care tradus într-o limbă normală înseamnă că totul va fi același, doar pentru a controla standardul, iar dezvoltarea sa va fi Microsoft , și nu Google. Setul de codecuri este extins de suportul pentru H.264 și unele coduri audio ale seriei G.7xx utilizate în sistemele de telefonie și hardware VKS. Poate apărea suport încorporat pentru PDR (pentru transmiterea conținutului) și mesageria. Apropo, utilizatorii de Internet Explorer nu sunt norocoși, suportul ORTC va fi doar la margine. Ei bine, în mod natural, un astfel de set de protocoale și codecuri cu sânge scăzut este introdus cu Skype for Business, care deschide și mai multe aplicații de afaceri pentru WebRTC.

Scopul acestui articol se află pe un eșantion demonstrativ al chat-ului de peer video (chat video P2P) pentru a se familiariza cu structura și principiul muncii. În acest scop, folosim eșantionul de demonstrație multi-utilizator al chat-ului video WebRtc.io-Demo. Acesta poate fi descărcat prin referință: https://github.com/webrtc/webrtc.io-demo/tree/master/site.

Trebuie remarcat faptul că GitHub este un site web sau un serviciu web pentru dezvoltarea comună a proiectelor web. Dezvoltatorii IT pot plasa coduri ale evoluțiilor lor, să le discute și să comunice între ele. În plus, unele companii IT importante își plasează depozitele oficiale pe acest site. Serviciul este gratuit pentru proiecte open source. GitHub este un depozit al bibliotecilor de biblioteci, codul sursă gratuit.

Deci, descărcat de la GitHub o probă demonstrație a unui chat video peer, pentru a posta pe disc cu un computer personal în directorul creat pentru aplicația noastră "webrtc_demo".


Smochin. unu

După cum rezultă din structură (figura 1), chat-ul de la egal la egal este alcătuit din script-uri client script.js și server.js implementate în limba de programare JavaScript. Script (bibliotecă) webrtc.io.js (client) - oferă comunicații în timp real între browserele de peer-numite: "client client" și webrtc.i.js (client) și webrtc.i.js (server), Utilizând protocolul WebSocket, furnizați o conexiune duplex între browser și serverul de web arhitectură client-server.

Scriptul webrtc.io.js (server) intră în biblioteca webrtc.io și este localizat în directorul NODE_MODALES \\ webrtc.io \\ lib. Interfața chatului video index.html este implementată pe HTML5 și CSS3. Conținutul fișierelor de aplicație WebRTC_Demo poate fi vizualizat unul dintre editorii HTML, cum ar fi "Notepad ++".

Principiul chat-ului video va fi verificat în sistemul de fișiere PC. Pentru a porni serverul (server.js) pe PC, trebuie să setați runtime nod.js. NODE.JS vă permite să rulați JavaScript în afara browserului. Puteți descărca NODE.JS prin referință: http://nodejs.org/ (versiunea V0.10.13 la 07/15/13). Pe pagina principală a site-ului NODE.ORG, faceți clic pe butonul de descărcare și accesați la http://nodejs.org/download/. Pentru utilizatorii Windows, mai întâi descărcați Win.Installer (.msi), apoi executați Win.Installer (.msi) pe PC și instalați NoDejs și "NPM Pachet Manager" în directorul fișierelor program.




Smochin. 2.

Astfel, NODE.JS constă într-un mediu de dezvoltare și execuție a codului JavaScript, precum și dintr-un set de module interne care pot fi instalate utilizând un manager sau un manager de pachete NPM.

Pentru a instala modulele, este necesar să executați comanda de pe linia de comandă din directorul de aplicații (de exemplu, "webrtc_demo): npm instalați name_modul. În timpul procesului de instalare, modulele Manager NPM creează folderul NODE_MODALES în directorul din care a fost efectuată instalația. În procesul de funcționare, Nodejs conectează automat modulele din directorul Node_module.

Deci, după instalarea NODE.JS, deschidem linia de comandă și actualizăm modulul Express în directorul dosarului NODE_MODALES WEBRTC_DEMO utilizând managerul pachetului NPM:

C: \\ WEBRTC_DEMO\u003e NPM Install Express

Modulul Express este un cadru web pentru NODE.JS sau o platformă web pentru dezvoltarea de aplicații. Pentru a avea acces global la Express, îl puteți seta în acest fel: nPM Install -G Express.

Apoi voi actualiza modulul webrtc.io:

C: \\ WEBRTC_DEMO\u003e NPM Instalați webrtc.io

Apoi, în promptul de comandă, lansați serverul: server.js:

C: \\ webrtc_demo\u003e nod server.js


Smochin. 3.

Toate, serverul funcționează cu succes (Figura 3). Acum, folosind un browser web, puteți contacta serverul de pe adresa IP și puteți descărca pagina Web index.html cu care browserul web va prelua codul scriptului client - script.js și codul webrtc.io. JS Script cod și le efectuați. Pentru funcționarea chat-ului de peer video (pentru a instala o conexiune între două browsere), este necesar din două browsere care acceptă WebRTC, contactați adresa IP la serverul de semnal care rulează pe NODE.JS.

Ca rezultat, interfața părții clientului a aplicației de comunicare (video chat) se deschide cu o solicitare de rezolvare a accesului la cameră și a microfonului (figura 4).



Smochin. patru.

După ce faceți clic pe butonul "Permiteți", sunt conectate camera și microfonul pentru comunicații multimedia. În plus, prin interfața de chat video poate fi comunicată cu date text (figura 5).



Smochin. cinci

Trebuie remarcat faptul că. Serverul este alarmă și este proiectat în principal pentru a seta conexiunea între browserele utilizatorului. Pentru scriptul server server.js, furnizând alarme WebRTC, utilizează node.js.

Preambul. P2P Video Chat. pe bază Webrtc. - Aceasta este o alternativă la Skype și alte mijloace de comunicare. Elementele de bază ale chat-ului video P2P bazate pe WebRTC este browser. și serverul de contact. P2P Video - Acestea sunt clipuri video în care serverul nu participă la transferul fluxurilor de informații. Informațiile sunt transmise direct între browserele de utilizator (Pirongs) fără programe suplimentare. În plus față de browserele din probele video P2P, sunt utilizate servere de contact, care sunt concepute pentru a înregistra utilizatorii, stocând date despre acestea și asigurarea comutării între utilizatori. Browserele care acceptă cele mai recente tehnologii WebRTC și HTML5 oferă transmiterea mesajelor și a fișierelor text instantanee, precum și comunicarea vocală și video în rețelele IP.

Deci, camere de chat, chat-uri web, chat-uri vocale și video în interfața web, IMS, VoIP sunt servicii care oferă comunicare online prin intermediul rețelelor compozite cu comutare în lot. De regulă, serviciile de comunicații necesită sau instalează aplicații client către dispozitivele utilizator (PC-uri, smartphone-uri etc.) sau instalarea plug-in-ului și extensiile în browsere. Serviciile au propriile rețele de comunicații, dintre care majoritatea sunt construite pe arhitectura client-server.

Serviciile de comunicații sunt aplicații, cu excepția IMS, în care canalele de voce, video, date și text nu sunt integrate. În rețelele fiecărui serviciu se aplică. Trebuie remarcat faptul că aceste aplicații nu pot lucra simultan în mai multe rețele de comunicații, adică Aplicațiile, de regulă, nu pot interacționa între ele, ca urmare a unei aplicații separate pentru fiecare rețea de comunicații.

Problema integrării serviciilor de comunicare în timp real (chat, telefonie, videoconferință), adică Integrarea canalelor de transmisie vocală, a videoclipurilor, a datelor și a accesului la acestea utilizând o aplicație (browser) pot fi rezolvate în peer-to-peer sau p2P VideoSphaty. (Pioni, punct-to-punct) bazat pe protocolul WebRTC.. De fapt, browserul care acceptă WebRTC devine o singură interfață pentru toate dispozitivele utilizator (PC, smartphone-uri, iPad, telefoane IP, telefoane mobile etc.) care lucrează cu serviciile de comunicații.

Acesta este WebRTC care oferă implementări în browserul tuturor tehnologiilor care oferă o comunicare în timp real. Esența chat-urilor video P2P este că datele multimedia și de text sunt transmise direct între browserele de utilizator (de la distanță) fără participarea serverului și programele suplimentare. Astfel, browserele nu numai că oferă acces la aproape toate resursele de informații pe Internet care sunt stocate pe servere, dar devin, de asemenea, un mijloc de acces la toate serviciile de comunicare în timp real și la serviciile poștale (mesagerie vocală, e-mail, SMS etc.)

Serverele (servere de contact) Probele video P2P sunt destinate numai înregistrării utilizatorilor, stocarea datelor de utilizator și setarea unei conexiuni între browserele utilizatorului. Primele videoclipuri P2P au fost implementate utilizând tehnologii Flash. Flash P2P Video se aplică, de exemplu, pe rețelele sociale. Flash P2P Videoclipurile nu oferă transmisie de date multimedia de înaltă calitate. În plus, pentru a scoate fluxul de voce și video de la microfon și camera video în telefoanele video P2P Flash, este necesară plug-in-ul flash la browserul web.

Dar serviciile de telecomunicații ale noii generații includ web Communications.care sunt utilizate pentru a comunica numai pe Internet browsere și servere de contactDe sprijin protocoalele WebRTC. și specificații HTML5.. Orice dispozitiv de utilizator (PC, iPad, smartphone-uri etc.), echipat cu un astfel de browser, poate oferi apeluri vocale și video de înaltă calitate, precum și transmiterea mesajelor și fișierelor text instantanee.

Deci, noua tehnologie a comunicațiilor web (chat-uri P2P, chat-uri video) este protocolul WebTC. WebRTC împreună cu HTML5, CSS3 și JavaScript vă permit să creați diferite aplicații web. Webrt este conceput pentru a organiza comunicații web (rețele de peerging) în timp real de arhitectura peer-to-peer. Camerele de chat bazate pe P2P oferă transfer de fișiere, precum și utilizatori de comunicații text, voce și video prin intermediul internetului utilizând numai browsere web fără utilizarea adăugărilor externe și a plug-in-ului în browser.

În chat-urile P2P, serverul este utilizat numai pentru instalarea conexiunilor P2P între două browsere. Pentru a crea chat-ul P2P de la P2P de pe SET3 și JavaScript, CSS3 și JavaScript Protocol. Aplicația client interacționează cu browserele prin API-ul WebRTC.

WebRTC sunt implementate de trei API JavaScript:

  • Rtcpeerconnection;
  • MediaSTream (getusermedia);
  • RTCDatachannel.

Browserele transmit date multimedia pe protocolul SRTP care rulează peste UDP. Deoarece NAT creează probleme pentru browsere (clienți) situate în spatele routerelor NAT care utilizează conexiuni P2P prin intermediul internetului, stomul este folosit pentru a crawl NAT. Stun este un protocol client-server care funcționează pe protocolul de transport UDP. În chat-urile P2P, de regulă, se aplică un server public de stun, iar informațiile primite de la acesta sunt utilizate pentru conexiunile UDP între două browsere dacă sunt pentru NAT.

Exemple de implementare a aplicațiilor WebRTC (camere de chat P2P, chat-uri de voce și video):
1. Chat video P2P Bistri (chat video cu o singură clic, chat P2P), realizat pe baza WebRTC, poate fi deschis pe Bistri. Bistri lucrează într-un browser fără a instala programe și pluginuri suplimentare. Esența lucrării este după cum urmează: Deschideți chat-ul video P2P la linkul specificat, după ce ați înregistrat în interfața care se deschide, Invitați parteneri, apoi din lista de clienți de la egal la egal, selectați Partenerul care se află în rețea și faceți clic pe " Apel video ".

Ca rezultat, MediaStream (Getusermedia) va captura microfonul + webcams, iar serverul va efectua schimbul de mesaje semnal cu partenerul selectat. După schimbul de mesaje semnal, API-ul Peerconnection creează canale pentru transmiterea fluxurilor de voce și video. În plus, Bistri transferă mesaje text instantanee și fișiere. În fig. 1 Afișează imaginea de interfață a interfeței cu chat video Bistri.


Smochin. 1. Chat video P2P Bistri

2. Twelephone (chat video P2P, chat P2P, SIP Twelephone) - Această aplicație client este construită pe baza HTML5 și WebRTC, care vă permite să efectuați apeluri vocale și video, precum și transmiteți mesaje text instantanee, adică Twilephone include chat-ul de testare P2P, chat video și SIP Twelephone. Trebuie remarcat faptul că Twelephone acceptă protocolul SIP și acum puteți efectua și primi apeluri vocale și video de la telefoanele SIP utilizând contul dvs. Twitter ca număr de telefon. În plus, mesajele text pot fi introduse prin voce prin microfon, iar programul de recunoaștere vocală intră în textul în șirul "Trimiteți un mesaj".

Twelphone este o telefonie web care funcționează pe baza browser-ului Google Chrome, începând cu versiunea 25, fără software suplimentar. Twelphone a fost dezvoltat de Chris Matthieu. Partea de server Twuephone se bazează pe NODE.JS. Serverul (serverul de contact) este utilizat numai pentru instalarea conexiunilor P2P între două browsere sau clienți WebRTC. Aplicația Twelephone nu are instrumente proprii de autorizare și axată pe conectarea la un cont (cont) în Twitter.

În fig. 2 este o captură de ecran a interfeței P2P de chat video Twelephone.



Smochin. 2. P2P Twelephone.

3. Grupul P2P Video Chat Conversat.io se bazează pe cele mai recente tehnologii WebRTC și HTML5. Convert Video Chat se bazează pe biblioteca simplăWebrtC și este concepută pentru a comunica până la 6 clienți de la egal la egal într-o singură cameră (pentru comunicare, specificați numele camerei comune pentru clienții de la egal la egal în rândul "Numele conversației" Row). P2P Video Chat Conversat oferă servicii de comunicații utilizatorilor fără înregistrare pe serverul de contact. În fig. 3 este reprezentată de ecranul de interfață de interfață P2P de conversat video.



Smochin. 3. Grupul de chat video P2P convert.io

Pentru a participa la eșantioane video P2P pe baza WebRTC, trebuie să aveți un browser care acceptă protocolul WebRTC și specificația HTML5. În prezent, browserele Google Chrome, începând cu versiunea 25 și Mozilla Firefox Nightly Support WebRTC Protocol și Specificații HTML5. Aplicațiile de calitate a aplicațiilor WebRTC și aplicațiile de transmisie de sunet depășesc aplicațiile Flash.

Utilizatorii europeni de rețea au fost împărțiți în două părți: potrivit unui sondaj al Institutului de Analiza Publică a opiniei publice din Allenbach (Germania), Skype, System și sistemele de memorie instantanee au devenit parte integrantă din viața de zi cu zi pentru 16,5 milioane de adulți și copii, 9 Million Utilizați aceste servicii de la caz de ocazie, iar 28 de milioane nu le-au atins.

Situația se poate schimba, deoarece acum în Firefox integrat tehnologia de comunicare în timp real (Webrtc.), precum și clientul în sine. Începeți chat-ul audio și video acum nu mai dificil decât deschiderea site-ului. Serviciile cum ar fi Facebook și Skype pariază pe soluții utilizând un client separat și creând un cont.

Webrtc diferă nu numai de simplitate. Această metodă vă permite să instalați chiar și să instalați conexiune directă între două browsere. Astfel, datele audio și video nu trec prin serverul în care supraîncărcarea se poate întâmpla sau a cărei administrator nu este deosebit de scrupulos în raport cu sectorul privat sau protecția datelor. Datorită conexiunii directe pentru WebRTC, nu este necesară nicio înregistrare sau un cont în niciun serviciu.

Pentru a începe conversația, trebuie doar să treceți prin link. Comunicarea rămâne privatăDeoarece fluxul de date este criptat. Comunicarea în timp real prin browser, Google a început să se angajeze activ în 2011, când și a publicat codul sursă pentru implementarea acestuia WebRTC.

La scurt timp după aceea, Chrome și Firefox au primit propriile motoare WebRTC. În prezent, opțiunile lor mobile sunt echipate atât cu această tehnologie, cât și instalate cu Android 5.0 de către motorul WebView 3.6, care este utilizat de aplicații.

Pentru comunicații în timp real, interfețele JavaScript corespunzătoare trebuie implementate în vizualizatorul Web. Cu ajutorul getusermediei, software-ul activează captura din sursele audio, adică dintr-o cameră web și de microfon. RTCPEERCONNECTY este responsabil pentru stabilirea unei conexiuni, precum și pentru comunicarea în sine.

În paralel cu integrarea în browser, grupul de lucru al consorțiului World Wide Web (W3C) a forțat procesul de standardizare WebRTC. El trebuie să fie finalizat în 2015.

WebRTC este mulțumit de mic

Pentru a utiliza serviciul WebRTC, nu sunt necesare multe resurse, deoarece serverul conectează numai interlocutorii. Instalarea compusului nu reprezintă, de asemenea, o complexitate specială. În primul rând, browserul servește semnalului WebRTC la semnal că intenționează să înceapă un apel. De la server, primește o legătură HTTPS - conexiunea este efectuată într-o formă criptată. Acest utilizator trimite interlocutorul său. După aceasta, browserul solicită utilizatorului să acceseze camera web și microfonul.

Pentru a seta streaming direct cu interlocutorul, browserul primește adresa IP și datele de configurare din serviciul WebRTC. Vizualizatorul de web al interlocutorului intră în același mod.

Pentru a transmite funcția de conectare fără eșecuri și în bună calitate, trei motoare lucrează în browser. Două dintre ele optimizează și comprimă datele video audio, al treilea este responsabil pentru transportul lor. El transmite date prin protocolul SRTP. (Protocolul de transport în timp real în timp real), care vă permite să efectuați streaming criptat în timp real.

Dacă conexiunea directă nu poate fi instalată, WebRTC caută o altă cale. De exemplu, acest lucru se întâmplă atunci când setările de rețea împiedică serverul STUN să furnizeze o adresă IP. Standardul WebRTC prevede că, în acest caz, conversația va avea loc, dar cu orificiul intermediar pe serverul de întoarcere (traversal folosind relee în jurul NAT). Deci, pe site-ul NetScan.co puteți verifica dacă WebRTC este implementat pe computerul dvs. și cu accesul la rețea.

Cum se conectează

Mai întâi trebuie să înregistrați o conversație (1). Serviciul WebRTC oferă un link care urmează să fie trimis interlocutorului. Browserul care utilizează stunner își găsește propria adresă IP (2), o trimite la serviciu și primește un partener IP pentru a instala compusul direct (3). Dacă nu puteți utiliza uimirea, conversația este redirecționată utilizând serverul Turnner (4).

Comunicarea pe tehnologia WebRTC din browser începe să utilizeze codul JavaScript. După aceasta, trei motoare sunt responsabile pentru comunicare: Dispozitivele de voce și video Colectează date multimedia de la o cameră web și microfon, iar motorul de transport combină informații și transmite fluxul în formă criptată utilizând protocolul SRTP (protocolul în timp real securizat).

Ce browsere funcționează cu webrtc

Chrome și Firefox sunt echipate cu un motor WebRTC care utilizează astfel de servicii, cum ar fi Talky.IO. Browserul Mozilla poate lucra direct cu propriul său client.

Google și Mozilla continuă să dezvolte o idee de comunicare în timp real: Chrome poate organiza o conferință WebRTC cu mai mulți participanți, iar noul client Hello din Firefox este proiectat cu filiala gigantului de telecomunicații Telefonica. Apple a rămas încă deoparte, în Safari webrtc să se aștepte încă. Cu toate acestea, există multe aplicații alternative pentru iOS și plug-in-uri pentru Safari.

Microsoft este oarecum diferit. În calitate de proprietar al serviciului competitiv Skype, această companie nu va fi atât de ușor de capitulat înainte de WebRTC. În schimb, Microsoft dezvoltă o tehnologie numită ORTC (obiect Comunicații în timp real) pentru Internet Explorer.

Astfel de diferențe de la WebRTC, ca și alte codecuri și protocoale pentru a stabili contactul cu serverul, sunt nesemnificative și în timp, cel mai probabil se transformă într-o adăugire la standardul WebRTC, care va include aceste discrepanțe. Astfel, peste bord numai Apple rămâne - ca de obicei.

Fotografie:producători; Goodluz / Fotolia.com.

Timp de mulți ani pentru apelurile de la browser de mai mulți ani: Java, ActiveX, Adobe Flash ... În ultimii ani a devenit clar că plugin-urile și mașinile virtuale stângi nu strălucesc (de ce ar trebui să instalez ceva?) Și, Cel mai important, securitatea. Ce să fac? Există o ieșire!

Până de curând, mai multe protocoale pentru telefonia IP sau video au fost utilizate în rețele IP: SIP, cel mai frecvent protocol care vine de la scena H.323 și MGCP, Jabber / Jingle (utilizată în Gtalk), Adobe RTMP semi-deschisă * și, de Curs, skype închis. Proiectul WebRTC, inițiat de Google, încearcă să transforme starea de lucruri în lume și pe telefonul web, făcând inutil toate telefoanele software, inclusiv Skype. WebRTC nu implementează doar toate capabilitățile de comunicare direct în interiorul browserului instalat acum pe fiecare dispozitiv, dar încercând să rezolve simultan sarcina mai generală a comunicațiilor între utilizatorii browserelor (schimbul de date, ecrane, colaborarea cu documente și multe altele).

WebRtc web dezvoltator

Din punctul de vedere al dezvoltatorului web WebRTC este alcătuit din două părți principale:

  • gestionarea porțiunilor media din resursele locale (camera, microfonul sau ecranul local al computerului) este implementată de metoda Navigator.GetUserMedia care returnează obiectul MediaSTream;
  • comunicarea peer-to-peer între dispozitive care generează trafic media, inclusiv definiția metodelor de comunicare și le transmite direct obiecte de protecție (pentru a trimite și a primi fluxuri audio și video) și RTCDatachannel (pentru trimiterea și primirea datelor din browser).

Ce facem?

Vom aborda cum să organizăm cel mai simplu chat video multiplayer între browserele bazate pe WEBRTC utilizând prize web. Experimentul va începe în Chrome / Chromiu, ca fiind cel mai avansat în ceea ce privește browserele WebRTC, deși lansate pe 24 iunie, Firefox 22 aproape le-a prins. Trebuie spus că standardul nu a fost încă acceptat și de la versiunea la versiunea API se poate schimba. Toate exemplele au fost verificate în crom 28. Pentru simplitate, nu vom urmări curățenia codului și a browserului încrucișat.

MediaSTream.

Prima componentă simplă a WebRTC - MediaSTream. Acesta oferă acces la browser la circulația media din cameră și microfonul local de calculator. În Chrome, este necesar să se apeleze la funcția navigator.webkitgetusermedia () (deoarece standardul nu este încă finalizat, toate funcțiile merg cu prefixul și în Firefox aceeași funcție se numește navigator.mozgetusermedia ()). Când o sună, utilizatorul va fi afișat o cerere de acces la cameră și microfon. Puteți continua apelul numai după ce utilizatorul își dă consimțământul. Parametrii acestei funcții transmit parametrii comutatorului media necesar și două funcții de apelare: Primul va fi cauzat în cazul unui acces cu succes la aparatul foto / microfon, al doilea - în cazul unei erori. Pentru a începe, creați un fișier HTML RTCTEST1.HTML cu un buton și un element

Webrtc - prima cunoștință

Microsoft Cu-RTC-Web

Microsoft nu ar fi Microsoft dacă este ca răspuns la inițiativa Google nu a eliberat imediat opțiunea sa non-standard incompatibilă numită CU-RTC-Web (HTML5Labs.interoperabilitybridges.com/cu-rtc-wareb/cu-rtc-web.htm ). Deși cota de IE și atât de mică, continuă să se micșoreze, numărul de utilizatori Skype oferă Microsoft speră să preseze Google și se poate presupune că acest standard special va fi utilizat în versiunea browserului Skype. Standardul Google este orientat în principal pe comunicațiile dintre browsere; În același timp, partea principală a traficului de voce rămâne în continuare în rețeaua de telefonie obișnuită, iar gateway-urile dintre rețelele IT și IP sunt necesare nu numai pentru ușurința utilizării sau distribuției mai rapide, ci și ca mijloc de monetizare, care va Permiteți un număr mare de jucători să-i dezvolte. Apariția unui alt standard poate duce numai la nevoia neplăcută de a sprijini o dată două tehnologii incompatibile, dar în viitor pentru a oferi utilizatorului o selecție mai largă de posibilă funcționalitate și soluții tehnice accesibile. Așteptați și vedeți.

Pornirea fluxului local

Inside Tag-uri Fișierul nostru HTML va declara variabila globală pentru comutatorul media:

Var localstream \u003d null;

Primul parametru al metodei GetUtubermedia trebuie să specifice parametrii comutatorului media solicitat - de exemplu, includ pur și simplu audio sau video:

Var Streamconstracs \u003d ("Audio": Adevărat, "Video": TRUE); // solicitați accesul și audio și video

Fie specificați parametrii suplimentari:

Var Streamconstrains \u003d ("Audio": Adevărat, "Video": ("Obligatoriu": ("Maxwidth": "320", "MaxHeight": "240", "Maxframerat": "5"), "Opțional" :) );

Cel de-al doilea parametru al metodei GetUtubermedia trebuie transferat într-o funcție de apel invers, care va fi cauzată dacă este executată cu succes:

Funcție getusermedia_success ("getusermedia_suxcess ():", flux); localVideo1.src \u003d url.createObjecturl (flux); // Conectați comutatorul media la elementul HTML

A treia parametru - Handler de eroare de funcționare a funcției Callback, care va fi apelat în caz de eroare

Funcție getusermedia_error (eroare) (consola.log ("getusermedia_error ():", eroare);)

Apelând de fapt metoda GEUUSERMEDIA - Cerere de acces la microfon și cameră când faceți clic pe primul buton

Funcție getusermedia_click () (consola.log ("getusermedia_click ()"); navigator.webkitgetusermedia (Streamconstras, getusermedia_success, getusermedia_error);)

Obțineți acces la fișierul media din fișier deschis local, este imposibil. Dacă încercați să faceți acest lucru, obțineți o greșeală:

NavigatorUserMediaError (cod: 1, permision_denizat: 1) "

Postăm fișierul rezultat pe server, deschis în browser și ca răspuns la solicitarea care a apărut permițând accesul la cameră și microfonul.

Selectați dispozitivele la care vor primi Chrome, puteți setări ("Setări"), afișați setări avansate ("Afișați setările avansate"), confidențialitatea secțiunii ("Date personale"), butonul de conținut ("Setări de conținut"). În browserele Firefox și Opera, selecția dispozitivelor este realizată din lista derulantă direct atunci când accesul este rezolvat.

Când utilizați protocolul HTTP, permisiunea va fi solicitată de fiecare dată când primiți accesul la călătoria media după încărcarea paginii. Tranziția la HTTPS vă va permite să afișați o interogare o dată, numai cu primul acces la comutatorul media.

Fiți atenți la cercul pulsatoriu din pictograma de pe fila și pictograma camerei din partea dreaptă a barei de adrese:

RTCMediaConnection.

RTCMediaConnection este un obiect conceput pentru a stabili și transmite medii între participanți. În plus, acest obiect este responsabil pentru formarea unei descrieri a Mediassiei (SDP), obținând informații despre candidații de gheață pentru trecerea prin intermediul ecranelor NAT sau de rețea (locale și folosind stun) și interacționează cu serverul de întoarcere. Fiecare participant trebuie să aibă o singură conexiune RTCMediaConnection. Fotografiile media sunt transmise peste protocolul SRTP criptat.

Turn servere

Candidații de gheață sunt trei tipuri: gazdă, srflx și releu. Gazdă conține informații obținute la nivel local, SRFLX - modul în care nodul caută un server extern (stun) și releu - informații pentru traficul de proxing prin serverul de întoarcere. Dacă nodul nostru este în spatele NAT, atunci candidații gazdă vor conține adrese locale și vor fi inutile, candidații SRFLX vor ajuta numai cu anumite tipuri de NAT și releu va fi ultima speranță de a sări traficul prin intermediul serverului intermediar.

Exemplu de candidat la gheață a tipului de gazdă, cu adresa 192.168.1.37 și portul UDP / 34022:

A \u003d Candidatul: 337499441 2 UDP 2113937151 192.168.1.37 34022 Generarea tipului gazdă 0

Format general pentru setarea serverelor de sto / turn:

Var servere \u003d ("Iceservers": [("URL": "URL: stun.stunprotocol.org: 3478"), ("URL": "Turn: [E-mail protejat]: port "," Credential ":" Parola ")]);

Publicul servere de la Internet foarte mult. O listă mare, de exemplu, este. Din păcate, ei rezolvă prea multe probleme. Serverele de întoarcere publice, spre deosebire de stun, este practic nu. Acest lucru se datorează faptului că serverul de întoarcere trece prin fotografii media care pot descărca semnificativ și canalul de rețea și serverul însuși. Prin urmare, cea mai ușoară cale de a vă conecta la serverele de întoarcere este de a seta singur (este clar că va fi solicitată IP-ul public). De la toate serverele, în opinia mea, cel mai bun server RFC5766-Turn. Sub ea există chiar o imagine gata făcută pentru Amazon EC2.

Cu întoarcerea până când totul este atât de bun, dar există o dezvoltare activă și vreau să sper, după un timp WebRTC, dacă nu se compară cu Skype cu privire la calitatea trecerii prin difuzarea adreselor (NAT) și ecrane de rețea, apoi cel puțin o abordare vizibilă.

Pentru RTCMediaConnection, este necesar un mecanism suplimentar pentru schimbul de informații de control pentru a stabili o conexiune - deși formează aceste date, dar nu le transmite și transferul către alți participanți trebuie implementat separat.


Alegerea unei metode de transmisie este atribuită dezvoltatorului - deși manual. De îndată ce va avea loc schimbul de date necesare, RTCMediaConnection va stabili automat performanțele media (dacă se dovedește, bineînțeles).

Modelul ofertei-răspuns

Pentru a stabili și schimba vizualizările media, se utilizează modelul de ofertă / răspuns. Descris în RFC3264) și protocolul SDP (protocolul de descriere a sesiunii). Acestea sunt utilizate și protocolul SIP. Acest model distinge doi agenți: Ofrar - unul care generează o descriere SDP a sesiunii pentru a crea o nouă sau modificare a existenței (ofertei SDP), iar răspunsul este cel care primește o descriere a SDP a sesiunii de la un alt agent și îl întâlnește descrierea proprie a sesiunii (răspunsul SDP). În același timp, specificația necesită un protocol de nivel superior (de exemplu, SIP sau propriul său deasupra prizelor web, ca în cazul nostru) responsabil cu transmiterea PSD între agenți.

Ce date trebuie transferate între două RTCMediaConnection, astfel încât acestea să poată instala cu succes traficul media:

  • Primul participant care inițiază conexiunea generează o ofertă în care transmite structura de date SDP (același protocol pentru același scop este utilizat în SIP), care descrie caracteristicile posibile ale comutatorului media, pe care o va începe să transmită. Acest bloc de date trebuie transferat la al doilea participant. Cel de-al doilea participant formează răspunsul, cu SDP și îl transmite primii.
  • Iar primul și al doilea participant efectuează procedura de determinare a posibilelor candidați la gheață, cu ajutorul căruia al doilea participant va putea să se transfere la ei. După cum sunt definite candidații, informațiile despre ele ar trebui transmise unui alt participant.

Oferta de formare.

Pentru formarea ofertei, vom avea nevoie de două funcții. Primul va fi chemat în cazul formării sale de succes. Al doilea parametru al metodei CreateOffer () este o funcție de apel invers, numită dacă apare o eroare (cu condiția ca fluxul local să fie deja disponibil).

De asemenea, veți avea nevoie de două manipulatori de evenimente: OniceCandatul la determinarea noului candidat la gheață și OnAdstream atunci când conectați comutatorul media din partea îndepărtată. Să revenim la dosarul nostru. Adăugați la HTML după rânduri cu elemente

Și după un șir cu un element


De asemenea, la începutul codului JavaScript va declara variabila globală pentru RTCPEERCONNECTY:

Var PC1;

Când sunați la designerul RTCPEERCONNEction, trebuie să specificați serverele de stom / rândul său. Citiți mai multe despre ele, consultați inserția; În timp ce toți participanții se află în aceeași rețea, nu sunt obligați.

Var servere \u003d null;

Opțiuni pentru pregătirea ofertei SDP

VAR OFFERTCONSIRANDS \u003d ();

Primul parametru al metodei CreateOffer () este o funcție de apel invers la succes

Funcție PC1_CREATEOFFER_SUCCESS ("PC1_CREATEOFFER_SUCCESS ():" + desc.SDP + "Desc:", desc); PC1.SETLOCALDERICTIRE (DESC); // Setați RTCPEERCONNECTING, formată prin ofertă SDP utilizând metoda SetLocalDecription . // Când partea lungă rotundă este trimisă la răspunsul său SDP, va trebui să fie stabilit de Settremotedescription // până când a doua parte nu este implementată, nu face nimic // pc2_receivedoffer (desc);)

Al doilea parametru este o funcție de apel invers care va fi numită în caz de eroare

Funcția PC1_CREATEOFFER_ERROR (Eroare) (Console.log ("PC1_CREATEOFFER_SUCCESS_ERROR (): Eroare:", eroare);)

Și declară o funcție de apel inversă pe care candidații de gheață vor fi transmise așa cum sunt determinați:

Funcția PC1_ORICECANDADE (Evenimentul) (Console.log ("PC1_OniceCandade (): \\ n" + eveniment.candidat.Candid.replace ("\\ r \\ n", ""), eveniment.Candidat); // În timp ce a doua parte este nu implementate, nu face nimic // pc2.addicandatul (noul RTCICECADADIDE (Event.Candidat);))

Pe lângă o funcție de apel invers pentru a adăuga un comutator media din partea îndepărtată (pentru viitor, deoarece avem doar o singură RTCPEERCONNECTY):

Funcția PC1_onaddstream (consola.log ("pc_onaddstream ()"); RemoteVideo1.src \u003d URL.CreateObjecturl (Event.Stream);)

Când faceți clic pe butonul CreateOffer, veți crea RTCPEERCONNECTY, setați metodele Olighecanded și Onadstream și solicitați formarea ofertei SDP prin apelarea metodei CreateOffer ():

Funcție CreateOffer_Click (Console.log ("CreateOffer_Click ()"); PC1 \u003d New WebkitrtCpeerconnection (servere); // Creați RTCPEERCONNECTION PC1.OniceCandidat \u003d PC1_OniceCandidat; // Prelucrarea funcțiilor de apel pentru Candidates PC1.onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream \u003d PC1_onaddstream; // funcția de callback cauzată de apariția unui comutator media din partea îndepărtată. Până în prezent, nu are PC1.addstream (localstream); // Să dăm porțiuni media locale (presupunem că este deja primit) PC1.CreateOffer (// solicită, de fapt, formarea ofertei PC1_CREATELOFFER_SUCCESS, PC1_CREATELOFFER_ERROR, OfertăConstralines);)

Salvați fișierul ca RTCTEST2.HTML, postați-l pe server, deschideți-l în browser și uitați-vă în consola, ce date se formează în timpul activității sale. Al doilea videoclip nu va apărea încă, deoarece participantul este doar unul. Reamintim, SDP - o descriere a parametrilor Mediassiei, codec-urile disponibile, performanțele media și candidații de gheață sunt opțiuni posibile pentru conectarea la acest participant.

Formarea răspunsului SDP și a ICE-Candidați

Și oferta SDP și fiecare dintre candidații de gheață trebuie transferată pe cealaltă parte și după primirea RTCPEERCONNECTY pentru a apela metodele de setare pentru oferirea de SDP și addicapecandad pentru fiecare candidat de gheață derivat din partea îndepărtată; În mod similar, în direcția opusă pentru răspunsul SDP și candidații la distanță de gheață. Răspunsul SDP în sine se formează în mod similar de oferit; Diferența este că metoda CreateOffer este numită, dar metoda CreateAnswer și înainte de această metodă RTCPEERCONNECTS este transmisă de SETremotedescription Ofertă SDP primită de la apelantul.

Adăugați un alt element video în HTML:

Și variabila globală pentru cea de-a doua RTCPEERCONNEction sub anunțul primului:

Var PC2;

Procesarea ofertei și răspundeți la SDP

Răspuns Formarea SDP este foarte asemănătoare ofertei. În funcția de apel invers, cauzată de formarea de succes a răspunsului, similar cu oferta, dați o descriere locală și dați primului participant primit de răspunsul SDP:

Funcția PC2_CreateAnswer_Succesrtion (desc); console.log ("PC2_CreateAnswer_success ()", desc.sdp); PC1.SetreRemodirftion (desc);)

Funcția de apel invers numită în cazul unei erori în formarea răspunsului este complet similară ofertei:

Funcția PC2_CreateAnswer_error (Eroare) (Console.log ("PC2_CreateAnswer_error ():", eroare);)

Răspundeți opțiunile de formare SDP:

Var Answerconstrains \u003d ("Obligatoriu": ("OfferToreceevedio": TRUE ", OffertoreVideo": TRUE));

La primirea ofertei, vom crea RTCPEERCONNECONNEREA ȘI FORMULARĂMĂ RĂSPUNS SAMILĂ LA OFERTA:

Funcție PC2_ReceiveDOFFFER (DESC) (Consoleofer (), DESC); // Creați un obiect RTCPEERCONNEction pentru cel de-al doilea participant în același mod ca primul PC2 \u003d New WebkitrtCpeerconnection (servere); PC2.oniceCandidat \u003d PC2_OniceCandidat; // Setați handlerul evenimentului Când evenimentul apare candidat la gheață PC2.onaddstream \u003d PC_ONADDSTEAM; // Când un flux pare să-l conecteze la HTML

Pentru ca în exemplul nostru, transmiteți oferta SDP de la primul participant la al doilea, ne dezabonăm în funcția PC1 createOffer.succes () șir de apel:

PC2_ReceiveDOffer (DESC);

Pentru a implementa prelucrarea candidaților cu gheață, noi inconsecventăm evenimentele de pregătire a candidaților de gheață a primului participant PC1_OniceCandidat () la transferul său la al doilea:

PC2.AddiceCandidatul (noul RTCecceCandidat (Event.Candidat));

Manipulatorul evenimentului de pregătire a celui de-al doilea candidat de gheață participant este primul oglindă:

Funcția PC2_OniceCandid (eveniment) (console.log ("PC2_ORICADECANDAD ():", Event.Candidat.Candidat); PC1.addiceCandatul (noul RTCICECADADIDE));)))

Caracteristică de apel inversă pentru adăugarea comutatorilor media de la primul participant:

Funcția PC2_Onaddstream (consola.log ("pc_onaddstream ()"); RemoteVideo2.src \u003d URL.CreateObjecturl (Event.Stream);)

Finalizarea conexiunii

Adăugați un alt buton la HTML

Și funcția pentru a finaliza conexiunea

Funcție btnhanguplick () (// opriți videoclipul local de la elementele HTML

Salvați ca RTCTEST 3.HTML, stați pe server și deschideți în browser. Acest exemplu implementează un transfer bilateral al performanțelor media între două RTCPeerConection într-un marcaj de browser. Pentru a organiza schimbul de ofertă și a răspunde la SDP prin intermediul rețelei, vor fi necesare candidate de gheață între participanți și alte informații în locul unei proceduri directe de provocare pentru a pune în aplicare schimbul între participanții cu orice transport, în cazul nostru - Prize web.

Ecranul de difuzare

GetUtilizermedia Caracteristică De asemenea, puteți captura ecranul și difuzarea ca MediaSTream, specificând următorii parametri:

Var MediaSTReamconstrans \u003d (Audio: False, Video: (obligatoriu: (ChromeMediaSource: "Ecran"), opțional :));

Pentru a accesa cu succes ecranul, trebuie efectuate mai multe condiții:

  • activați steagul screenshot în getUturmedia () în Chrome: // Steaguri /, Chrome: // Steaguri /;
  • fișierul sursă trebuie să fie descărcat de HTTPS (Originea SSL);
  • fluxul audio nu trebuie solicitat;
  • nu ar trebui să existe mai multe solicitări într-o filă de browser.

Biblioteci pentru WebRTC.

Deși WebRTC nu este de asemenea finalizat, există deja mai multe biblioteci bazate pe aceasta. JSSIP este conceput pentru a crea splo-uri moi de browser care lucrează cu switch-uri SIP, cum ar fi asteriscul și Camalio. Peerjs va simplifica crearea rețelelor P2P pentru schimbul de date, iar Holla va reduce domeniul de aplicare necesar pentru comunicarea P2P de la browsere.

Node.js și socket.io.

Pentru a organiza schimbul de candidați SDP și gheață între cele două RTCpeerconnection prin rețea, utilizați node.js cu modulul socket.io.

Instalarea celei mai recente versiuni stabile a NODE.JS (pentru Debian / Ubuntu) descrisă

$ sudo apt-get-get instalare Python-software-proprietăți Python g ++ face $ sudo add-apt-repository PPA: chris-lea / node.js $ sudo apt-get update $ sudo apt-get instalare nodejs

Instalarea pentru alte sisteme de operare este descrisă

Verifica:

$ Eco "sys \u003d necesită" sys.puts ("mesaj de testare"); " \u003e NODETEST1.JS $ NODEJS NODETEST1.JS

Folosind NPM (Manager de pachete NODE), instalați socket.io și un modul expres suplimentar:

$ Npm install socket.io exprima

Verificați prin crearea unui fișier NODETEST2.JS pentru partea serverului:

$ Nano Nodetest2.js Var App \u003d necesită ("Express") (), server \u003d necesită ("http"). CreateServer (aplicație), io \u003d necesită ("socket.io"). Ascultați (server); Server.lusten (80); // Dacă portul 80 este GRATUIT la App.Get ("/", funcția (REQ, RES) (// atunci când accesează pagina Res.SendFile Root (__ Dirname + "/nodest2.html"); // renunță la un Fișier html)); io.sockets.on ("conexiune", funcție (soclu) (// când conectați socket.emit ("eveniment server" (salut: "lume")); // trimite mesajul socket.on ("eveniment client" , Funcție (date) (// declară un handler de evenimente la primirea unui mesaj de la consola clientului (date);));));

Și nodest2.html pentru partea clientului:

$ nano nodestest2.html.

Porniți serverul:

$ sudo nodejs nodetest2.js

Și deschideți http: // localhost: 80 pagină (dacă rulează local pe portul 80) din browser. Dacă totul are succes, în consola JavaScript din browser, vom vedea schimbul de evenimente între browser și server când este conectat.

Schimbul de informații între RTCPEERCONNECTY prin prize web

Partea clientului

Salvați exemplul nostru principal (RTCDemO3.HTML) sub noul nume RTCDemo4.html. Conectați biblioteca socket.io din element:

Și la începutul scriptului JavaScript - Conectați-vă la prizele web:

Var socly \u003d io.connect ("http: // localhost");

Voi înlocui apelul direct al funcțiilor unui alt participant la trimiterea acestuia prin prize web:

Funcție creayOffer_Success (desc); socket.emit ("oferta", desc), ...) Funcție PC2_CreateAnswer_success (Desc) (... // PC1.SetreRremotededesction (desc); priză ("Răspuns", Desc);) funcția PC1_oniceCacandad (eveniment) (... // pc2.addicandatul (noul RTCecceCandidat (Event.Candidat); Socket.Emit ("ICE1", Event.Candidat); ..) ... // PC1.addicandatul (noul RTCICECADADIDE (Event.Candidat); Socket.Emit ("ICE2", Eveniment.Candidat); ...)

În funcția Hangup (), în loc de un apel direct pentru funcțiile celui de-al doilea participant, permiteți-ne să dau un mesaj prin prize web:

Funcția BTnhangupClick () (... // Remotevideo2.src \u003d ""; PC2.C2.CLOSE (); PC2 \u003d null; socket.emit ("Hangup", ());)

Și adăugați manageri de primire a mesajelor:

Socket.on ("ofertă", funcție (date) ("socket.on (" ofertă "):", date); PC2_ReceiveDOffer (date);)); Socket.on ("Răspuns", funcție (date) (e console.log ("socket.on": ", date); pc1.setremotedescription (date);)); Socket.on ("ICE1", funcția ("socket.on" ("ICE1"): ", date); PC2.addicandad (noul RTCICECADADIDE (date));)); Socket.on ("ICE2", funcția ("socket.on" ("ICE2"): ", date); PC1.addicandad (noul RTCiceCandidat (date));)); Socket.on ("Hangup", funcția ("consola.log" ("socket.on (" hangup "):", date); la distanțăvideo2.src \u003d "; PC2.Close (); PC2 \u003d null;)) ;

Partea serverului

Pe partea serverului, salvați fișierul NODETEST2 sub noul nume rtcest4.js și în interiorul funcției io.sockets.on ("conexiune", funcție (soclu) (...) Adăugați recepție și trimiterea mesajelor clienților:

Socket.on ("Ofertă", funcție (date) (// la primirea mesajului "Ofertă", // Deoarece conexiunea clientului în acest exemplu este doar una, // trimite un mesaj înapoi prin același soclu socket.emit ("Ofertă", date); // dacă ar fi necesar să trimiteți un mesaj pe toate conexiunile, // în plus față de expeditor: // soke.broadcast.emit ("ofertă", date);)); socket.on ("răspuns", funcție (date) (socket.emit ("răspuns", date);));); socket.on ("ICE1", funcție (date) (socket.emit ("ICE1", date);)); socket.on ("ICE2", funcția (date) (socket.emit ("ICE2", date);)); socket.on ("Hangup", funcție (date) (socket.emit ("Hangup", date);));

În plus, veți schimba numele fișierului HTML:

// res.sendfile (__ dirname + "/nodetest2.html"); // dați fișierul html res.sendfile (__ dirname + "/rtctcest4.html");

Server de pornire:

$ sudo nodejs nodetest2.js

În ciuda faptului că codul celor doi clienți se efectuează în același marcaj al browserului, toată interacțiunea dintre participanții din exemplul nostru este pe deplin efectuată prin rețea și participanții "diseminează" nu mai necesită dificultăți speciale. Cu toate acestea, ceea ce am făcut a fost, de asemenea, foarte simplu - aceste tehnologii și sunt bune pentru simplitatea lor de utilizare. Lăsați uneori înșelătorii. În special, nu vom uita că, fără servere de asistență, exemplul nostru nu va putea să lucreze în prezența traducerilor și ecranelor de rețea.

Concluzie

Exemplul rezultat este foarte condiționat, dar dacă aveți un pic de manipulatoare de eveniment universal, astfel încât acestea să nu difere de la apelarea și numitul partidului, în loc de două obiecte PC1 și PC2 pentru a face ca array RTCPEERCONNECONS să se dezvolte dinamică și să îndepărteze elementele

Se poate presupune că este foarte curând mulțumită WebRTC, va fi o lovitură de stat nu numai în prezentarea legăturilor vocale și video, ci și în modul în care percepem Internetul în ansamblu. WebRTC este poziționat nu numai ca o tehnologie pentru apelurile din browser către browser, ci și ca o tehnologie de comunicații în timp real. Apel video, pe care l-am dezasamblat, doar o mică parte a opțiunilor posibile de utilizare. Deja există exemple de difuzare a ecranului (screensering) și colaborare și chiar rețelei P2P de livrare a conținutului bazat pe browsere folosind RTCDatachannel.