Webová aplikácia s WEBRTC. Technológia WEBRTC: Audio a video Chat v prehliadači. WEBRTC Tajomstvo: Ako dodávatelia profitujú z prelomovej webovej technológie

WEBRTC vám umožní implementovať audio / video komunikáciu v reálnom čase prostredníctvom prehliadača

V tejto téme vám poviem, ako implementovať najjednoduchšiu aplikáciu WEBRTC.

1. GETUSERMEDIA - Získajte prístup k mediálnym zariadeniam (mikrofón / webová kamera)

Nič zložité, s pomocou 10 Javascript kódových riadkov môžete vidieť a počuť sa v prehliadači (demo).

Vytvoriť index.html :

CSS3 filtre môžete aplikovať na video element.

Uchopte tu, že v tejto fáze vývoja WEBRTC nemôžem povedať prehliadač "Táto stránka, ktorú verím, vždy ho nechajte prístup k fotoaparátu a mikrofónu" a musíte stlačiť tlačidlo Povoliť po každom otvorení / aktualizácii stránky.

No, nebude to nadbytočné, že ak ste dostali prístup k fotoaparátu v jednom prehliadači, druhý, keď sa pokúsite získať prístup, dostane povolenie_dened.

2. Signalizačný server (signálový server)

Tu porušujem postupnosť väčšiny "WEBRTC Začíname" pokyny, pretože sú druhým krokom na preukázanie schopností WEBRTC na jedného klienta, ktorý osobne len pridal zmätok k vysvetleniu.

Signálny server je koordinačným centrom WEBRTC, ktorý poskytuje komunikáciu medzi klientmi, inicializáciou a zatvorením pripojenia, chybových správ.

Signálny server v našom prípade je node.js + socket.io + uzol-static, bude počúvať port 1234.
Navyše, uzol-static môže dať index.html, čo urobí našu aplikáciu čo najjednoduchšie.

V priečinku aplikácie nainštalujete potrebné:

NPM Install Socket.io NPM Install Node-static

Dnes je WEBRTC horúcou technológiou pre streamovanie zvuku a videa v prehliadačoch. Konzervatívne technológie, ako sú stránky HTTP a blesk, sú vhodnejšie na distribúciu zaznamenaného obsahu (video na požiadanie) a výrazne nižšie ako WEBRTC z hľadiska v reálnom čase a online vysielaní, t.j. Tam, kde sa vyžaduje minimálne oneskorenie videa, čo umožňuje publikum vidieť, čo sa deje "žiť".

Možnosť vysoko kvalitnej komunikácie v reálnom čase je odvodená z samotného architektúry WEBRTC, kde sa protokol UDP používa na prepravu video tokov, čo je štandardným základom pre vysielanie videa s minimálnymi oneskoreniami a široko používané v komunikačných systémoch v reálnom čase.

Oneskorenie komunikácie je dôležité v on-line vysielacích systémov, webinároch a iných aplikáciách, kde sa vyžaduje interaktívna komunikácia so zdrojom videa, koncoví používatelia sa vyžaduje a vyžaduje riešenie.

Ďalším vážnym dôvodom na vyskúšanie WEBRTC je určite trend. Každý Android Chrome Browser dnes podporuje túto technológiu, ktorá zaručuje milióny zariadení pripravených na prezeranie vysielania bez inštalácie akéhokoľvek ďalšieho softvéru a konfigurácií.

S cieľom skontrolovať technológiu WEBRTC v prípade a spustiť jednoduché online vysielanie na ňom, použili sme server na serveri FlashPhoner WeBrtc Media & Broadcasting Server. Vo funkciách, schopnosť vysielať WEBRTC Streams v jednom až do mnohých režimov "(One-to-Maany), ako aj podpora pre IP kamery a video monitorovacie systémy prostredníctvom protokolu RTSP; V tomto prehľade sa zameriavame na webové vysielania a ich funkcie.

Inštalácia servera WEBRTC Media & Broadcasting

Keďže systém verzií servera nebola pre systém Windows, nechcela sa nainštalovať VMware + Linux virtuálny typ, test online vysielanie na domácom počítači Windows nefungovali. S cieľom ušetriť čas sa rozhodol vziať inštancie na hosting cloud, ako je toto:

