Video pozivi i streaming u stvarnom vremenu s WebRTC-om i SDK-ovima

Ako gradite JavaScript sporedni projekat A ako vam trebaju video pozivi, normalno je da imate nedoumice: Trebam li koristiti čisti WebRTC, SDK poput Agore, Twilia, Muxa ili Zegoclouda, ili se u potpunosti upustiti u RN-WebRTC u React Nativeu? Loša vijest je da ne postoji jedinstveno rješenje. Dobra vijest je da razumijete JavaScript u stvarnom vremenu, što vas stavlja u idealnu poziciju da donesete informiranu odluku i izbjegnete probleme s arhitekturom.

U sljedećim redovima ćete vidjeti, korak po korak, kako to funkcionira WebRTC unutraKakvu ulogu igra Agora (i drugi slični provajderi)? Šta znači postaviti vlastitu infrastrukturu (STUN/TURN, signalizacija, SFU, medijski serveri…)? I koji su pravi kompromisi između troškova, složenosti i skalabilnosti za video pozive i streaming u realnom vremenu?

Šta je WebRTC i zašto je osnova svega?

WebRTC (web komunikacija u realnom vremenu) To je skup standarda otvorenog koda, API-ja i protokola koji omogućavaju strujanje zvuka, videa i podataka u stvarnom vremenu direktno iz preglednika ili izvorne aplikacije, bez dodataka ili vanjskih aplikacija. Standardiziran je od strane W3C-a i IETF-a i podržan od strane svih modernih preglednika: Chromea, Firefoxa, Safarija, Edgea, Opre i mnogih mobilnih preglednika.

Njihova filozofija je jasna: omogućiti komunikaciju peer-to-peer (P2P) između korisnika s vrlo niskom latencijom, rješavajući sve neugodne mrežne probleme - kodeke, podrhtavanje, odjek, gubitak paketa, šifriranje itd. - iza kulisa. To uključuje sve, od video poziva jedan na jedan do sistema interaktivni streaming sa stotinama ili hiljadama gledalaca ako se to kombinuje sa pravom infrastrukturom.

Vezani članak:

Kako koristiti i kreirati aplikaciju za pozivanje na Androidu: Ultimativni vodič za korisnike i programere

Ključni WebRTC API-ji: getUserMedia, RTCPeerConnection i RTCDataChannel

WebRTC se oslanja na tri glavna API-ja na strani preglednika koje ćete definitivno koristiti, bez obzira da li gradite vlastito rješenje ili koristite SDK poput Agore:

• MediaStream / getUserMedia: za snimanje videa i zvuka (kamera, mikrofon, pa čak i ekran ili kartice).
• RTCPeerConnection: pregovarati i prenositi audio i video streamove između peer-ova.
• RTCDataChannel: slanje proizvoljnih podataka (tekst, binarni podaci, datoteke) s niskom latencijom između klijenata.

con getUserMedia Možete zatražiti pristup preglednika kameri i mikrofonu i dobiti MediaStream koji zatim povezujete s elementom <video> con video.srcObject = stream. Možete se prijaviti ograničenja (rezolucija, broj sličica u sekundi, prednja/zadnja kamera, itd.) i, ako se ovi uslovi ne ispune, dobićete greške kao što su OverconstrainedErrorza koje morate uspjeti ponuditi alternative (na primjer, smanjenje rezolucije sa 1080p na 720p i primjena prilagođavanja za poboljšajte zvuk mikrofona).

API za RTCPeerConnection To je srž poziva: on se bavi SDP (ponuda/odgovor) pregovorima, ICE (zapanjujućim/okrenutim) prikupljanjem kandidata, uspostavljanjem veze i sigurnim prijenosom putem SRTP-a. Iz vašeg koda jednostavno kreirate vezu, dodajete medijske zapise i reagujete na događaje kao što su onicecandidate u ontrack i ti se brineš o signalizaciji.

Na kraju, RTCDataChannel Omogućava vam postavljanje podatkovnih kanala slično WebSocketu, ali od tačke do tačke i s fino podešenom kontrolom nad pouzdanošću i redoslijedom. Koristan je za video chat, dijeljenje datoteka, sinhronizaciju stanja igre ili saradnju u stvarnom vremenu. Sintaksa je poznata: dataChannel.send() y onmessage u prijemniku.

