WebRTC è senza alcun server nemmeno un server di segnalazione

Riepilogo

WebRTC è una suite di componenti che consente canali di media e media in tempo reale tra i browser. Tuttavia, richiede ancora un servizio back -end per alcune funzionalità. In questo articolo, esploreremo i motivi per cui è necessario un servizio di back -end, i componenti e l’hardware coinvolti nella configurazione di WebRTC, i codec audio e video supportati e l’importanza di una directory e un server storico.

1. Cos’è WebRTC?

WebRTC è una suite di componenti che consente agli sviluppatori di impostare i media e i canali di dati in tempo reale tra i browser. È stato creato da Google e contiene componenti chiave che vengono spediti in Chrome, Firefox, Opera e Microsoft Edge (ORTC).

2. Perché hai ancora bisogno di un servizio back -end?

Nonostante le capacità di WebRTC, è necessario un servizio back -end per alcune funzionalità. Ad esempio, per chiamare qualcuno, devi conoscere il loro indirizzo, che di solito è dinamico. Queste informazioni devono essere archiviate e gestite su un server. Inoltre, un servizio back -end può tenere traccia di tutti i dispositivi per un utente e avvisarli delle chiamate in arrivo.

3. Quali componenti e hardware sono coinvolti nella configurazione di WebRTC?

WebRTC aiuta a impostare l’ambiente fisico, come telecamere, altoparlanti e microfoni, nonché altri hardware come l’annullamento dell’eco e l’annullamento dello sfondo hardware. Aiuta anche a configurare la rete utilizzando STUT (Session Traversal Utilities per NAT).

4. Quali codec audio sono supportati da WebRTC?

WebRTC supporta vari codec audio tra cui G711, ILBC e OPUS. Opus è un codec variabile di alta qualità ampiamente utilizzato in WebRTC.

5. Quali codec video sono supportati da WebRTC?

WebRTC supporta i codec VP8 e VP9, ​​che sono le variazioni di Google-Royalty-Free di H.264/h.265. Supporta anche h.264.

6. Perché i codec audio sono importanti in WebRTC?

Codec audio gestiscono attività come perdita di pacchetti, codifica e decodifica dell’audio, correzione degli errori, cancellazione del rumore, cancellazione dell’eco e livellamento del volume. Contribuiscono alla popolarità di WebRTC su dispositivi mobili e desktop.

7. Qual è la directory di chi è disponibile per chiamare?

Per avviare una chiamata, è necessario conoscere l’indirizzo del destinatario. La directory funge da pagine bianche dinamiche, consentendo agli utenti di effettuare il check -in con un server e fornire informazioni di contatto. Questo può essere implementato utilizzando protocolli XMPP, SIP o personalizzati.

8. Perché hai bisogno di un server stordente?

Un server STOR (Session Traversal Utilities for NAT) aiuta a determinare l’indirizzo IP esterno di un dispositivo e controlla se due dispositivi possono comunicare direttamente. Ha un ruolo cruciale nello stabilire connessioni tra i coetanei.

9. Cos’è un server di svolta?

Se non è possibile una sessione peer-to-peer a causa delle limitazioni del firewall, è necessaria una svolta (attraversamento che utilizza relè intorno a NAT). Aiuta a trasmettere dati tra i dispositivi bypassando le restrizioni del firewall.

10. Perché dovresti prendere in considerazione l’utilizzo di un servizio di backend come Sinch?

Impostare e mantenere i server per la segnalazione, lo stordizione e la svolta può essere complesso e costoso. Sinch, come fornitore di servizi di backend, offre soluzioni scalabili ed economiche. Gestiscono un miliardo di minuti all’anno e forniscono SDK WEBRTC ottimizzati per dispositivi e condizioni di rete diverse.

11. WebRTC è solo sul backend?