Bol to CentOS X86_64 verzia 6.5 bez akéhokoľvek predinštalovaného softvéru v dátovom centre Amsterdamu. Tak, všetko, čo sme dostali, je k dispozícii je server a ssh prístup k nej. Pre tých, ktorí sú oboznámení s príkazmi Console Linux, inštalácia servera WEBRTC sľubuje, že pôjde ľahko a bezbolestne. Takže to, čo sme urobili:

1. Stiahnite si archív:

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

2. Rozbaľovať

$ TAR -XZF Download-WCS5-Server.tar.gz

3. Inštalácia:

$ Cd flashfonerwebcallserver.

Počas inštalácie vstupu IP adresy servera: xxx.xxx.xxx.xxx

4. Aktivujte licenciu:

$ Cd / usr / local / flashfonerwebcallserver / bin

$. / Aktivácia

5. Spustite server WCS:

$ Service WebCallServer Začiatok

6. Skontrolujte protokol:

$ chvost - f / asr/local/flashphonerwebcallserver/logs/flashphphoner_manager.log

7. Skontrolujte, či sú zavedené dva procesy:

$ Ps aux | Grep flashfoner.

Proces inštalácie je dokončený.

Testovanie online vysielania WEBRTC

Testovacie vysielania sa ukázali byť neupravené. Okrem servera je webový klient, ktorý sa skladá z tucet Javascript, HTML a CSS súborov a bol nasadený na priečinok / var / www / html v inštalačnej fáze. Jediná vec, ktorá musela byť vykonaná, je zadať adresu IP servera na konfiguráciu flashphoner.xml, aby sa webový klient mohol pripojiť k serveru HTML5 Webscets Server. Popíšeme testovací proces.

1. Otvorte stránku Index.html Test Client Client v prehliadači Chrome:

2. Ak chcete spustiť vysielanie, musíte kliknúť na tlačidlo "Štart" v strede obrazovky.
Predtým, ako urobíte, musíte sa uistiť, že webová kamera je pripojená a pripravená na prácu. Neexistujú žiadne špeciálne požiadavky na webovú kameru, napríklad použili štandardnú kameru zabudovanú do notebooku s rozlíšením 1280 × 800.

Chrome Browser bude určite klásť prístup k fotoaparátu a mikrofónu, aby užívateľ pochopil, že jeho video bude odoslané na internetový server a umožnila ho urobiť.

3. Rozhranie je úspešným vysielaním video toku z fotoaparátu na serveri WEBRTC. V pravom hornom rohu indikátor označuje, že prietok prejde na server, v spodnom rohu tlačidla STOP prestaňte odosielať video.

Venujte pozornosť odkazu v dolnom poli. Obsahuje jedinečný identifikátor tohto vlákna, takže ktokoľvek sa môže pripojiť k sledovaniu. Stačí otvoriť tento odkaz v prehliadači. Ak chcete kopírovať do schránky, musíte kliknúť na tlačidlo "Kopírovať".

V reálnych aplikáciách, ako sú webináre, prednášky, online vysielania alebo interaktívne televízne vývojári budú musieť realizovať distribúciu tohto identifikátora do určitých skupín divákov, aby sa pripojili k požadovaným tokom, ale toto je logika aplikácie. Server WEBRTC Media & Broadcasting Server netýka sa, ale iba distribučné video.

5. Pripojenie je vytvorené a divák vidí prietok na obrazovke. Teraz môže poslať odkaz na niekoho iného, \u200b\u200bprestaňte reprodukovať prúd alebo zapnúť režim celej obrazovky pomocou ovládacích prvkov v pravom dolnom rohu.

Výsledky testov WEBRTC Online prekladový server

Počas testov vyzeralo oneskorenie dokonalé. Ping do dátového centra predstavoval asi 100 milisekúnd a oneskorenie nebolo odlíšiteľné okom. Odtiaľ sa dá predpokladať, že skutočné oneskorenie je rovnaké 100 plus mínus niekoľko desiatok milisekunds na tlmivý čas. Ak sa porovnáte s Flash Video: V takýchto testoch sa blesk správať tak dobre ako WEBRTC. Takže, ak na podobnej sieti presunúť ruku, potom pohyb na obrazovke možno vidieť len cez jednu / dve sekundy.