Signalizacija: „ljepilo“ koje WebRTC ne definira

Tipičan nesporazum: WebRTC ne uključuje signalizacijuRTCPeerConnection treba razmjenjivati ​​informacije, ali ne diktira kako. To morate sami definirati ili SDK treće strane može to apstrahirati umjesto vas.

Parovi se šalju putem signalizacije:

• Poruke kontrole sesije: započinjanje poziva, prekid veze, greške.
• Informacije o mrežiICE kandidati (otkrivene IP adrese/portovi).
• Metapodaci medijaSDP ponude i odgovori sa kodeksima, rezolucijama itd.

Ova signalizacija se obično implementira sa web utičniceSocket.IO, HTTP (anketiranje/dugo anketiranje), MQTT ili drugi dvosmjerni mehanizmi. Vrlo tipičan obrazac je Node.js server sa Socket.IO koji upravlja "sobama" i prosljeđuje poruke tekst/JSON tip između klijenata:

Serverprima create or joinKreira sobu ako jedna ne postoji, podržava do dva klijenta (za osnovni video poziv) i prosljeđuje poruke. message do ostalih utičnica u prostoriji. Odgovorni ste za to da ne prekoračite maksimalan broj korisnika ili za dizajniranje vlastite logike prostorije.

KupacPrilikom učitavanja stranice, traži se naziv sobe (ili se zaključuje iz URL-a), emituje create or joinSlušajte događaje poput created, joined, full, ready i dogovara se s drugom stranom da li će pokrenuti ili odbiti poziv.

Ovaj uzorak je savršen za prototip ili sporedni projekatPruža vam lagani signalni server koji možete skalirati pomoću klastera i uravnoteživača opterećenja ako je potrebno.

STUN, TURN, ICE: Prolazak kroz NAT-ove i zaštitne zidove bez pretjeranog opterećenja

U idealnom svijetu, dva korisnika bi uvijek bila na dostupnim mrežama i direktno se povezivala. U stvarnom svijetu postoje NAT-ovi, zaštitni zidovi, CGNAT od internet provajdera i paranoičnih korporativnih mreža. Tu nastupa ICE, koji kombinuje STUN i TURN.

• STUN (Session Traversal Utilities for NAT) omogućava klijentu da sazna svoju Javna IP adresa i portSTUN server odgovara samo s tim informacijama.
• TURN (Traversal korištenjem releja oko NAT-a) djeluje kao relejni server medija kada ne postoji način za otvaranje direktnog P2P kanala. Audio/video saobraćaj prolazi kroz njega, tako da troši propusnost servera i košta novac.
• ICE (Interactive Connectivity Establishment) je odgovoran za testiranje svih mogućih kandidata (lokalnih adresa, koje odražavaju STUN i TURN releji) dok se ne pronađe održiva ruta.

U praksi, u vaš konfiguracijski objekt RTCPeerConnection dodajete niz iceServeri Sa STUN/TURN URI-jima, preglednik obavlja ostalo. Ako postavljate vlastitu infrastrukturu, morat ćete implementirati i održavati svoje STUN/TURN servere; ako koristite SDK poput Agore, Twilia ili Zegoclouda, oni su to već riješili i pripremili za produkciju.

Strimovanje u realnom vremenu sa malom latencijom: WebRTC vs HLS/DASH

Kada pričamo prenos uživo Postoje dva različita svijeta: protokoli zasnovani na HTTP-u (HLS, DASH) i WebRTC. HLS/DASH funkcionira preuzimanjem i reprodukcijom video segmenata s klijenta; ovo je savršeno za skalabilnost putem CDN-a, ali uvodi latencije od nekoliko sekundi (5-30 sekundi lako).

S druge strane, WebRTC koristi UDP + RTP i isporučuje video u "push" režimu od izvora do plejera, sa vrlo kratkim vremenima pokretanja i tipičnim latencijama ispod 500 ms (često ~250 ms) ako je mreža dobra. To se postiže zahvaljujući:

