Webrerc Voice chat. WEBRTC tehnologija: audio i video chat u pregledniku. Instaliranje WebRTC Media & Broadcasting Server

Danas je WEBRTC vruća tehnologija za streaming audio i video u preglednicima. Konzervativne tehnologije, kao što su HTTP Streaming i Flash, prikladniji su za distribuciju snimljenog sadržaja (video na zahtjev) i značajno inferiorniju u WeBrrtc u smislu u stvarnom vremenu i online emisijama, tj. Gdje je potrebna minimalna videozapisa, dopuštajući publici da vidi što se događa "uživo".

Mogućnost visokokvalitetne komunikacije u stvarnom vremenu izvedena je iz samog WebTC arhitekture, gdje se UDP protokol koristi za prijevoz video toastoka, što je standardna osnova za prijenos videa s minimalnim kašnjenjima i široko korištenim u komunikacijskim sustavima u stvarnom vremenu.

Kašnjenje komunikacije važna je u online emitiranju sustava, webinara i drugih aplikacija u kojima je potrebna interaktivna komunikacija s izvorom videa, krajnjim korisnicima i zahtijeva rješenje.

Još jedan težak razlog pokušati WebTC je definitivno trend. Danas svaki preglednik Android Chrome podržava ovu tehnologiju, koja jamči milijune uređaja spremnih za pregledavanje emitiranja bez instaliranja dodatnog softvera i konfiguracija.

Da bismo provjerili WIBRTC tehnologiju u slučaju i pokrenite jednostavan online emitiranje na njemu, koristili smo poslužitelj na FlashPhoner WEBRTC Media & Broadcasting poslužitelju. U značajkama, mogućnost emitiranja WebTC potoka u jednom u mnogi način "(jedan-na-maany), kao i podršku za IP kamere i sustave video nadzora putem RTSP protokola; U ovom pregledu se usredotočujemo na web-emisije web i njihove značajke.

Instaliranje WebRTC Media & Broadcasting Server

Budući da sustav verzije poslužitelja nije bio za Windows, nije htio instalirati VMware + Linux virtualni tip, test online emisije na home Windows računalo nije funkcioniralo. Kako bi se uštedjelo vrijeme odlučeno da se instance na oblak hosting ovako:

Bio je to Centros X86_64 verzija 6.5 bez ikakvog predinstaliranog softvera u podatkovnom centru Amsterdama. Dakle, sve što smo primili je dostupno je poslužitelj i ssh pristup. Za one koji su upoznati s naredbama Linux konzole, instalacija WebTC poslužitelja obećava da će lako i bezbolno. Pa što smo učinili:

1. Arhiva preuzimanja:

$ wget https: //syt/download-wcs5-server.tar.gz

2. Raspakirati

$ tar -xzf download-wcs5-server.tar.gz

3. Instalirati:

$ CD FlashphonerWebCAllServer.

Tijekom instalacije unosa IP adrese poslužitelja: xxx.xxx.xxx.xxx

4. Aktivirajte licencu:

$ CD / usr / Local / FlashfonerWebCAllServer / bin

$ / Aktivacija.sh

5. Pokreni WCS poslužitelj:

$ Servis webcallserver početak

6. Provjerite dnevnik:

$ rep - f /usr/local/flashphonerwebcallserver/logs/flashphoner_manager.log

7. Provjerite je li dva procesa na mjestu:

$ PS aux | Grep Flashfoner.

Proces instalacije je dovršen.

Ispitivanje WebTC online emisija

Ispitane su emitiranje ispitivanja nepoštećena. Osim poslužitelja, postoji web klijent koji se sastoji od desetak JavaScript, HTML i CSS datoteka te je raspoređena u mapu / VAR / WWW / HTML u fazi instalacije. Jedina stvar koja se morala učiniti je unijeti IP adresu poslužitelja na Config FlashPhoner.xml tako da se web klijent može povezati s poslužiteljem HTML5 poslužitelja. Opisujemo proces testiranja.

1. Otvorite stranicu klijenta index.html u pregledniku Chrome:

2. Da biste započeli emitiranje, morate kliknuti gumb "Start" u sredini zaslona.
Prije nego što to učinite, morate se pobrinuti da je webcam spojen i spreman za rad. Ne postoje posebni zahtjevi za web-kameru, na primjer, koristimo standardni fotoaparat ugrađen u laptop s rezolucijom od 1280 × 800.

Preglednik Chrome svakako će zatražiti pristup fotoaparatu i mikrofon kako bi korisnik mogao shvatiti da će njegov videozapis biti poslan na internetsku poslužicu i dopustio da to učini.

3. Sučelje je uspješno emitiranje video streata s fotoaparata na WEBRTC poslužitelju. U gornjem desnom kutu, indikator označava da protok ide na poslužitelj, u donjem kutu gumb Stop za zaustavljanje slanja videozapisa.

Obratite pozornost na vezu u donjem polju. Sadrži jedinstveni identifikator ove niti, pa se netko može pridružiti gledanju. Dovoljno je otvoriti ovu vezu u pregledniku. Da biste je kopirali u međuspremnik, morate kliknuti na gumb "Kopiju".

U stvarnim primjenama, kao što su webinari, predavanja, online emisije ili interaktivni TV programeri morat će implementirati raspodjelu ovog identifikatora na određene skupine gledatelja kako bi se oni povezivanja s željenim tokovima, ali to je logika aplikacije. WebTRTC medij i emitiranje poslužitelja ne utječe, ali samo distribuiranje videozapisa.

5. Veza se uspostavlja i gledatelj vidi protok na zaslonu. Sada može poslati link nekom drugom, prestati reproducirati stream ili uključiti način na cijelom zaslonu pomoću kontrola u donjem desnom kutu.

WEBRTC rezultati testa online prijevod poslužitelja

Tijekom testova, kašnjenje je izgledalo savršeno. Ping do podatkovnog centra iznosio je oko 100 milisekundi, a kašnjenje se nije razlikovalo u oku. Odavde se može pretpostaviti da je stvarno kašnjenje iste 100 plus minus nekoliko desetaka milisekundi za puferiranje vremena. Ako se usporedite s Flash Video: U takvim testovima, bljesak se ne ponaša kao dobar kao i webrertc. Dakle, ako na sličnoj mreži za pomicanje ruke, onda se pokret na zaslonu može vidjeti samo kroz jednu / dvije sekunde.

Što se tiče kvalitete, napominjemo da na pokretima ponekad možete razlikovati kocke. To odgovara prirodi VP8 kodeka i njegovog glavnog zadatka - pružiti video vezu u stvarnom vremenu uz prihvatljivu kvalitetu i bez kašnjenja u komunikaciji.

Poslužitelj je dovoljno jednostavan za instalaciju i konfiguriranje, ne zahtijeva nikakve ozbiljne vještine uz Linux znanje na razini naprednog korisnika koji može izvršiti naredbe iz konzole putem SSH-a i koristiti uređivač teksta. Kao rezultat toga, uspjeli smo uspostaviti online emitiranje jedan-na-mnogo između preglednika. Povezivanje dodatnih gledatelja na tok također nije uzrokovao probleme.

Kvaliteta emitiranja pokazala se prilično prihvatljivom za webinars i online emisije. Jedina stvar koja je uzrokovala neka pitanja je rezolucija videozapisa. Kamera podržava 1280 × 800, ali rezolucija na ispitnoj slici je vrlo slična 640 × 480. Očigledno, ovo pitanje mora razjasniti programere.