No, WebRTC coinvolge aspetti del frontend e del backend. Sinch, ad esempio, personalizza e configura il loro WebRTC SDK per garantire prestazioni ottimali tra i dispositivi e le condizioni di rete. Implementano funzionalità come Adaptive Opus per regolare la qualità di registrazione in base a metriche di qualità dal traffico.

12. Quali sono i vantaggi dell’utilizzo di Sinch?

Sinch offre esperienza nelle comunicazioni in tempo reale e fornisce SDK WEBRTC personalizzati, codec ottimizzati e una rete distribuita. I loro prezzi per il trasferimento dei dati sono convenienti e garantiscono una comunicazione a bassa latenza attraverso server posizionati strategicamente.

13. Quanto è evidente la latenza della rete in una conversazione?

Circa 250 ms di latenza della rete sono evidenti durante una conversazione. Fattori come la latenza di rete, il tempo di elaborazione e la codifica dei dati possono contribuire alla latenza generale.

14. Quali funzionalità fornisce un servizio back -end in WebRTC?

Un servizio di backend gestisce attività come la gestione della directory, la segnalazione, la gestione dei server stordi e il monitoraggio dei dispositivi per gli utenti.

15. Cosa rende popolare WebRTC su dispositivi mobili e desktop?

Il supporto di WebRTC per i codec audio e video, insieme alla sua facilità d’uso e alle funzionalità in tempo reale, contribuisce alla sua popolarità su dispositivi mobili e desktop.

WebRTC è senza alcun server nemmeno un server di segnalazione

Quindi, apri due schede nel browser (o in due browser diversi) e inserisci Localhost: 7000. Come accennato in precedenza, è meglio avere due telecamere disponibili per questo esempio. Se tutto va bene, dovresti vedere un feed video in ciascuna delle schede.

WebRTC e perché hai ancora bisogno di un servizio back -end

Unisciti alla comunità di Dzone e ottieni l’esperienza completa dei membri.

Questo articolo è apparso originariamente sul blog Sinch di Christian Jensen.

Cos’è WebRTC?

WebRTC è una suite di componenti basati da un paio di innovazioni da aziende che Google ha acquistato nel 2010. WebRTC consente a uno sviluppatore di impostare multimediali in tempo reale e canali di dati tra due browser (o cellulari se lo compili per questo). Contiene un paio di componenti chiave e sono tutti spediti in Chrome, Firefox e Opera, ed esiste una versione in Microsoft’S nuovo browser Edge (ORTC).

Impostazione di flussi di dati e hardware

WebRTC aiuta a creare sia l’ambiente fisico (come telecamere, altoparlanti e microfoni) sia altri hardware (come l’annullamento dell’eco e l’hardware di cancellazione di sfondo – quelli che troverai principalmente nei cellulari), oltre a aiutare a capire la rete insieme a stordi.

Codec audio e codec video

Uno dei vantaggi principali che utilizzano WebRTC rispetto ad altri software quando si tratta di audio e video in tempo reale è il codec open source/royalty che Google è abbastanza gentile da spedire.

Codec audio

• G711, utilizzato in normali reti telefoniche
• ILBC, codificata a banda stretta, utilizzata anche nelle reti telefoniche
• Opus, una variabile di alta qualità e codec (supporto per adattivo) che è il più recente in codec utilizzato in WebRTC.

Ce ne sono più spediti, ma questi sono quelli principali e quelli più usati.

Codec video

• VP8 e presto VP9, ​​questo è Google’S Variazione di una royalty free h.264/h.265 Codec
• H.264 (aggiunto nel 2015 come accordo per ORTC)

I codec audio fanno molto del lavoro per te, prendendosi cura della perdita di pacchetti, codifica e decodifica dell’audio, correzione degli errori, cancellazione del rumore, cancellazione dell’eco, livellamento del volume e altro ancora. Il fatto che contenga codec lo rende anche estremamente popolare su dispositivi mobili e desktop.

Quindi, ora posso costruire la mia chiamata basata sul browser in puro javascript utilizzando (aggiungi il tuo framework JS lato client preferito). Sfortunatamente, questo’non è così semplice per impostare una chiamata poiché mancano due cose principali qui.