• Kontrola zagušenja integrirani, koji podešava brzinu prijenosa podataka i rezoluciju u stvarnom vremenu prema gubitku paketa, podrhtavanju ili RTT-u.
• Upotreba efikasnih kodeka (VP8, VP9, ​​​​H.264; sve više AV1) sa hardversko ubrzanje kada je dostupno.
• Mogućnost korištenja SVC-a (Scalable Video Coding) tako da prijemnik prima samo slojeve koje njegova mreža/uređaj može podržati.

Zato je WebRTC prirodan izbor za aukcije u stvarnom vremenu, klađenje na sportske događaje uživo, trgovanje, interaktivne igre, daljinska podrška, telemedicina, participativne virtuelne učionice ili finansijske kontrolne table koje si ne mogu priuštiti nekoliko sekundi kašnjenja.

Problem je što čisti P2P WebRTC ne omogućava dobro skaliranje za hiljade gledalaca; za to vam je potreban SFU-ovi, medijski serveri ili hibridne platformetu upravo dolaze do izražaja rješenja poput Flussonica, Agore ili sličnih.

Skaliranje izvan P2P-a: SFU-ovi, medijski serveri i hibridne arhitekture

U video pozivu jedan na jedan, WebRTC radi besprijekorno. Ali ako počnete dodavati 10, 20 ili 100 korisnika, stvari se mijenjaju: svaki klijent mora slati/primati više streamova, njegov CPU se pregrijava, a mreža se ruši. Ovdje se pojavljuju tri klasična obrasca:

• MCU (Višetačkovna kontrolna jedinica)Server prima sve streamove, miksa ih i šalje jedan stream svakom klijentu. Prednost: mala potrošnja resursa na klijentu. Nedostaci: veliko opterećenje servera, manja individualna kontrola kvalitete.
• SFU (Jedinica za selektivno prosljeđivanje)Server prima streamove i selektivno ih prosljeđuje bez miješanja. Svaki gledatelj prima streamove koji su mu potrebni, moguće u različitim kvalitetima. Ovo je danas najčešće korišteni obrazac za videokonferencije za više korisnika i skalabilno interaktivno strujanje.
• Hibridne arhitekture WebRTC + HLS/DASHWebRTC se koristi za unos i interakciju, dok HLS/DASH distribuira velikoj publici kojoj nije potrebna interakcija u stvarnom vremenu. To je ravnoteža između ultra niska latencija za „glumce“ i ogromnu skalabilnost za „gledaoce“.

Medijski serveri poput Flussonic Drugi pružaju potrebnu pozadinsku podršku: primaju WebRTC stream, po potrebi ga transkodiraju, prosljeđuju ga putem WebRTC-a drugim klijentima ili ga pretvaraju u HLS protokole za masovnu distribuciju. Ova vrsta infrastrukture je ono što u praksi omogućava prevazilaženje individualnih poziva bez potrebe za ponovnim izmišljanjem tople vode.

Tipični slučajevi upotrebe: video pozivi, streaming, IoT i još mnogo toga

WebRTC je postao sveprisutan i vjerovatno ga koristite svaki dan, a da toga niste ni svjesni. Neki primjeri gdje se posebno dobro uklapa su... video pozivi i video konferencije:

• Video pozivi i video konferencijeGoogle Meet, Jitsi, Slack, Microsoft Teams i mnogi drugi alati oslanjaju se na WebRTC (djelimično ili u potpunosti) za video, audio i dijeljenje ekrana.
• Servisi za streaming u realnom vremenuPlatforme poput Twitcha, Meta Livea, Vimeo Livestreama ili alati poput Streamyarda kombiniraju WebRTC za unos podataka i druge tehnologije za masovnu distribuciju.
• Ćaskanje i slanje poruka s dijeljenjem datotekaZahvaljujući RTCDataChannelu možete imati chat u stvarnom vremenu, dijeljenje datoteka, sinhronizaciju statusa itd., bez centralnih medijskih servera.
• Cloud igre i multiplayerServisi poput GeForce NOW ili Xbox Cloud Gaming koriste slične tehnologije za interaktivni video; mnoge P2P igre koriste WebRTC za sinhronizaciju igranja.
• IoT i nadzorPametne kamere, baby monitori, video zvona na vratima ili dronovi mogu slati video u stvarnom vremenu na mobilne uređaje i preglednike koji koriste WebRTC.
• Obrazovanje i telemedicina: virtuelne učionice sa bijelim tablama, kvizovima i dvosmjernim videom ili online medicinske konsultacije gdje su latencija i sigurnost ključni.