Testiranje videozapisa emitiranje s web-kamere
putem WEBRTC poslužitelja

WEBRTC (Web Real Time Communications) je standard koji opisuje prijenos streaming audio podataka, video podataka i sadržaja iz preglednika i na preglednik u realnom vremenu bez instaliranja dodataka ili drugih proširenja. Standard vam omogućuje da pretvorite preglednik u terminalni terminal video konferencije, samo otvorite web-stranicu za početak komuniciranja.

Što je WeBrrtc?

U ovom članku, mi ćemo razmotriti sve što trebate znati o WEBRTC tehnologiji za običnog korisnika. Razmotrite prednosti i nedostatke projekta, otkrivaju neke tajne, reći ćemo vam kako to radi, gdje i što se primjenjuje WebRTC.

Što trebate znati o WeBrTC-u?

Evolucija standarda i tehnologija Video Communications

Sergej Yutzaytis, Cisco, video + konferencija 2016

Kako WebTRTC radi

Na strani klijenta

  • Korisnik otvara stranicu koja sadrži HTML5 oznaku
  • Preglednik traži pristup web-kamere i korisničkog mikrofona.
  • JavaScript kod na stranici korisnika kontrolira parametre veze (IP adrese i WebTC poslužitelj ili drugi korisnici WebTC) za zaobilaženje NAT-a i vatrozida.
  • Prilikom primanja informacija o sugovorniku ili potoku s konferencijom, preglednik počinje odgovarati audio i video kodecima koji se koriste.
  • Počinje proces kodiranja i prijenosa streaming podataka između WEBRTC klijenata (u našem slučaju, između preglednika i poslužitelja).

Na strani WEBRTC poslužitelja

Za razmjenu podataka između dva sudionika, video poslužitelj nije potreban, ali ako trebate kombinirati nekoliko sudionika na jednoj konferenciji, poslužitelj je potrebno.



Video poslužitelj će dobiti medijski promet iz različitih izvora, pretvoriti ga i poslati ga korisnicima koji koriste WEBRTC kao terminal.

Također, WEBRTC poslužitelj će dobiti medijski promet iz WebTC Peters i transferirati na sudionike konferencije koji koriste aplikacije za stolna računala ili mobilne uređaje, ako ih ima.

Prednosti standarda

  • Nije potrebna instalacija.
  • Vrlo kvalitetna komunikacija zbog:
    • Korištenje modernog videozapisa (VP8, H.264) i audio kodeka (opus).
    • Automatsko podešavanje kvalitete potoka pod uvjetom priključka.
    • Ugrađeni ECHO i sustav smanjenja buke.
    • Automatsko podešavanje osjetljivosti mikrofona sudionika (ARU).
  • Visoka sigurnost: Svi priključci su zaštićeni i šifrirani prema TLS i SRTP protokolima.
  • Postoji ugrađeni mehanizam za hvatanje sadržaja, kao što je desktop.
  • Sposobnost implementacije bilo kojeg HTML5 i JavaScript upravljačkog sučelja.
  • Sposobnost integriranja sučelja s bilo kojim stražnjim sustavima pomoću web-mjesta.
  • Projekt otvorenog koda - može se implementirati u vašem proizvodu ili usluzi.
  • Real Cross-Platform: ista WebTC aplikacija će raditi jednako dobro na bilo kojem operativnom sustavu, radnoj površini ili mobilnom telefonu, pod uvjetom da preglednika podržava WebTC. To značajno štedi resurse za razvoj softvera.

Nedostaci standarda

  • Za organizaciju grupnog audio i video konferencije, potreban je VSK poslužitelj, koji bi pomiješao videozapis i zvuk od sudionika, jer Preglednik ne zna kako međusobno sinkronizirati nekoliko dolaznih tokova.
  • Sve WebTC rješenja su nespojive, jer Standardno opisuje samo metode prijenosa videozapisa i zvuka, ostavljajući implementaciju metoda adresiranja pretplatnika, praćenjem njihove dostupnosti, poruka i datoteka, planiranja i drugog dobavljača.
  • Drugim riječima, nećete moći pozvati iz WebTC primjene jednog developera u WebTC primjeni drugog programera.
  • Miješanje grupnih konferencija zahtijeva velike računalne resurse, tako da ova vrsta videopoziva zahtijeva kupnju plaćene pretplate ili ulaganja u njezinu infrastrukturu, gdje je za svaku konferenciju potrebna 1 fizička jezgra modernog procesora.

WebRTC Secrets: Kako dobavljači imaju koristi od proboja web tehnologije


Tsakhi Levi, Bloggeek.me, Video + konferencija 2015

WEBRTC za tržište VKS

Povećanje broja VSK terminala

WEBRTC tehnologija je imala snažan utjecaj na razvoj tržišta VKK-a. Nakon napuštanja prvih preglednika s podrškom za WEBRTC u 2013. godini, potencijalni broj terminala videokonferencija diljem svijeta odmah se povećao za 1 milijardu uređaja. U biti, svaki preglednik je postao CSM terminal, a ne inferiorniji od svojih hardverskih analoga s točke gledišta ponude.

Koristiti u specijaliziranim rješenjima

Koristeći razne JavaScript knjižnice i WebTC Cloud Service API omogućuje jednostavno dodavanje podrške za video veze na bilo koji web projekti. Prethodno, za prijenos podataka u programerima u stvarnom vremenu, bilo je potrebno proučiti načela protokola i koristiti razvoj drugih tvrtki koje su najčešće tražili dodatno licenciranje, što povećava troškove. Već, WebTC se aktivno koristi u "Poziv", "Online chat podrška", itd.

Ex-korisnici Skype za Linux

U 2014. Microsoft je najavio prestanak projekta Skype projekta Linux, koji je izazvao veliku iritaciju od IT stručnjaka. Tehnologija WebRTC-a nije vezana za operativni sustav i provodi se na razini preglednika, tj. Linux korisnici će moći vidjeti proizvode i usluge na temelju WEBRTC Full-Fundped Skype zamjena.

Natjecanje s bljeskalicom.

WEBRTC i HTML5 postali su fatalni udarac za flash tehnologiju, koji i tako zabrinuti za njihov daleko od najboljih godina. Od 2017. vodeći preglednici službeno su prestali podržavati bljesak i tehnologija je konačno nestala s tržišta. Ali morate dati bljeskalicu zbog svega što je onaj koji je stvorio web konferencijsko tržište i predložio tehničke mogućnosti za živu komunikaciju u preglednicima.

Video prezentacija WebTC.

Dmitry Odintsov, TrueConf, Video + konferencija Listopad 2017

Kodeci u Webrertcu.

Audio kodek

Za komprimiranje audio prometa u WEBRTC-u se koriste Opus i G.711 kodeci.

G.711 - Najstariji glasovni kodek s visokom brzinom prijenosa (64 kbps), koji se najčešće koristi u tradicionalnim telefonskim sustavima. Glavna prednost je minimalno računalno opterećenje zbog uporabe algoritmi kompresije svjetlosti. Kodek karakterizira niska razina kompresije glasovnih signala i ne čini dodatno kašnjenje zvuka tijekom komunikacije između korisnika.

G.711 je podržan velikim brojem uređaja. Sustavi u kojima se ovaj kodek koristi je lakše u uporabi od onih koji se temelje na drugim audio kodovima (G.723, G.726, G.728, itd.). U pogledu kvalitete G.711, procijenjeno je na 4.2 u MOS testiranju (procjena u rasponu od 4-5 je najviša i znači dobra kvaliteta, slična kvaliteti prijenosa glasovnog prometa u ISDN-u, pa čak i više).