Directory of Who è disponibile per chiamare (o pari alla scoperta)

Per chiamare qualcuno, devi conoscere l’indirizzo e, a differenza dei normali numeri di telefono, l’indirizzo su Internet è principalmente indirizzi IP dinamici. Per risolverlo, devi tenere registrato dove sono tutti. Questo può essere fatto in diversi modi usando XMPP, SIP, protocolli personalizzati, ecc., Ma tutto si riduce a chi chiunque sia pronto a ricevere una chiamata che fa il check -in con un server in un modo o nell’altro e fa sapere al server come contattare quel peer (implicito per un’ulteriore consegna di offerta/invito/SDP ecc.).

Pensalo come una pagine bianche totalmente dinamiche. Questo di solito viene fatto su intervalli a tempo per mantenere i firewall o simili aperti per il server di segnalazione per avvisare il client se qualcuno vuole comunicare con loro. Quindi, questo è il primo pezzo che devi costruire sopra.

Successivamente probabilmente vuoi tenere traccia di tutti i dispositivi per un determinato utente e avvisarli su tutti i dispositivi se c’è una chiamata. Usando Sinch, ci prendiamo cura di questa parte per te.

Server stordente

Dopo che il server di segnalazione ha individuato un dispositivo e invia un’offerta, è necessario un server stordente. Il server storico faciliterà per determinare l’indirizzo IP esterno e se i due (o più) dispositivi possono parlarsi direttamente. Sinch si prenderà cura di questo anche per te.

Media Relay Server (Turn Server)

Se non è possibile una sessione peer-to-peer (i nostri dati suggeriscono che ciò rappresenta circa il 25% delle sessioni), avrai bisogno di un server a turno. Il server di svolta sostanzialmente sposterà i bit per te attraverso fori aperti nel firewall tra i due client. Perché accade questo? Il più comune sono i firewall asimmetrici e la possibilità di puntare i buchi su porte diverse nei firewall.

Ok, ma perché Don’L’ho impostato da solo?

Bene, potresti. Questo potrebbe essere un po ‘eccessivo e sarà richiesta un’altra competenza nel tuo team operativo. I tuoi server a turno e stordimento saranno probabilmente fortemente utilizzati e costosi. Ed ecco dove arrivano l’economia scalabile. Poiché Sinch sta facendo oltre un miliardo di minuti all’anno, i nostri prezzi per il trasferimento dei dati sono più economici di quanto la maggior parte delle aziende possa ottenere.

Probabilmente vuoi avere anche una rete distribuita. Se ad esempio hai il tuo server di turno in u.S. E le chiamate sono in corso tra i clienti in Europa, aggiungerai latenza solo perché tutto il traffico deve attraversare l’oceano. Una buona regola empirica è che circa 250 ms è evidente in una conversazione (più informazioni sulla qualità delle informazioni del servizio qui). Quindi, senza aggiungere alcuna latenza di rete sul client e il tempo di elaborazione per codificare i dati, è fondamentalmente garantito per avere troppa latenza tra i clienti.

Si tratta solo di backend?

Esso’non solo sul backend. A Sinch abbiamo una vasta esperienza di comunicazioni in tempo reale e stiamo personalizzando e configurando il nostro SDK WebRTC per lavorare al meglio su tutti i dispositivi e in diverse condizioni di reti. Un paio di esempi sono l’implementazione di Opus Adaptive, che regolerà la qualità di registrazione in base alle metriche di qualità dal nostro traffico. Sappiamo anche quali codec utilizzare in circostanze specifiche e quali selezionare per ridurre al minimo il transcodifica e la latenza in tutto il mondo.

Pubblicato a Dzone con il permesso di Christian Jensen . Guarda l’articolo originale qui.

Le opinioni espresse dai collaboratori di Dzone sono loro.

WebRTC è senza alcun server nemmeno un server di segnalazione?