WebRTC sigurnost: enkripcija, dozvole i najbolje prakse

Sigurnost u WebRTC-u nije dodatna funkcija: ona je ugrađena. integrirano iz dizajnaSve medijske komponente su šifrirane, a API-ji rade samo sa sigurnih izvora (HTTPS ili localhost), iako je preporučljivo biti oprezan. prevare putem video poziva.

• DTLS (Datagram Transport Layer Security) šifrira podatke tokom prenosa.
• SRTP (Secure Real-time Transport Protocol) štiti audio i video tako da se ne mogu lako manipulirati ili presresti.
• Pristup kamera i mikrofon Zahtijeva eksplicitnu dozvolu korisnika, s vidljivim vizualnim indikatorima (ikone, obojene tačke itd.).
• Budući da nema dodataka za instaliranje, rizik od zlonamerni softver kamuflirano u ekstenzijama ili binarnim datotekama trećih strana.

Uprkos tome, morate se pobrinuti za svoj vlastiti sloj: koristite HTTPS u cijelomPregledajte dozvole koje tražite, ažurirajte preglednike i biblioteke i ne zanemarujte sigurnost vašeg signalnog servera ili REST API-ja.

WebRTC u odnosu na druge tehnologije: VoIP, WebSockets i vlasničke platforme

Ako dolazite iz svijeta tradicionalnog VoIP-a, upoznati ste sa SIP-om, PBX-om, softphone-ima i skupim serverima. WebRTC mijenja paradigmu: ne morate zahtijevati od korisnika da pruži bilo kakve informacije. desktop klijent Nije potreban nikakav specifičan hardver; dovoljni su preglednik i relativno jednostavan signalni server.

Protiv Tradicionalni VoIPWebRTC smanjuje opterećenje osnovne infrastrukture i otvara vrata aplikacijama direktno integriranim u web. U mnogim slučajevima možete ponovo koristiti svoj SIP backend putem gateway-a koji prevode signalizaciju u WebRTC.

Što se tiče web utičniceTreba ih više posmatrati kao komplementarne: idealne su za obavještenja, lagani chat ili ažuriranja statusa, ali ne i za intenzivne medije. WebRTC je optimizovan za audio/video u realnom vremenusa kontrolom zagušenja, kodecima, jitter baferom itd. U praksi, mnogi projekti koriste WebSockets za signalizaciju i WebRTC za transport medija.

Ako ih uporedite sa platformama kao što su Zoom, GoToMeeting ili WebExRazlika leži u modelu: ti alati su zatvorena rješenja, često s obaveznim desktop aplikacijama i vlasničkim backendom. WebRTC, s druge strane, je fundamentalna tehnologija; možete izgraditi vlastiti "mini-Meet" na njemu ili ga integrirati sa servisima koji ga već koriste (kao što su Google Meet ili Microsoft Teams).

Razvoj s WebRTC-om: stvarna složenost i uobičajene zamke

Iako API-ji izgledaju jednostavno na papiru, implementacija WebRTC-a od nule je složenija. Morat ćete se suočiti sa:

Vezani članak:

Tor preglednik za Android: Napredne postavke i sigurna upotreba

• Prilagođena signalizacijadizajniranje poruka, soba, upravljanje ponovnim vezama, ponovnim pokušajima, greškama.
• Upravljanje LED/STUN/OKRETARasporedite servere, pratite korištenje TURN-a (koji troši propusni opseg), podešavajte vremenska ograničenja.
• Kvalitet usluge (QoS)Prilagođavanje brzina prijenosa podataka, rukovanje nestabilnim mrežama, pregovaranje o kodecima, otkrivanje pogoršanja veze i reagiranje.
• SkaliranjePrelazak sa jednostavnog P2P sistema na grupe, a zatim na stotine korisnika, uvođenje SFU-ova ili medijskih servera bez narušavanja originalnog dizajna.
• Compatibilidad entre navegadoresIako je situacija dobra, ipak ćete pronaći nijanse. Koristite adapter.js I dalje se toplo preporučuje.