Pokiaľ ide o kvalitu, poznamenávame sa, že na pohybe niekedy môžete rozlišovať kocky. To zodpovedá povahe kodeku VP8 a jeho hlavnej úlohe - poskytnúť video spojenie v reálnom čase s prijateľnou kvalitou a bez oneskorenia v komunikácii.

Server je dostatočne jednoduchý na inštaláciu a konfiguráciu, nevyžaduje okrem závažných zručností okrem znalostí Linuxu na úrovni pokročilého používateľa, ktorý dokáže vykonať príkazy z konzoly cez SSH a použite textový editor. V dôsledku toho sa nám podarilo vytvoriť online vysielanie jedného medzi prehliadačmi. Pripojenie ďalších divákov na potok tiež nespôsobil problémy.

Kvalita vysielania sa ukázala byť celkom prijateľná pre webináre a online vysielania. Jediná vec, ktorá spôsobila niektoré otázky, je rozlíšenie videa. Fotoaparát podporuje 1280 × 800, ale rozlíšenie na testovacom obraze je veľmi podobné 640 × 480. Zdá sa, že vývojári musia objasniť túto otázku.

Video testovanie vysielania z webovej kamery
Cez WEBRTC Server

WEBRTC (Web Real Time Communications) je štandard, ktorý popisuje prenos streamovania audio dát, video dát a obsahu z prehliadača a do prehliadača v reálnom čase bez inštalácie plug-ins alebo iných rozšírení. Štandard umožňuje otočiť prehliadač do terminálu terminálu terminálu videokonferencie, stačí otvoriť webovú stránku, ak chcete začať komunikovať.

Čo je WEBRTC?

V tomto článku budeme zvážiť všetko, čo potrebujete vedieť o technológii WEBRTC pre bežného používateľa. Zvážte výhody a nevýhody projektu, odhaliť niektoré tajomstvá, povieme vám, ako to funguje, kde a čo sa aplikuje WEBRTC.

Čo potrebujete vedieť o WEBRTC?

Vývoj štandardov a technológií Video Communications

Sergey Yutzaytis, Cisco, video + konferencia 2016

Ako WEBRTC funguje

Na strane klienta

  • Užívateľ otvorí stránku obsahujúcu HTML5 tag
  • Prehliadač požiada o prístup na webovú kameru a používateľský mikrofón.
  • JavaScriptový kód na stránke Užívateľská stránka ovláda parametre pripojenia (IP adries a WEBRTC Server alebo iná zákazníci WEBRTC) obísť NAT a Firewall.
  • Pri prijímaní informácií o partnerstve alebo potoku s konferenciou sa prehliadač začne prispôsobiť používaným audio a video kodekmi.
  • Spustí sa proces kódovania a prenosu streamovacích údajov medzi klientmi WEBRTC (v našom prípade medzi prehliadačom a serverom).

Na strane servera WEBRTC

Na výmenu údajov medzi oboma účastníkmi sa video server nevyžaduje, ale ak potrebujete kombinovať niekoľko účastníkov na jednej konferencii, server je potrebný.



Video server dostane mediálnu prevádzku z rôznych zdrojov, previesť ho a poslať ho používateľom, ktorí používajú WEBRTC ako terminál.

Aj WEBRTC Server dostane mediálnu návštevnosť z WEBRTC Peters a previesť na svojich účastníkov konferencie, ktorí používajú aplikácie pre stolové počítače alebo mobilné zariadenia, ak existujú.