Sto cercando di impostare un plug -in a cordova per iOS che implementa le funzioni WebRTC senza usare alcun server e lo farà essere utilizzato solo su una rete locale. So che c’è questo plugin, che sembra promettente ma ho dei problemi con esso. Il mio piano non è quello di utilizzare un trun, stordire o qualsiasi tipo di server di segnalazione. Forse pensi in questo momento: “Ok non è possibile. Nessuna segnalazione equivale a nessuna connessione.“Ma lasciami spiegare prima. Come sottolineato qui e qui è possibile evitare di utilizzare un server TRUN, ST stravante o ICE. Penso che questo sia un buon modo per iniziare il mio progetto, ma c’è ancora una domanda aperta. Come si trovano i dispositivi se non esiste alcun tipo di segnalazione (nell’esempio usano un nodo.server js)? In questo momento sto giocando con l’idea di un codice QR che contiene tutte le informazioni necessarie. Alla fine dovrebbe apparire così (gli arrwos neri sono più importanti): l’idea è che tutti coloro che entrano in una stanza debbano scansionare un codice QR sul RP e quindi il dispositivo conosce l’IP, la porta, ecc. di RP e una connessione WebRTC con un datachannel sarà stabilita. Sto cercando una risposta da giorni ormai, ma a causa del fatto (o almeno uno dei motivi) che WebRTC non è nemmeno supportato su iOS Nativly non ci sono molti esempi WebRTC là fuori che lavorano su iOS e nessuno per una rete locale. Quindi la mia domanda è: sono sul modo giusto o non è nemmeno possibile? (Non ho trovato alcun esempio per questo da nessuna parte, ma se metto tutti i post che leggo insieme, penso che dovrebbe essere possibile.)

Chiesto il 10 agosto 2017 alle 12:38

3.257 3 3 badge d’oro 11 11 badge d’argento 19 19 badge di bronzo

Non importa come risolvi Discovery, ma per stabilire una connessione WebRTC, è necessario ottenere i messaggi di offerta e rispondere tra i pari in qualche modo. Quei messaggi contengono automaticamente candidati al ghiaccio se si aspetta prima che la raccolta del ghiaccio. Vedi StackOverflow.com/a/29056385/918910.

WEBRTC: un esempio funzionante

Di recente ho dovuto usare WebRTC per un semplice progetto. La tecnologia stessa ha molti vantaggi ed è sviluppata come standard aperto, senza la necessità di alcun plugin. Tuttavia, ero abbastanza nuovo in WebRTC e ho avuto alcuni problemi a ottenere la testa attorno ai concetti di base, oltre a creare una soluzione di lavoro. Ci sono molti tutorial disponibili (come questo, che ha ispirato la mia soluzione). Ma la maggior parte di loro è incompleta, obsoleta o mi ha costretto a utilizzare alcuni servizi di terze parti (E.G. Google Firebase), che ha reso l’intero processo solo più complicato da configurare e più difficile da capire.

Ho deciso di mettere insieme le informazioni da tutte quelle risorse e creare un esempio semplice e funzionante di un’applicazione WebRTC. Non richiede servizi di terze parti se non si desidera utilizzarlo su una rete pubblica (nel qual caso possedere un server sarebbe davvero d’aiuto). Spero che fornisca un buon punto di partenza per tutti coloro che sono interessati a esplorare WebRTC.

Questo non sarà un tutorial completo della tecnologia WebRTC. Puoi trovare molti tutorial e spiegazioni dettagliate su Internet, ad esempio qui. Puoi anche controllare l’API WebRTC se vuoi maggiori informazioni. Questo post ti mostrerà un possibile esempio di lavoro di WebRTC e spiegherà come funziona.

Descrizione generale

Il codice sorgente completo di questo esempio è disponibile su GitHub. Il programma è composto da tre parti:

• applicazione web
• Server di segnalazione
• Gira il server