Opus. - Ovo je kodek s niskim kašnjenjem kodiranja (2.5 MS do 60 ms), podršku za promjenjivu bitratu i visoku razinu kompresije, koja je idealna za prijenos streaming audio signala u mrežama s promjenjivom propusnošću. Opus je hibridno rješenje koje kombinira najbolje karakteristike svilenih kodeka (kompresija glasa, rješavanje izobličenja ljudskog govora) i kalena (kodiranje audio podataka). Kodek je u slobodnom pristupu, programeri koji ga koriste, ne moraju platiti odbitke u vlasnicima autorskih prava. U usporedbi s drugim audio kodovima, opus, nesumnjivo pobjeđuje u mnogim pokazateljima. Pomicao je prilično popularne kodeke s niskim bitratom, kao što je MP3, Vorbis, AAC LC. Opus vraća najviše blizu izvorne "slike" zvuka od Amr-WB i Speex. Iza tog kodeka - budućnosti, zbog čega su i WebTC tehnologije uključili u obveznu ponudu podržanih audiostandarts.

Video kodek

Odabir video kodek za WEBRTC je trajao nekoliko godina od programera, kao rezultat toga, odlučili smo koristiti H.264 i VP8. Gotovo svi moderni preglednici podržavaju i kodeke. Video konferencijski poslužitelji za rad s WEBRTC-om dovoljno podržavaju samo jedan.

VP8. - Besplatni video kodiran s otvorenom licencom, odlikuje se velikom brzinom dekodiranja video toka i povećane otpornosti na gubitak okvira. Kodek je univerzalan, lako je uvesti u hardverske platforme, tako da vrlo često programeri video konferencijskih sustava ga koriste u svojim proizvodima.

Plaćeni video kodek H.264. Postao je poznat mnogo ranije nego njegov kolega. Ovo je kodek s visokim stupnjem kompresije video stream uz održavanje visokokvalitetnog videa. Visoka prevalencija ovog kodeka među video konferencija hardverskih sustava uključuje njegovu uporabu u STREBTC standardu.

Google i Mozilla aktivno promoviraju VP8 kodek i Microsoft, Apple i Cisco - H.264 (kako bi se osigurala kompatibilnost s tradicionalnim video konferencijskim sustavima). I ovdje je vrlo veliki problem za programere Cloud WebTC rješenja, jer ako na konferenciji svi sudionici koriste jedan preglednik, konferencija je dovoljna za miješanje jednom s jednim kodekom, a ako postoje različiti preglednici i postoje safari / rub Preglednici, tada će konferencija morati biti kodirana dvostruko različita kodek, koja će udvostručiti zahtjeve sustava za medijskog poslužitelja i, kao rezultat toga, troškove pretplate na usluge WEBRTC-a.

WebRTC API.

WEBRTC tehnologija temelji se na tri glavna API-ja:

  • (Odgovoran za prihvaćanje audio i video signala web-preglednika s fotoaparata ili radne površine korisnika).
  • RTCPeerconnection (Odgovoran za povezivanje između preglednika za "razmjenu" primljene od fotoaparata, mikrofona i radne površine, multimedants. Također u "dužnosti" ovog API-ja ulazi u obradu signala (čišćenje izvana, podešavanje glasnoće mikrofona) i kontrolu nad kontrolom koristi se audio i video kodove).
  • RTCDATA kanal (Pruža bilateralni prijenos podataka putem uspostavljene veze).

Prije nego što pristupite mikrofon i korisničkom fotoaparatu, preglednika traži dopuštenje. U Google Chromeu možete unaprijed podesiti u odjeljku "Postavke", u Opera i Firefox, odabir uređaja se provodi izravno u trenutku pristupa, s padajućeg popisa. Zahtjev za rješavanje će se uvijek pojaviti prilikom korištenja HTTP protokola i jednom ako koristite HTTPS:


RTCPeerconnection, Svaki preglednik koji sudjeluje u konferenciji WebTC-a mora imati pristup ovom objektu. Zahvaljujući korištenju RTCPeerkonnection, Mediaden iz jednog preglednika može se koristiti čak i putem NAT i mrežnih ekrana. Da biste uspješno prenijeli medijske dijelove, sudionici bi trebali razmjenjivati \u200b\u200bsljedeće podatke pomoću prijevoza, kao što su web utičnice:

  • sudionik inicijatora šalje drugi sudionik ponude-SDP-a (strukturu podataka, s karakteristikama protoka medija, koje će prenijeti);
  • drugi sudionik čini "odgovor" - Odgovor-SDP i proslijedi ga na inicijator;
  • tada je razmjena kandidata leda organizirana između sudionika, ako je bilo koji (ako sudionici iza NAT ili mrežnih ekrana).

Nakon uspješnog završetka ove razmjene između sudionika, prijenos medijskih izvedbi (audio i video) organizira se izravno.

RTCDATA kanal, Podrška protokola s podatkovnim kanalom pojavila se u preglednicima relativno nedavno, stoga se ovaj API može promatrati isključivo u slučajevima korištenja WEBRTC-a u Mozilla Firefox 22+ i Google Chrome 26+ preglednika. Uz to, sudionici mogu dijeliti tekstualne poruke u pregledniku.

Povezivanje webRTC-a.

Podržani desktop preglednici

  • Google Chrome (17+) i svi preglednici na temelju kromijevog motora;
  • Mozilla Firefox (18+);
  • Opera (12+);
  • Safari (11+);

Podržani mobilni preglednici za Android

  • Google Chrome (28+);
  • Mozilla Firefox (24+);
  • Operna mobilna (12+);
  • Safari (11+).

WEBRTC, Microsoft i Internet Explorer

Već dugo vremena Microsoft je čuo tišinu o WebTC podršci u programu Internet Explorer iu svom novom rubu preglednik. Dečki iz redmonda zapravo ne vole daju tehnologije korisnicima da ne kontroliraju, to je takva politika. Ali postupno se slučaj pomaknuo iz mrtve točke, jer WIBRTC je dalje bilo nemoguće ignorirati, a projekt ORTC izveden iz standarda WebTC-a je najavljen.

Prema programerima, ORTC je produžetak Standarda WIBRTC-a s poboljšanim skupom JavaScript-based API i HTML5, koji je preveden u normalan jezik znači da će sve biti isti, samo za kontrolu standarda i njegov će razvoj biti Microsoft , a ne Google. Skup kodeka proširuje se podrškom za H.264 i neke audio kodove serije G.7xx koji se koristi u telefonije i hardverskim VSK sustavima. Može se pojaviti ugrađena podrška za RDP (za prijenos sadržaja) i poruka. Usput, korisnici programa Internet Explorer nisu sretni, ORTC podrška će biti samo na rubu. Pa, naravno, takav se skup protokola i kodeka s niskom krvlju umetnut je s Skype za poslovanje, koji otvara još više poslovnih aplikacija za WEBRTC.

WEBRTC je API predviđen preglednikom i omogućuje vam organiziranje P2P veze i prijenosa podataka izravno između preglednika. Na internetu postoji nekoliko priručnika za pisanje vlastitog video chat pomoću WEBRTC-a. Na primjer, ovdje je članak o Habru. Međutim, svi su ograničeni na priključak dvaju kupaca. U ovom članku, pokušat ću reći o tome kako organizirati vezu i poruke između tri i više korisnika koristeći WEBRTC.