Výhody štandardného

  • Nevyžaduje sa žiadna inštalácia.
  • Veľmi kvalitná komunikácia vďaka:
    • Použitie moderného videa (VP8, H.264) a Audio Codecs (OPUS).
    • Automatické nastavenie kvality prúdu za podmienok pripojenia.
    • Zabudovaný echo a systém redukcie hluku.
    • Automatické nastavenie citlivosti mikrofónov účastníkov (ARU).
  • Vysoká bezpečnosť: Všetky pripojenia sú chránené a šifrované podľa protokolov TLS a SRTP.
  • K dispozícii je vstavaný mechanizmus zachytávania obsahu, ako je desktop.
  • Schopnosť implementovať akékoľvek rozhranie HTML5 a JavaScript.
  • Schopnosť integrovať rozhranie s ľubovoľnými spätnými systémami pomocou weboveswets.
  • Projekt otvoreného zdroja - môže byť implementovaný vo vašom produkte alebo službe.
  • Skutočná platforma: Rovnaká aplikácia WEBRTC bude fungovať rovnako dobre na akomkoľvek operačnom systéme, ploche alebo mobilnom za predpokladu, že prehliadač podporuje WEBRTC. To výrazne šetrí zdroje na vývoj softvéru.

Nevýhody štandardu

  • Pre organizáciu skupiny audio a videokonferencie sa vyžaduje server VKS, ktorý by premiešal video a zvuk od účastníkov, pretože Prehliadač nevie, ako synchronizovať niekoľko prichádzajúcich tokov medzi sebou.
  • Všetky riešenia WEBRTC sú nekompatibilné, pretože Štandard len popisuje iba metódy prenosu videa a zvuku, takže implementácia metód adresovania účastníkov, sledovanie ich dostupnosti, správ a súborov, plánovania a iných dodávateľov.
  • Inými slovami, nebudete môcť volať z aplikácie WEBRTC jedného developer v aplikácii WEBRTC iného developer.
  • Miešanie skupinových konferencií si vyžaduje veľké výpočtové zdroje, takže tento typ videohovoru vyžaduje nákup plateného predplatného alebo investovania do svojej infraštruktúry, kde sa pre každú konferenciu vyžaduje 1 fyzické jadro moderného procesora.

WEBRTC Tajomstvo: Ako dodávatelia profitujú z prelomovej webovej technológie


Tsakhi Levent Levi, BlogGeek.ME, video + konferencia 2015

WEBRTC pre trh VKS

Zvýšenie počtu terminálov VKS

Technológia WEBRTC mala silný vplyv na vývoj trhu VKS. Po opustení prvého prehliadača s podporou WEBRTC v roku 2013 sa potenciálny počet videokonferenčných terminálov po celom svete okamžite zvýšil o 1 miliardu zariadení. V podstate sa každý prehliadač stal terminálom CSM, nie je horší ako jeho hardvérové \u200b\u200banalógy z hľadiska ponuky.

Použitie v špecializovaných riešeniach

Používanie rôznych knižníc Javascript a WEBRTC Cloud Service API vám umožňuje jednoducho pridať podporu video odkazu na všetky webové projekty. Predtým, na prenos údajov v reálnom čase vývojári, bolo potrebné študovať zásady protokolov a využívať vývoj iných spoločností, ktoré najčastejšie požadovali dodatočné licencie, ktoré zvýšili náklady. WEBRTC sa už aktívne používa v "Call Site", "Online Chat Support" atď.

Ex-užívatelia Skype pre Linux

V roku 2014 spoločnosť Microsoft oznámila ukončenie podpory projektu Skype pre Linux, čo spôsobilo veľké podráždenie z IT špecialistov. Technológia WEBRTC nie je viazaná na operačný systém a implementovaný na úrovni prehliadača, t.j. Používatelia Linuxu budú môcť vidieť produkty a služby založené na WEBRTC Full-Fledged Skype nahradenie.

Súťaž s bleskom.

WEBRTC a HTML5 sa stali fatálnou úderom pre technológiu Flash, ktorá a tak sa obávali o ich ďaleko z najlepších rokov. Od roku 2017, popredné prehliadače oficiálne prestali podporovať flash a technológie konečne zmizli z trhu. Ale musíte dať flash splatné, po tom všetkom to bol on, kto vytvoril webový konferenčný trh a navrhol technické príležitosti pre živú komunikáciu v prehliadačoch.

Video Prezentácia WEBRTC.