IL applicazione web è molto semplice: un file HTML e un file JavaScript (più una dipendenza: PRESA.io.js, che è incluso nel repository). È progettato per funzionare con solo due client (due browser Web o due schede dello stesso browser). Una volta aperto nel browser (testato su Firefox 74), chiederà il permesso di utilizzare la fotocamera e il microfono. Una volta concessa l’autorizzazione, il video e l’audio da ciascuna delle schede verranno trasmessi in streaming all’altro.

Nota: potresti riscontrare alcuni problemi se si tenta di accedere alla stessa fotocamera da entrambe le schede. Nel mio test, io’Ve ha usato due dispositivi durante il test sulla mia macchina (una fotocamera per laptop incorporata e una webcam USB).

IL Server di segnalazione viene utilizzato dalle applicazioni WebRTC per scambiare informazioni richieste per creare una connessione diretta tra i peer. Puoi scegliere qualsiasi tecnologia che desideri per questo. Questo esempio utilizza WebSocket (Python-Socketio sul backend e PRESA.io-client sul frontend).

IL GIRO Il server è richiesto se si desidera utilizzare questo esempio su una rete pubblica. Il processo è ulteriormente descritto in questo post. Per i test di rete locale, non ne avrai bisogno.

Segnalazione

Il server di segnalazione è scritto in Python3 e sembra questo:

da AioHttp Import Web Import Socketio Room = 'Room' SIO = Socketio.Asyncserver (cors_allowed_origins = '*') app = Web.Applicazione () SIO.allegato (app) @sio.Event Async Def Connect (Sid, Environ): Print ('Connected', Sid) Aspetta SIO.EMIT ('Ready', Room = Room, Skip_Sid = Sid) SIO.Enter_room (sid, stanza) @sio.Evento Def Disconnect (SID): SIO.Leave_room (sid, stanza) stampa ('disconnesso', sid) @sio.Event Async Def Data (SID, Data): Print ('Messaggio da <>: <>'.Formato (Sid, dati)) Abbi Sio.emit ('data', data, room = room, skip_sid = sid) se __name__ == '__main__': Web.run_app (app, porta = 9999)

Ogni cliente si unisce alla stessa stanza. Prima di entrare nella stanza, a pronto L’evento viene inviato a tutti i clienti attualmente nella stanza. Ciò significa che la prima connessione WebSocket non riceverà alcun messaggio (la stanza è vuota), ma quando viene stabilita la seconda connessione, la prima riceverà un pronto evento, segnalare che ci sono almeno due clienti nella stanza e che la connessione WebRTC può iniziare. A parte questo, questo server inoltrerà qualsiasi dati (dati evento) che viene inviato da un websocket all’altro.

L’impostazione è abbastanza semplice:

PIP di segnalazione CD Installa Aiohttp Python-Socketio Python Server.Py

Questo avvierà il server di segnalazione a Localhost: 9999.

WEBRTC

Il processo semplificato di utilizzo di WebRTC in questo esempio sembra questo:

• Entrambi i clienti ottengono i loro flussi di media locali
• Una volta ottenuto il flusso, ogni client si collega al server di segnalazione
• Una volta che il secondo client si collega, il primo riceve a pronto evento, il che significa che la connessione WebRTC può essere negoziata
• Il primo client crea un oggetto RTCPeerConnection e invia un’offerta al secondo client
• Il secondo client riceve l’offerta, crea un oggetto RTCPeerConnection e invia una risposta
• Ulteriori informazioni vengono anche scambiate, come i candidati al ghiaccio
• Una volta negoziata la connessione, viene chiamato un callback per la ricezione di un flusso remoto e quel flusso viene utilizzato come fonte del video elemento.

Se si desidera eseguire questo esempio su LocalHost, Signaling Server e l’applicazione Web sono tutto ciò di cui hai bisogno. La parte principale del file HTML è un singolo elemento video (quale fonte verrà impostata in seguito dallo script):