Sučelje RTCPeerconnection je peer-to-peer veza između dva preglednika. Da bismo povezali tri i više korisnika, morat ćemo organizirati mrežu mreže (mreža u kojoj je svaki čvor povezan s svim drugim čvorovima).
Koristit ćemo sljedeću shemu:

  1. Prilikom otvaranja stranice provjerite prisutnost ID-a prostorije location.hash.
  2. Ako id prostorije nije naveden, generiramo novo
  3. Šaljemo signalni poslužitelj "poruka o tome što se želimo pridružiti navedenoj sobi
  4. Signalni poslužitelj bira ostatak korisnika u ovoj sobi novi uređaj za korisnika
  5. Kupci koji su već u sobu pošaljite ponudu SDP-a
  6. Newbie odgovara da ponudi "s"

0. Signalni poslužitelj

Kao što znate, barem WebTC i pruža mogućnost P2P veza između preglednika, još uvijek zahtijeva dodatni prijevoz za razmjenu usluga. U ovom primjeru, web-poslužitelj napisan na node.js koristeći socket.IO djeluje kao takav prijevoz.

VAR Socket_io \u003d zahtijeva ("socket.io"); modul.exports \u003d (poslužitelj) (VAR korisnici \u003d (), var io \u003d socket_io (poslužitelj); i.on ("veza", funkcija (utičnica) (// želja novog korisnika pridruži se Socket.On sobi (" Soba U nekoj sobi, izlaze iz nje socket.Lave (Socket. / poslati na ostatak kupaca u ovoj sobi, poruka o pridruživanju novom članu Socket.Boads.to (Socket.room) .Mit ("Novi", JSON.ID);)); // Poruka vezana uz WEBRTC ( Ponuda SDP-a, SDP-ov odgovor ili led kandidat) Socket.on ("WEBRTC", funkcija (poruka) (poruka); ako (json.to! \u003d\u003d nedefiniran && korisnici! \u003d\u003d nedefinirano) (// Ako je poruka određena Primatelj i ovaj primatelj poznat poslužitelju, pošaljite poruku Samo mu ... korisnicima.Mit ("WEBRTC", PORUKA); ) Inače (// ... inače razmatramo poruku emitiranjem socket.Boads.to (Socket.room) .Mit ("WEBRTC", poruka);)); // netko odspojen socket.On ("Odspojivanje", funkcija () (// prilikom odspajanja klijenta, obavijestimo o ovom drugom socket.Boads.to (Socket.room). \\ T brisanje korisnika;)); )); );

1. Index.html

Izvorni kod same stranice je vrlo jednostavan. Svjesno nisam obratio pozornost na raspored i druge lijepe, jer ovaj članak nije o tome. Ako netko želi, učinite lijepom, neće raditi mnogo poteškoća.

Webrtc chat demo.

Spojen na. 0 Kolega.

2. main.js.

2.0. Primajte linkove na stavke stranice i WEBRTC sučelja
var chatlog \u003d dokument.gelementbyid ("chatlog"); var poruka \u003d \u200b\u200bdokument.gelementbyid ("poruka"); var connection_num \u003d dokument.gelementbyid ("connection_num"); var room_link \u003d dokument.gelementbyid ("room_link");

Još uvijek moramo koristiti prefiks preglednika za pristup WEBRTC sučeljima.

Var peerernection \u003d prozor.MozrtcPeerconnekcija || Prozor.WebkitrtcPeerction; Var sessionDescription \u003d prozor.MozrtcSessionDescription || Prozor.RTCSesionDescription; Var OpeCandidat \u003d Window.MozrtciceCadidate || Prozor.rtciceCadidate;

2.1. Definicija ID sobe

Ovdje ćemo trebati funkciju za generiranje jedinstvenog identifikatora sobe i korisnika. Koristit ćemo UUID za te svrhe.

Funkcija UUID () (povrat math.flu () (math.random () * 0x10000). (16);); povratak S4 () + S4 () + "-" + S4 () + "+ S4 () + "-" + S4 () + "-" + S4 () + S4 () + S4 ();)

Sada pokušaj povući identifikator sobe s adrese. Ako takva nije navedena, generirat ćemo novu. Donosimo link na trenutnu sobu na stranicu i, za jedan, generirat će trenutni identifikator korisnika.

Varni soba \u003d lokacija.hash.substr (1); ako (! soba) (sobna \u003d UUID ();) room_link.innerhtml \u003d "link u sobu"; var me \u003d uuid ();

2.2. Web-mjesto.

Odmah prilikom otvaranja stranice spojit ćete se na naš signalni poslužitelj "Y, poslati zahtjev za unos sobe i navedite rukovatelje poruka.

// Naveli smo da kada zatvorite poruku koju trebate poslati poslužitelju na VAR Socket \u003d iO.Connect ("", ("sinkronizacija isključite na istovaru": TRUE)); socket.on ("webrertc", utičnica); Socket.on ("Novi", Soktewlekseer); // Odmah pošaljite zahtjev za ulazak u Socket.EMit Soba ("Soba", JSON.STRINGIFY ((ID: ME, Soba: Soba)); // Pomoćna funkcija za slanje adresnih poruka povezanih s WebTRC funkcijom SendVinocket (vrsta, poruka, na) (Socket.EMIT ("WEBRTC", JSON.STRINGIFY ((ID: ME, na: Tip: ));););)

2.3. Postavke pojašnjenja

Većina pružatelja usluga pruža internetsku vezu putem NAT-a. Zbog toga izravna veza ne tako trivijalna afera. Prilikom izrade veze moramo odrediti popis omamljivih i skretanje poslužitelja koje će preglednik pokušati koristiti za zaobilaženje nat. Također određujemo par dodatnih opcija za povezivanje.

VAR Server \u003d (OSCERVERS: [URL: "Stun: 23.21.150.121"), (URL: "Stun: Stun.l.google.com: 19302"), (URL: "Okreni: Numb.viagenie.ca", vjerodajnica : "Vaša zaporka ide ovdje", korisničko ime: " [Zaštićeno e-poštom]")]); var opcije \u003d (opcionalno: [(DTLSSRTPKEYGREMENT: TRUE), // potreban za povezivanje između Chrome i Firefoxa (RtpdatakCannels: TRUE) // Obavezno u Firefoxu za korištenje DataChannels API])

2.4. Povezivanje novog korisnika

Kada se u sobi doda novi blagdan, poslužitelj nam šalje poruku. novi, Prema gore navedenim rukovateljima poruka, funkcija će nazvati. socketnewleer.

Var vršnjaci \u003d (); Funkcija SocketNewleeer (podaci); // stvoriti novi priključak VAR PC \u003d novi peerknonekcijski (poslužitelj, opcije); // inicijaliziranje IT initConnection (PC, podaci, "ponuda"); // Držite PIR na popisu Peers.connection \u003d PC; // stvoriti DataChannel za koji VAR Channel \u003d PC.Createdatakannel ("MyChannel", ()); Channel.owner \u003d podaci; peers.Channel \u003d kanal; // instalirati događaj rukovaci kanala veziva (kanal); // stvoriti SDP Ponudite PC.Createoffer (funkcija (ponuda));) funkcija init spojite (PC, ID, SDPTTYP) (PC.OneCandidad \u003d Funkcija (događaj) (ako (događaj) (event.candidate) (// kada je otkriven novi led kandidata, dodajte ga Popis za daljnje slanje peers.candidatecache.Push (event.candidate);) drugo (// Kada je završeno otkrivanje kandidata, rukovatelj će se ponovno nazvati, ali bez kandidata // u ovom slučaju šaljemo strah prvu SDP ponudu ili SDP Odgovor (ovisno o funkcionalnom parametru) ... SendVinocket (sdptpype, pc.localdescription, ID); // ... i onda su svi prethodno pronašli kandidate za led za (var i \u003d 0;< peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "

Peer kaže: "+ e.data +"
"; }; }

2.5. SDP ponuda, SDP odgovor, kandidat za led

Nakon primitka jedne od tih poruka, nazovite rukovatelj odgovarajuće poruke.

Funkcija usavršavanja (podaci) (podaci); prekidač (json.type) (kandidat) (JSON.ID, JSON.DATA); pauza; slučaj "ponuda": Remofferefeied (JSON. ID, JSON.DATA); Odgovor ": remoteanswerreceied (json.id, json.data); pauza;))

2.5.0 SDP ponuda.
Funkcija Remofferefeived (ID, podaci) (CreateEConnection (ID); VAR PC \u003d peers.Connection; pc.setremotedesription (podaci); PC.Create7sWer (funkcija (odgovor) (odgovor);));).) (Peers \u003d\u003d\u003d undefined) (peers \u003d (candidatecache :); var PC \u003d novi peerkonnekcija (poslužitelj, opcije); initConnection (PC, ID, "Odgovor"); Peers.connection \u003d PC; PC.Dondatachannel \u003d Funkcija (E ) (peers.channel \u003d e.Kannel; peers.Channel.owner \u003d ID; vezive (peers.channel);)))))
2.5.1 SDP odgovor.
Funkcija remoteanswerreceeceeve (ID, podaci) (VAR PC \u003d peers.Connection; PC.SetremoteDeSription (novi sessedDescription (podaci));)
2.5.2 Kandidat za led.
Funkcija RemoteCandeReced (ID, podaci) (CreateEConnection (ID); VAR PC \u003d peers.Connection; PC.AddiceCandidat (novi iceKandidat (podaci);)
2.6. Slanje poruke

Pritiskom na gumb Poslati. Funkcija se zove pošalji poruku., Sve što ona radi je prošlo na popisu vršnjaka i pokušava poslati određenu poruku svima.

Već dugi niz godina za pozive iz preglednika za mnogo godina: Java, ActiveX, Adobe Flash ... U posljednjih nekoliko godina postalo je jasno da dodaci i lijevi virtualni strojevi ne sjaji praktičnost (zašto bih trebao instalirati nešto?) I, što je najvažnije, sigurnost. Što učiniti? Postoji izlaz!

Donedavno, nekoliko protokola za IP telefoniju ili videozapise korištene su u IP mrežama: SIP, najčešći protokol koji dolazi iz H.323 i MGCP, Jabber / Jingle scena (koristi se u GTalk), poluotvorenom Adobe RTMP * i, od Tečaj, zatvoren Skype. WebRTC projekt, koji je pokrenuo Google, pokušava pretvoriti stanje stvari u svijetu i web-telefonije, čineći nepotrebne sve softverske telefone, uključujući Skype. WEBRTC ne primjenjuje samo sve komunikacijske mogućnosti izravno unutar preglednika instaliranog sada praktički na svakom uređaju, ali pokušava istovremeno riješiti opći zadatak komunikacija između korisnika preglednika (razmjena različitih podataka, ekrana, suradnje s dokumentima i još mnogo toga).

WebTr Web Developer

Sa stajališta WebTr Web Developer sastoji se od dva glavna dijela:

  • upravljanje medijskim dijelovima iz lokalnih resursa (fotoaparat, mikrofon ili lokalni zaslon računala) provodi se pomoću Navigator.GetUserMedia metoda koja vraća objekt s medijima;
  • komunikacija između uređaja između uređaja koji generiraju medijski promet, uključujući definiciju komunikacijskih metoda i izravno ih prenose - RTCPeerconnection objekte (za slanje i primanje audio i video streamove) i RTCdatachanil (za slanje i primanje podataka iz preglednika).

Što nam je činiti?

Mi ćemo se baviti kako organizirati najjednostavniji višeplayer video chat između WebTC-based preglednika pomoću web utičnica. Eksperiment će početi u Chrome / Chromium, kao najnapredniji u smislu WEBRTC preglednika, iako je objavljen 24. lipnja Firefox 22 ih je gotovo uhvatio. Mora se reći da standard još nije prihvaćen, a od verzije na API verziju može promijeniti. Svi primjeri su provjereni u kromu 28. Za jednostavnost, nećemo slijediti čistoću koda i preglednika.

Mediastream

Prva i jednostavna komponenta WeBrrtc - MediaStream. Pruža pristup pregledniku na cirkulaciju medija s fotoaparata i lokalnog računalnog mikrofona. U Chromeu, potrebno je nazvati funkciju Navigator.WebkitgetuuserMedia () (jer standard još nije dovršen, sve funkcije idu s prefiksom, a u Firefoxu je ista funkcija nazvana navigator.mozgetuusermedia ()). Kada ga zove, korisnik će biti prikazan zahtjev za pristup fotoaparatu i mikrofon. Možete nastaviti poziv tek nakon što korisnik daje njegov pristanak. Parametri ove funkcije prenosi parametre tražene medijske sklopke i dvije funkcije povratnog poziva: prvi će biti uzrokovan u slučaju uspješnog pristupa fotoaparatu / mikrofon, drugi - u slučaju pogreške. Za početak, stvoriti html datoteku RttCest1.html s gumbom i elementom

WEBRTC - Prvi poznanik

Microsoft Cu-RTC-Web

Microsoft ne bi bio Microsoft ako je odgovor na Google inicijativu nije odmah objavio vlastitu nekompatibilnu nestandardnu \u200b\u200bopciju koja se zove CU-RTC-Web (HTML5Labs.roperSidbridbridbrids.com/cu-rtc-wareb/cu-rtc-web.htm ). Iako je udio IE, i tako mali, nastavlja se smanjiti, broj korisnika Skype daje Microsoftovu nadu da će pritisnuti Google, a može se pretpostaviti da će se ovaj standard koristiti u verziji skype preglednika. Google standard je prvenstveno orijentiran na komunikacije između preglednika; U isto vrijeme, glavni dio glasovnog prometa i dalje ostaje u uobičajenoj telefonskoj mreži, a pristupnici između IT i IP mreža su potrebni ne samo za jednostavnost korištenja ili brže distribucije, nego i kao sredstvo za monetiranje, što će Dopustite da ih razvije veliki broj igrača. Pojava drugog standarda ne može samo dovesti do neugodnih potreba za podršku dvije nespojive tehnologije odjednom, ali u budućnosti da korisniku daju širi odabir mogućih funkcionalnosti i pristupačnih tehničkih rješenja. Čekaj i vidi.

Uključivanje lokalnog toka

Unutar oznake Naša HTML datoteka izjavila će globalnu varijablu za prekidač medija:

Var lokalstream \u003d null;

Prvi parametar metode GetUserMedia mora odrediti parametre tražene medijske sklopke - na primjer, jednostavno uključuju audio ili videozapis:

Var StreamConstraints \u003d ("Audio": TRUE, "VIDEO": TRUE); // Zahtjev za pristup i audio i videozapis

Ili navedite dodatne parametre:

Var StreamConstraints \u003d ("audio": TRUE, "VIDEO": ("Obvezno": ("Maxwidth": "320", "Maxheight": "240": "MaxFramerate": "5"), "Izborno" :) );

Drugi parametar metode GetuserMedia mora se prenijeti na funkciju povratnog poziva, koja će biti uzrokovana ako je uspješno izvršena:

Funkcija GetuserMedia_success ("GetUserMedia_Suxss ():", potok); LocalVideo1.Src \u003d URL.CreateBectUrl (potok); // Spojite medijske prebacivanje na HTML element

Treći parametar - Handler o pogrešci funkcije povratnog poziva koji će biti pozvan u slučaju pogreške

Funkcija GetuserMedia_error (pogreška) (console.log ("GetuserMedia_error ():", greška);)

Zapravo pozivam metodu GetuserMedia - zahtjev za pristup mikrofon i fotoaparat kada kliknete na prvi gumb

Funkcija GetuserMedia_click () (console.log ("GetuserMedia_click ()"); Navigator.Webkitgetuusermedia (StreatrightConstraints, GetUserMedia_success, GetUserMedia_error);)

Dobijte pristup medijskoj datoteci iz datoteke otvorene lokalno, to je nemoguće. Ako pokušate to učiniti, pogriješite:

NAVIGATORESERMEDIAERR (kod: 1, Permission_devenied: 1) "

Postavljamo rezultirajuću datoteku na poslužitelj, otvoren u pregledniku i kao odgovor na zahtjev koji se pojavio dopuštajući pristup fotoaparatu i mikrofonu.

Odaberite uređaje na koje će Chrome primiti, možete postavke ("Postavke"), prikazati napredne postavke ("Prikaži napredne postavke"), Privatnost odjeljka ("Osobni podaci"), gumb sadržaja ("postavke sadržaja"). U preglednicima Firefox i Opera, odabir uređaja izrađen je od padajućeg popisa izravno kada se pristup riješi.

Kada koristite HTTP protokol, dopuštenje će se tražiti svaki put kada primite pristup medijskom putovanju nakon učitavanja stranice. Prijelaz na HTTPS omogućit će vam da jednom prikažite upit, samo s prvim pristupom medijskom prekidaču.

Obratite pozornost na pulsirajući krug u ikonu na kartici i ikonu fotoaparata na desnoj strani adresne trake:

RTCMadiacowlection.

RTCMediconowlection je objekt dizajniran za uspostavljanje i prijenos medija preko mreža između sudionika. Osim toga, ovaj objekt je odgovoran za formiranje opisa Mediassia (SDP), dobivanje informacija o kandidatima leda za prolazak kroz NAT ili mrežne ekrane (lokalne i korištenje omamljenja) i interakciju s poslužiteljem za skretanje. Svaki sudionik mora imati jedan RTCMaicowlection za svaku vezu. Medijski snimci se prenose preko šifriranog SRTP protokola.

Skrenuti poslužitelji

Kandidati za led su tri vrste: domaćin, srflx i relej. Host sadrži informacije dobivene na lokalnoj razini, srflx - kako čvor traži vanjski poslužitelj (otunj) i relej - informacije za prometni promet putem poslužitelja za skretanje. Ako je naš čvor iza NAT-a, onda će domaćin kandidata sadržavati lokalne adrese i biti će beskoristan, kandidati će pomoći samo s određenim vrstama NAT-a i relej će biti posljednja nada da će preskočiti promet kroz srednji poslužitelj.

Primjer leda kandidata vrste domaćina, s adresom 192.168.1.37 i priključkom UDP / 34022:

A \u003d kandidat: 337499441 2 UDP 2113937151 192.168.1.37 34022 Typ Host Generation 0

Opći format za podešavanje Stun / skretanje poslužitelja:

VAR Servers \u003d ("OSCESERS": [("URL": "Stun: Stun.Stunprotocol.org: 3478"), ("URL": "Okreni: [Zaštićeno e-poštom]: port "," vjerodajnica ":" lozinka ")]);

Public Stun poslužitelji na internetu puno. Veliki popis, na primjer, je. Nažalost, oni rješavaju previše problema. Javno skretanje poslužitelja, za razliku od omamljenja, praktički ne. To je zbog činjenice da server za skretanje prolazi kroz sebe medijske snimke koji mogu značajno preuzeti i mrežni kanal i sam poslužitelj. Dakle, najlakši način povezivanja s poslužiteljima je da ga postavite sami (jasno je da će biti potrebna javna IP). Od svih poslužitelja, po mom mišljenju, najbolji RFC5766-poslužitelj. Pod njemu postoji čak i gotova slika za Amazon EC2.

S druge strane dok sve nije tako dobro kao što želim, ali postoji aktivan razvoj, i želim se nadati, nakon nekog vremena webrertc, ako se ne usporedi s Skype na kvalitetu prolaska kroz emitiranje adresa (NAT) i mrežni ekrani, zatim barem primjetni pristup.

Za RTCMadiacowlection, potreban je dodatni mehanizam za razmjenu kontrolnih informacija kako bi se uspostavila veza - iako to čini ove podatke, ali ih ne prenosi, a prijenos na druge sudionike treba provoditi odvojeno.


Izbor metode prijenosa dodijeljen je programeru - iako ručno. Čim će se održati razmjena potrebnih podataka, RTCMadiacowlection će se automatski uspostaviti medijske izvedbe (ako se ispostavi, naravno).

Model odgovora

Da biste uspostavili i promijenili prikazi medija, koristi se model ponude / odgovora. Opisano u RFC3264) i SDP protokolu (protokol opisa sesije). Koriste se i SIP protokol. Ovaj model razlikuje dva agenta: ponuđač - onaj koji generira SDP opis sesije kako bi stvorio novu ili modifikaciju postojećih (ponuda SDP-a), a odgovor je onaj koji prima SDP-opis sjednice od drugog agenta i susreće ga svoj opis sesije (odgovor SDP). U isto vrijeme, specifikacija zahtijeva više razine protokola (na primjer, gutljaj ili vlastiti na vrhu web utičnice, kao u našem slučaju) odgovoran za prijenos SDP između agenata.