DMITRY ODINTSOV, TRUECONF, video + konferencia október 2017

Kodeky v WEBRTC.

Audio Codec

Na komprimovanie audio dopravy v WEBRTC sa používajú OPUS a G.711 CODECS.

G.711. - Najstarší hlasový kodek s vysokou bitovou rýchlosťou (64 kbps), ktorá sa najčastejšie používa v tradičných telefónnych systémoch. Hlavnou výhodou je minimálny výpočtový zaťaženie z dôvodu použitia algoritmov kompresie svetla. Kodek je charakterizovaný nízkou úrovňou kompresie hlasového signálu a počas komunikácie nerobí dodatočné audio meškanie.

G.711 je podporovaný veľkým počtom zariadení. Systémy, v ktorých sa tento kodek používa, je ľahšie použitie ako tie, ktoré sú založené na iných audio kódoch (G.723, G.726, G.728 atď.). Z hľadiska kvality G.711 sa odhadovalo 4.2 v testovaní MOS (odhad v rozsahu 4-5 je najvyšší a znamená dobrú kvalitu, podobne ako kvalita prenosu hlasovej dopravy v ISDN a ešte vyššia).

Opus. - Toto je kodek s nízkym oneskorením kódovania (2,5 ms až 60 ms), podpora pre variabilnú bitrázu a vysokú úroveň kompresie, ktorá je ideálna na prenos audio signálu streamingu v sieťach s variabilnou šírkou pásma. Opus je hybridný roztok, ktorý kombinuje najlepšie vlastnosti hodvábne kodeky (Hlasová kompresia, riešenie skreslenia ľudského reči) a Celt (Audio dátové kódovanie). Kodek je v slobodnom prístupe, vývojári, ktorí ho používajú, nemusia platiť zrážky držiteľom autorských práv. V porovnaní s inými audio kódmi, Opus, nepochybne vyhrá v mnohých ukazovateľoch. On zatienil celkom populárne kodeky s nízkym bitovým káblom, ako je MP3, Vorbis, AAC LC. OPUS obnoví najviac blízko k pôvodnému "obrazu" zvuku ako AMR-WB a Speex. Za týmto kodekom - budúcnosť, čo je dôvod, prečo to technológie WEBRRTC zahrnuli v povinnom rozsahu podporovaných Audiostandartov.

Video Codec

Výber videopódu pre WEBRTC trvalo niekoľko rokov od vývojárov, v dôsledku toho sme sa rozhodli použiť H.264 a VP8. Takmer všetky moderné prehliadače podporujú obe kodeky. Videokonferenčné servery pre prácu s WEBRTC dostatočne podporujú len jednu.

Vp8. - Bezplatné video kódované s otvorenou licenciou, sa rozlišuje vysokou rýchlosťou dekódovania video prúdu a zvýšenú odolnosť voči strate rámov. Kodek je univerzálny, je ľahké zaviesť do hardvérových platforiem, takže veľmi často ho používajú vývojári videokonferenčných systémov v ich produktoch.

Platené video kodek H.264. Stal sa o niečo skôr ako jeho kolega. Toto je kodek s vysokým stupňom kompresie video toku pri zachovaní vysokokvalitného videa. Vysoká prevalencia tohto kodeku medzi hardvérovými systémami videokonferencie zahŕňa jeho použitie v štandarde WEBRTC.

Google a Mozilla aktívne propagujú kodek VP8 a Microsoft, Apple a Cisco - H.264 (aby zabezpečili kompatibilitu s tradičnými videokonferenčnými systémami). A tu je veľmi veľkým problémom pre vývojárov Cloud WeBRTC riešenia, pretože ak v konferencii používajú všetci účastníci jeden prehliadač, konferencia je dostatočná na zmesi raz s jedným kodekom, a ak existujú rôzne prehliadače a existujú safari / hrana Prehliadače, potom bude konferencia bude musieť byť zakódovaná dvakrát rôznymi kodekmi, čo zdvojnásobí systémové požiadavky pre mediálny server a ako výsledok, náklady na predplatné služby WEBRTC.

WEBRTC API.