U malom sporednom projektu, postavljanje Node servera sa Socket.IO i javnim STUN-om može biti dovoljno za 1:1 pozive ili vrlo male grupe. Ali ako vaša ideja raste i trebate... velika gužvaBilo da se radi o finoj kontroli kvalitete, snimcima, analizi, transkripcijama ili monetizaciji, uskoro ćete morati razmotriti ili uključiti vlastiti medijski serverili pređite na specijaliziranog pružatelja usluga.

CDN u realnom vremenu sa SDK-ovima: Agora, Twilio, Mux, ZEGOCLOUD…

Usluge poput Agora, Twilio, Mux, ZEGOCLOUD ili slične tehnologije grade sloj vrijednosti preko WebRTC-a koji vam štedi mjesece rada i bezbroj glavobolja:

• oni vam nude a globalna medijska mreža sa SFU-ovima raspoređenim širom svijeta, optimizovanim za nisku latenciju.
• Sažetak OMAMUĆENJE/OKRETANJE, signaliziranje, ponovni pokušaji, ponovna povezivanja i upravljanje složenom mrežom.
• Uključuju dobro održavane SDK-ove za web, iOS, Android, React Native i drugi okviri.
• Oni pružaju dodatne usluge kao što su snimanje, emitiranje na RTMP/HLS, moderiranje, statistika u stvarnom vremenu, kontrola kvalitete, korisničke uloge (domaćin, publika, govornik) itd.

Cijena je, kao što vjerovatno sumnjate, glavni problem: ako imate i malo novca mnogo minuta videa Ili, sa značajnim brojem istovremenih korisnika, račun vrtoglavo raste. Nadalje, postajete ovisni o njihovoj platformi i njenim cijenama ili promjenama API-ja.

U vašoj specifičnoj situaciji, sa bogatim iskustvom u JavaScript u realnom vremenuRazumna opcija je započeti sa SDK-om kako bi se ubrzao razvoj, validirao proizvod i saznalo više o njegovom modelu sobe, ulogama, životnom ciklusu streama i upravljanju stanjem. Kasnije, ako projekat krene i troškovi postanu problem, možete postepeno migrirati dijelove rješenja na robusniju platformu. vlasnička WebRTC infrastruktura ili se osloniti na medijski server tipa Flussonic za kontrolu distribucijskog sloja.

Najbolje prakse i alati za otklanjanje grešaka u WebRTC-u

Kako biste izbjegli da se izgubite u crnoj kutiji WebRTC-a, preporučljivo je osloniti se na alate koji već postoje u preglednicima i ekosistemu:

• chrome: // webrtc-internals (o about:webrtc (u Firefoxu): panel s detaljnom statistikom konekcija, brzinama prijenosa podataka, gubitkom paketa, aktivnim kodecima itd.
• adapter.js: podloga koju održava zajednica i koja ublažava razlike između preglednika i verzija.
• test.webrtc.org: za provjeru kamere, mikrofona, mreže i opće kompatibilnosti na uređaju.
• Zvanični uzorci na webrtc.github.io/samples: primjeri ograničenja, peer konekcija, podatkovnih kanala, dijeljenja ekrana… vrlo korisno za kopiranje obrazaca.

Također je dobra ideja strukturirati kod jasnim odvajanjem signalni sloj (soketi, sobe, poruke) sloja Čisti WebRTC (kreiranje veze, upravljanje streamom, rukovatelji događajima). Ovo vam omogućava da zamijenite signalizacijski backend ili medijski server bez ponovnog pisanja cijele klijentske logike.

Vezani članak:

Android i Linux: Najbolje alternative za KDE Connect

Sa svim gore navedenim na stolu, za sporedni projekat koji tek počinje i gdje toliko cijenite vreme razvoja kao srednjoročni trošakNajuravnoteženija strategija je obično započeti s real-time SDK-om baziranim na WebRTC-u koji vam omogućava brzu iteraciju u React/React Nativeu, internaliziranje načina na koji oni rukuju ulogama, sesijama, prenose životni ciklus i stanja uživo, te paralelno dublje istraživanje WebRTC-a "po koži" (getUserMedia, RTCPeerConnection, RTCDataChannel, signalizacija s Node+Socket.IO, STUN/TURN, SFU) kako ne biste bili zauvijek vezani za jednu platformu i kako biste mogli napraviti skok na prilagođenije rješenje kada proizvod to opravdava.