Koji podaci moraju biti preneseni između dva RTCMaicowlection tako da mogu uspješno instalirati medijski promet:

  • Prvi sudionik koji pokreće priključak generira ponudu u kojoj se prenosi SDP strukturu podataka (isti protokol za istu svrhu koristi se u SIP), koji opisuje moguće karakteristike medija prekidača, koje će početi prijenos. Ovaj blok podataka mora se prenijeti na drugi sudionik. Drugi sudionik obrazuje odgovor, sa svojim SDP-om i prosljeđuje ga prvom.
  • A prvi i drugi sudionici obavljaju postupak određivanja mogućih kandidata za led, uz pomoć koji će drugi sudionik moći prenijeti na njih. Kao što su kandidati definirani, informacije o njima treba prenijeti drugom sudioniku.

Ponuda formacije.

Za formiranje ponude trebat ćemo dvije funkcije. Prvi će biti pozvan u slučaju uspješne formacije. Drugi parametar Forteoffer () metoda je funkcija povratnog poziva nazvana ako se pojavi pogreška (pod uvjetom da je lokalni tok već dostupan).

Dodatno će vam trebati dvojici rukovatelj događaja: onceCadidate prilikom određivanja novog kandidata za led i oNadstream pri spajanju prebacivanja medija s suprotne strane. Vratimo se u našu dosje. Dodajte u HTML nakon reda s elementima