La parte JavaScript è un po ‘più complicata e io’Spiegalo passo dopo passo. Innanzitutto, ci sono le variabili di configurazione:

// Configura variabili const segnalazione_server_url = 'http: // localhost: 9999'; const pc_config = <>;

Per localhost, Pc_config può rimanere vuoto e Segnalazione_server_url dovrebbe indicare il server di segnalazione’VE è iniziato nel passaggio precedente.

Successivamente, abbiamo i metodi di segnalazione:

let socket = io (segnalazione_server_url, < autoConnect: false >); PRESA.on ('data', (data) => < console.log('Data received: ',data); handleSignalingData(data); >); PRESA.su ('pronta', () => < console.log('Ready'); createPeerConnection(); sendOffer(); >); Lascia che SendData = (Data) => < socket.emit('data', data); >;

In questo esempio, vogliamo connetterci al server di segnalazione solo dopo aver ottenuto il flusso multimediale locale, quindi dobbiamo impostare . A parte questo, abbiamo un invia i dati metodo che emette a dati evento, e reagiamo al dati Evento gestendo le informazioni in arrivo in modo appropriato (di più in seguito). Inoltre, ricevere un pronto evento significa che entrambi i clienti hanno ottenuto i loro flussi multimediali locali e si sono collegati al server di segnalazione, in modo da poter creare una connessione dalla nostra parte e negoziare un’offerta con il lato remoto.

Lascia che PC; Lascia che LocalStream; Let RemoteStreamElement = Documento.QuerySelector ('#RemoteStream');

Sia getLocalstream = () => < navigator.mediaDevices.getUserMedia(< audio: true, video: true >) .Quindi ((stream) => < console.log('Stream found'); localStream = stream; // Connect after making sure that local stream is availble socket.connect(); >) .catch (errore => < console.error('Stream not found: ', error); >); >

Let CreatePeerConnection = () => < try < pc = new RTCPeerConnection(PC_CONFIG); pc.onicecandidate = onIceCandidate; pc.onaddstream = onAddStream; pc.addStream(localStream); console.log('PeerConnection created'); >cattura (errore) < console.error('PeerConnection failed: ', error); >>;

Lascia che mandaffer = () => < console.log('Send offer'); pc.createOffer().then( setAndSendLocalDescription, (error) => < console.error('Send offer failed: ', error); >); >; Lascia che sendanswer = () => < console.log('Send answer'); pc.createAnswer().then( setAndSendLocalDescription, (error) => < console.error('Send answer failed: ', error); >); >; let setAndSendLocaldescription = (sessionDescription) => < pc.setLocalDescription(sessionDescription); console.log('Local description set'); sendData(sessionDescription); >;

let oniceCandidate = (event) => < if (event.candidate) < console.log('ICE candidate'); sendData(< type: 'candidate', candidate: event.candidate >); >>; let onaddstream = (event) => < console.log('Add stream'); remoteStreamElement.srcObject = event.stream; >;

let handlesignalingdata = (data) => < switch (data.type) < case 'offer': createPeerConnection(); pc.setRemoteDescription(new RTCSessionDescription(data)); sendAnswer(); break; case 'answer': pc.setRemoteDescription(new RTCSessionDescription(data)); break; case 'candidate': pc.addIceCandidate(new RTCIceCandidate(data.candidate)); break; >>;

// Avvia connessione getLocalstream ();

CD Web Python -M HTTP.Server 7000

sudo apt install coturn turnserver -a -o -v -n --no -dtls --no -tls -u nome utente: credenziale -r regnomname

const Turn_server_url = ': 3478'; const Turn_server_username = 'nome utente'; const Turn_server_credential = 'credenziale'; const pc_config = < iceServers: [ < urls: 'turn:' + TURN_SERVER_URL + '?transport=tcp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >, < urls: 'turn:' + TURN_SERVER_URL + '?transport=udp', username: TURN_SERVER_USERNAME, credential: TURN_SERVER_CREDENTIAL >]>;