Technológia WEBRTC je založená na troch hlavných API:

  • (Zodpovedný za prijatie zvukového a video signálu webového prehliadača z fotoaparátu alebo používateľa).
  • RTCPEERCONDING. (Zodpovedný za spojenie medzi prehliadačmi pre "výmenu" prijatého z fotoaparátu, mikrofónu a desktopu, mediántov. Tiež v "clá" tohto rozhrania API vstupuje do spracovania signálu (čistenie z outsiderov, nastavenie hlasitosti mikrofónu) a kontrolu použité audio a video kódov).
  • Kanál RTCDATA (Poskytuje dvojstranný prenos údajov prostredníctvom zavedeného spojenia).

Pred prístupom k mikrofónu a užívateľskej kamere sa prehliadač požaduje povolenie. V prehliadači Google Chrome môžete nastaviť vopred v časti "Nastavenia" v časti Opera a Firefox, výber zariadení sa vykonáva priamo v čase prístupu z rozbaľovacieho zoznamu. Žiadosť o uznesenie sa vždy zobrazí pri používaní protokolu HTTP a raz, ak používate HTTPS:


RTCPEERCONDING.. Každý prehliadač zúčastňujúci sa na konferencii WEBRTC musí mať prístup k tomuto objektu. Vďaka používaniu RTCpeerconnects môže byť Mediaden z jedného prehliadača použitý aj prostredníctvom obrazoviek NAT a Sieť. Na úspešné prenos mediálnych porcií by účastníci mali vymieňať tieto údaje pomocou dopravy, ako sú webové zásuvky:

  • Účastník iniciátora vysiela druhý účastník ponuky-SDP (dátovej štruktúre s charakteristikami toku médií, ktorý bude prenášať);
  • druhý účastník tvorí "odpoveď" - odpoveď-SDP a postúpi ju iniciátorovi;
  • potom sa výmena ľadových kandidátov organizuje medzi účastníkmi, ak existuje (ak sú účastníci za NAT alebo sieťové obrazovky).

Po úspešnom ukončení tejto výmeny medzi účastníkmi sa organizuje presun výkonov médií (audio a video).

Kanál RTCDATA. Podpora protokolu dátového kanála sa objavila v prehliadačoch relatívne nedávno, preto sa toto API môže zobraziť výlučne v prípadoch používania WEBRTC v Mozilla Firefox 22+ a prehliadačoch Google 26+. Účastníci s ním môžu v prehliadači zdieľať textové správy.

Pripojenie WEBRTC.

Podporované prehliadače pracovnej plochy

  • Google Chrome (17+) a všetky prehliadače na báze chrómového motora;
  • Mozilla Firefox (18+);
  • Opera (12+);
  • Safari (11+);

Podporované mobilné prehliadače pre Android

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

WEBRTC, Microsoft a Internet Explorer

Veľmi dlho si spoločnosť Microsoft udržiaval ticho o podpore WEBRTC v Internet Explorer av jeho novom prehliadači. Chlapci z Redmondu nemajú naozaj radi poskytovať technológie užívateľom, že nekontrolujú, to je taká politika. Ale postupne sa prípad presunul z mŕtveho bodu, pretože WEBRTC ďalej nebolo možné ignorovať a bol oznámený projekt ORTC odvodený z štandardu WEBRTC.

Podľa vývojárov, ORTC je rozšírením štandardu WEBRTC so zlepšenou sadou API založeného na Javascript a HTML5, ktorá sa premieta do normálneho jazyka znamená, že všetko bude rovnaké, len na kontrolu štandardu a jeho vývoj bude Microsoft A nie Google. Sada kodekov je rozšírený o podporu pre H.264 a niektoré zvukové kódy série G.7xx používané v telefónnych a hardvérových systémoch VKS. Môže sa objaviť vstavaná podpora pre RDP (pre prenos obsahu) a odosielanie správ. Mimochodom, používatelia programu Internet Explorer nie sú šťastní, podpora ORTC bude len na okraji. No, prirodzene, takáto sada protokolov a kodekov s nízkou krvou je vložená s Skype pre podnikanie, ktorý otvára ešte viac obchodných aplikácií pre WEBRTC.