I nakon niza s elementom


Također na početku JavaScript koda proglasit će globalnu varijablu za RTCPeerkonnection:

Var PC1;

Prilikom pozivanja RTCPeerconnection dizajnera morate odrediti Stun / skretanje poslužitelja. Pročitajte više o njima, pogledajte umetak; Dok su svi sudionici na istoj mreži, nisu potrebni.

Var poslužitelji \u003d null;

Opcije za pripremu ponude SDP

Var offERCoRonstraints \u003d ();

Prvi parametar Forteoffer () metoda je funkcija povratnog poziva nazvana kada je uspješna

Funkcija PC1_Createoffer_success ("PC1_createoffer_success (): ndesc.sdp: n" + esc.sdp + "opis:", desc); PC1.setlocaldescription (desc); // postavite RTCPeerconnection, formiran ponudom SDP pomoću metode setlocaldescription . // Kada se duga okrugla strana šalje na njegov odgovor SDP-a, morat će biti postavljen od strane setRemoteDescription // sve dok druga strana ne provodi, nemojte učiniti ništa // pc2_receveOffer (desc);)

Drugi parametar je funkcija povratnog poziva koja će biti pozvana u slučaju pogreške

Funkcija PC1_Createoffer_error (console.log ("PC1_createoffer_success_error (): Pogreška:", greška);)

I izjaviti funkciju povratnog poziva da će se kandidati za led prenositi kao što su utvrđeni:

Funkcija PC1_OneCadidate (događaj) (console.log ("PC1_OneCadidat (): n" + event.candidad.candidad.replace ("r", ""), događaj.candidate); // dok je druga strana je Nije implementiran, ne činiti ništa // pc2.addiceCandidatida (novi RTciceCadidat (događaj.candidatida);))))

Kao i funkcija povratnog poziva za dodavanje medija prekidača s suprotne strane (za budućnost, jer dok imamo samo jedan RTCPeerconnection):

Funkcija PC1_ONAddstream (console.log ("PC_ONAddstream ()"); remotevideo1.src \u003d url.createobkurl (događaj.stream);)

Kada kliknete na gumb FREEOFFER, stvorit ćete RTCPeerkNowlection, postaviti metode oznaka ionadstreada i zahtijevati formiranje ponude SDP pozivanjem metode FREEOFFER ():

Funkcija FREECHERFER_CLICK () (console.log (crosheffer_click () "); PC1 \u003d novi WebkitrtcPeerconnection (poslužitelji); // Stvaranje RTCPeerconnection PC1..OneCandidad \u003d PC1_OneCadidadaj; // obrada povratnog poziva za led kandidate PC1.onaddstream \u003d PC1_onadddstream; // funkcija povrata uzrokovana izgledom medija s druge strane. Do sada nema PC1.addstream (lokalstream); // dajemo lokalne medijske dijelove (pretpostavljamo da je već primljena) PC1.Createoffer (// i zapravo tražeći formiranje ponude PC1_createoffer_success, PC1_createoffer_error, offERCoRonstraints););)

Spremite datoteku kao Rtcttest2.html, postavite ga na poslužitelju, otvorite ga u pregledniku i pogledajte u konzolu, koji se podaci formiraju tijekom njegovog rada. Drugi videozapis još se neće pojaviti, jer je sudionik samo jedan. Podsjetimo, SDP - opis parametara Mediassia, dostupnih kodeka, medijskih performansi i kandidata za led su mogući opcije za povezivanje s ovim sudionikom.

Formiranje odgovora SDP-a i kandidata za led

I ponuda SDP-a, i svaki od ledenih kandidata mora se prenijeti na drugu stranu i tamo nakon što je primio RTCPeerkonnection kako bi nazvao metode setremotedscription za ponudu SDP-a i dodatka za svaki ledeni kandidat koji je izveden s suprotne strane; Slično tome, u suprotnom smjeru za odgovaranje s SDP-a i udaljenim ledenim kandidatima. Odgovor SDP-a se formira slično za ponudu; Razlika je u tome što se metoda FREEOFFER poziva, ali metoda kreacije i prije ovog RTCPeerconnection metoda prenosi s postupkom setRemoteDedscription SDP primio od pozivatelja.

Dodajte još jedan video element u HTML:

I globalnu varijablu za drugi RTCPeerkonnection pod objavom prvog:

Var PC2;

Ponuda za obradu i odgovor SDP-a

Odgovor SDP formacije je vrlo sličan ponudi. U funkciji povratnog poziva uzrokovana uspješnim formiranjem odgovora, slično ponudi, dajte lokalni opis i dajte prvi sudionik primljen od strane odgovora SDP-a:

Funkcija PC2_Createdswer_successRiption (Desc); console.log ("PC2_cracteanswer_success ()", desc.sdp); pc1.setremoteDedscription (desc);)

Pozivna funkcija koja se zove u slučaju pogreške u formiranju odgovora je potpuno sličan ponudi:

Funkcija PC2_Createdsher_error (Error) (console.log ("PC2_cracteanswer_error ():", greška);)

Odgovorite na opcije formiranja SDP-a:

Var angaslations \u003d ("obavezno": ("offertoreceevediodio": istinito, "offertorevevideo": istina);

Po primitku ponude, mi ćemo stvoriti RTCPeerkonnection i formatirati odgovor na sličan način ponuditi:

Funkcija PC2_receSevoffer (desc) (conselofeor (), opis); Kada se događaj pojavi na ledenom kandidatu PC2.onaddstream \u003d pc_onaddstream; // kada je tok to poveže s HTML-om

Da bi u našem primjeru prenijeli ponudu SDP-a od prvog sudionika na drugi, mi se odjavljujemo u funkciji PC1 fREEOFFER.uspjeh () String poziva:

PC2_Receivoffer (desc);

Za provedbu obrade kandidata za led, mi nesumnjivo događaje spremnosti ledenih kandidata prvog sudionika PC1_OneCandidata () na prijenos na drugi:

PC2.addiceCadidadati (novi RTCECceCadidat (događaj.candidatida));

Događaj Handler spremnosti drugog sudionika Ice kandidata je prvo:

Funkcija PC2_OneCadidate (događaj) (console.log ("PC2_OneCadidat ():", događaj.candidad.candidate); PC1.addiceCadidadate (novi RTCiceCandidat (događaj.candidate));))))

Značajka povrata za dodavanje prebacivanja medija iz prvog sudionika:

Funkcija PC2_ONAddstream (console.log ("PC_onaddstream ()"); remotevideo2.src \u003d url.createBectll (događaj.stream);)

Završetak veze

Dodajte još jedan gumb na HTML

I funkcija za dovršetak veze

Funkcija BTNHANGUPCLICK () (// isključite lokalni video iz HTML elemenata

Spremite kao Rtcttest3.html, postavite na poslužitelju i otvorite u pregledniku. Ovaj primjer implementira bilateralni prijenos medijskih performansi između dva RTCPeerconnection unutar jednog preglednika oznake. Kako bi organizirali razmjenu ponude i odgovora SDP-a putem mreže, kandidati za led između sudionika i drugih informacija bit će potrebni umjesto izravnih postupaka izazova za provedbu razmjene između sudionika s bilo kojim prijevozom, u našem slučaju - web utičnice.

Ekrana

GetUserMedia značajka Možete snimiti i zaslon i emitirati kao mediaStream, navodeći sljedeće parametre:

VAR MediaStreamConstraints \u003d (Audio: FALSE, VIDEO: (Obvezni: (Chromemediasource: "Zaslon"), opcionalno :));

Da biste uspješno pristupili zaslonu, potrebno je izvršiti nekoliko uvjeta:

  • omogućite zastavu screenshot u Getuusermedia () u Chrome: // zastave /, Chrome: // zastavice /;
  • izvorna datoteka mora preuzeti HTTPS (SSL podrijetlo);
  • protok zvuka ne smije se tražiti;
  • ne bi trebalo biti nekoliko zahtjeva u jednom kartici preglednika.

Knjižnice za WEBRTC.

Iako WebTC također nije dovršen, već postoji nekoliko knjižnica na temelju njega. JSSIP je dizajniran za stvaranje soft splas preglednika koji radi s SIP prekidačima, kao što su zvjezdica i camalio. Peerjs će pojednostaviti stvaranje P2P mreža za razmjenu podataka, a Holla će smanjiti opseg razvoja potrebne za P2P komunikaciju iz preglednika.

Node.js i socket.io.

Kako bi se organizirala razmjena SDP-a i ledenih kandidata između dva RTCPeerkonnection putem mreže, koristite node.js s modulom socket.io.

Instaliranje najnovije stabilne verzije node.js (za Debian / Ubuntu) opisan

$ sudo apt-get instalira Python-Software-svojstva Python G ++ Napravite $ Sudo Add-apt-Repozitorij PPA: Chris-Lea / nede.js $ sudo apt-get ažurirati $ sudo apt-dobiti instalirati nodejs

Opisana je instalacija za ostale operativne sustave

Ček:

$ Echo "sys \u003d zahtijevaju" Sys.Puts ("Test poruka"); " \u003e Nodetest1.js $ Nodejs Nodetest1.js

Korištenje NPM (upravitelj paketa čvorova), instalirajte socket.io i dodatni express modul:

$ NPM Instalacija socket.io Express

Provjerite stvaranjem nodteest2.js datoteku za poslužitelj dio:

$ Nano Nodetest2.js VAR App \u003d Zahtijevati ("Express") (), poslužitelj \u003d zahtijevaju ("http"). Createweerver (app), io \u003d zahtijevaju ("socket.io"). Slušajte (poslužitelj); Poslužitelj.Listen (80); // Ako je priključak 80 je besplatan za app.get ("/", funkcija (REQ, OIE) (// prilikom pristupa res.Sendfile korijenskoj stranici (__ Dirname + "/nodetest2.html"); // odustati od HTML datoteka)); i.sockets.on ("veza", funkcija (utičnica) (// pri spajanju Socket.EMIT ("događaj poslužitelja", (Hello: "World"); // Pošalji poruku Socket.on (događaj klijenta ") , Funkcija (podaci) (// i proglasite rukovatelj događaja po primitku poruke iz klijentske console.log (podaci);));));

I nodetest2.html za klijenta:

$ nano nodetest2.html.

Pokrenite poslužitelj:

$ sudo nodejs nodetest2.js

i otvoriti http: // localhost: 80 stranicu (ako se radi na lokalnoj razini na 80. portu) u pregledniku. Ako je sve uspješno, u JavaScript konzoli preglednika ćemo vidjeti razmjenu događaja između preglednika i poslužitelja kada je spojen.

Razmjena informacija između RTCPeerkonnection kroz web utičnice

Dio klijenta

Spremite naš glavni primjer (RTCDEM3.HTML) pod novim imenom RTCDEMA4.HTML. Spojite socket.IO knjižnica u stavci:

I na početku JavaScript skripte - Povežite se na web utičnice:

VAR Socket \u003d iO.Connect ("http: // localhost");

Zamijenit ću izravni poziv funkcija drugog sudionika za slanje putem web utičnice:

Funkcija freeoffer_success (desc) (opis); socket.emit ("ponuda", desc); ...) Funkcija PC2_createanswer_success (desc) (... // PC1.setremotededesription (desc); utičnica. Desc);) funkcija PC1_OneCacacaland (događaj) (... // PC2.addiceCandidatida (novi RTCECceCandidat (događaj.candidatidate); socket.emit ("ICE1", Event.candidatida); ... // PC1.addiceCandiced (novi RTCiceCandidat (događaj.candidate); socket.emit ("ICE2", Event.candidatida); ...) ...)

U funkciji hangup (), umjesto izravnog poziva za funkcije drugog sudionika, neka nam dati poruku putem web utičnice:

Funkcija BTNHANGUPCLICK () (... // Remotevideo2.src \u003d ""; PC2.close (); PC2 \u003d Null; Socket.emit ("Handup", ());)

I dodajte rukovatelje poruka za poruke:

Socket.on ("ponuda", funkcija (podaci) ("Socket.on (" ponuda "):", podaci); PC2_receveoffer (podaci);)); Socket.on ("odgovor", funkcija (podaci) (e console.log ("socket.on": ", podaci); pc1.setremoteDedcrt (podaci);)) Socket.on ("Ice1", funkcija ("Socket.on" ("ICE1"): ", podaci); PC2.addiceCandidat (novi RTciceCandidat (podaci));)); Utičnica. Socket.on ("hangup", funkcija ("console.log" ("socket.on (" Handup "):", podaci); Remotevideo2.Src \u003d ""; PC2.close (); PC2 \u003d null;)) ;

Dio poslužitelja

Na strani poslužitelja, spremite Nodteest2 datoteku pod novim imenom RTCEST4.JS i unutar funkcije iO.Sockets.On ("veza", funkcija (utičnice) (...) Dodaj recepciju i slanje korisničkih poruka:

Socket. ("Ponuda", podaci); // ako je bilo potrebno poslati poruku na sve veze, // pored pošiljatelja: // soket.froascast.emit ("ponuda", podatke);)); socket.on ("odgovor", funkcija (podaci) (Socket.emit ("odgovor", podaci);)); socket.on ("ICE1", funkcija (podaci) (socket.emit ("ICE1", podaci);)); socket.on ("ICE2", funkcija (podaci) (Socket.emit ("Ice2", podaci);)); socket.on ("hangup", funkcija (podaci) (socket.emit ("hangup", podaci);));

Osim toga, promijenit ćete naziv HTML datoteke:

// res.sendfile (__ dirname + "/nodetest2.html"); // dati html datoteku res.sendfile (__ dirname + "/rtcttcest4.html");

Početni poslužitelj:

$ sudo nodejs nodetest2.js

Unatoč činjenici da se kod oba klijenata obavlja unutar iste oznake preglednika, sva interakcija između sudionika u našem primjeru u potpunosti se provodi putem mreže i "širenje" više ne zahtijevaju posebne poteškoće. Međutim, ono što smo učinili bilo je vrlo jednostavno - te tehnologije i dobre su za njihovu jednostavnost korištenja. Neka ponekad obmanjuju. Konkretno, nećemo zaboraviti da bez Stun / skretanje poslužitelja, naš primjer neće moći raditi u prisutnosti prijevoda i mrežnih ekrana.

Zaključak

Rezultirajući primjer je vrlo uvjetno, ali ako imate malo univerzalize rukovatelja događaja, tako da se ne razlikuju od poziva i nazvane zabave, umjesto dva objekta PC1 i PC2 kako bi se RTCPEERKonnection polja i implementira dinamičko stvaranje i uklanjanje elemenata

Može se pretpostaviti da je vrlo brzo zahvaljujući WebTC-u bit će udar ne samo u našem podnošenju glasovnih i video veza, već i kako doživljavamo internet u cjelini. WEBRTC se nalazi ne samo kao tehnologija za pozive iz preglednika u preglednik, već i kao komunikacijska tehnologija u stvarnom vremenu. Video poziv, koji smo rastavili, samo mali dio mogućih opcija za uporabu. Već postoje primjeri ekrana (zaslovanje) i suradnju, pa čak i P2P mreže isporuke sadržaja na temelju preglednika koji koriste RTCdatachannel.