WebRTC (Web Real Time Communications) è uno standard che descrive il trasferimento di dati audio in streaming, dati video e contenuti dal browser e al browser in tempo reale senza installare plug-in o altre estensioni. Lo standard permette di trasformare il browser in un terminale di videoconferenza, basta aprire una pagina web per avviare la comunicazione.

Cos'è WebRTC?

In questo articolo tratteremo tutto ciò che c'è da sapere sulla tecnologia WebRTC per l'utente medio. Consideriamo i vantaggi e gli svantaggi del progetto, sveliamo alcuni segreti, ti raccontiamo come funziona, dove e per cosa viene utilizzato WebRTC.

Cosa devi sapere su WebRTC?

L'evoluzione degli standard e delle tecnologie video

Sergey Yutsaitis, Cisco, Video+Conferenza 2016

Come funziona WebRTC

Dalla parte del cliente

• L'utente apre una pagina contenente un tag HTML5
• Il browser richiede l'accesso alla webcam e al microfono dell'utente.
• Il codice JavaScript sulla pagina utente controlla i parametri di connessione (indirizzi IP e porte del server WebRTC o altri client WebRTC) per bypassare NAT e Firewall.
• Quando si ricevono informazioni sull'interlocutore o sullo streaming con la conferenza mixata sul server, il browser inizia a negoziare i codec audio e video utilizzati.
• Inizia il processo di codifica e streaming dei dati tra i client WebRTC (nel nostro caso, tra il browser e il server).

Sul lato server WebRTC

Non è necessario un server video per lo scambio di dati tra due partecipanti, ma se si desidera unire più partecipanti in una conferenza, è necessario un server.

Il server video riceverà il traffico multimediale da varie fonti, lo convertirà e lo invierà agli utenti che utilizzano WebRTC come terminale.

Il server WebRTC riceverà anche il traffico multimediale dai peer WebRTC e lo trasmetterà ai partecipanti alla conferenza utilizzando applicazioni desktop o dispositivi mobili, se presente.

Vantaggi della norma

• Nessuna installazione software richiesta.
• Altissima qualità della comunicazione grazie a:
  • Utilizzo di moderni codec video (VP8, H.264) e audio (Opus).
  • Adeguamento automatico della qualità del flusso alle condizioni di connessione.
  • Eco integrato e cancellazione del rumore.
  • Controllo automatico del livello dei microfoni dei partecipanti (AGC).
• Elevato livello di sicurezza: tutte le connessioni sono sicure e crittografate secondo i protocolli TLS e SRTP.
• Esiste un meccanismo integrato per l'acquisizione di contenuti, ad esempio il desktop.
• Capacità di implementare qualsiasi interfaccia di controllo basata su HTML5 e JavaScript.
• La capacità di integrare l'interfaccia con qualsiasi sistema back-end utilizzando WebSocket.
• Un progetto open source: puoi incorporarlo nel tuo prodotto o servizio.
• Vero multipiattaforma: la stessa applicazione WebRTC funzionerà ugualmente bene su qualsiasi sistema operativo, desktop o mobile, a condizione che il browser supporti WebRTC. Ciò consente di risparmiare molte risorse per lo sviluppo del software.

Svantaggi della norma

• Per organizzare conferenze audio e video di gruppo, è necessario un server di videoconferenza che mescoli video e audio dei partecipanti, perché il browser non sa come sincronizzare tra loro più flussi in entrata.
• Tutte le soluzioni WebRTC sono incompatibili tra loro, perché lo standard descrive solo i metodi per la trasmissione di video e audio, lasciando l'implementazione di metodi per rivolgersi agli abbonati, tenere traccia della loro disponibilità, scambio di messaggi e file, pianificazione e altre cose per il venditore.
• In altre parole, non sarai in grado di chiamare da un'applicazione WebRTC di uno sviluppatore a un'applicazione WebRTC di un altro sviluppatore.
• Il mixaggio di conferenze di gruppo richiede molte risorse informatiche, quindi questo tipo di comunicazione video richiede l'acquisto abbonamento a pagamento o investire nella tua infrastruttura, dove ogni conferenza richiede 1 core fisico di un processore moderno.

Segreti di WebRTC: in che modo i fornitori traggono vantaggio dalla tecnologia Web dirompente

Tzachi Levent-Levi, Bloggeek.me, Video+Conferenza 2015

WebRTC per il mercato delle videoconferenze

Aumento del numero di terminali di videoconferenza

La tecnologia WebRTC ha avuto una forte influenza sullo sviluppo del mercato delle videoconferenze. Dopo il rilascio dei primi browser con supporto WebRTC nel 2013, il numero potenziale di terminali di videoconferenza in tutto il mondo è immediatamente aumentato di 1 miliardo di dispositivi. Ogni browser, infatti, è diventato un terminale di videoconferenza non inferiore ai suoi omologhi hardware in termini di qualità di comunicazione.

Utilizzare in soluzioni specializzate

L'uso di varie librerie JavaScript e API del servizio cloud con supporto WebRTC semplifica l'aggiunta del supporto video a qualsiasi progetto web. In passato, la trasmissione di dati in tempo reale richiedeva agli sviluppatori di apprendere come funzionavano i protocolli e di utilizzare il lavoro di altre società, che molto spesso richiedevano licenze aggiuntive, con conseguente aumento dei costi. WebRTC è già utilizzato attivamente in servizi come "Chiamata dal sito", "Chat di supporto online", ecc.

Ex utenti di Skype per Linux

Nel 2014, Microsoft ha annunciato la fine del supporto per il progetto Skype per Linux, che ha causato grande fastidio tra i professionisti IT. La tecnologia WebRTC non è legata al sistema operativo, ma è implementata a livello di browser, ad es. Gli utenti Linux potranno vedere i prodotti e i servizi basati su WebRTC come sostituti a tutti gli effetti di Skype.

Concorrenza con Flash

WebRTC e HTML5 sono stati un colpo mortale per Tecnologie flash, che stava già vivendo i suoi anni tutt'altro che migliori. Dal 2017 i principali browser hanno ufficialmente smesso di supportare Flash e la tecnologia è finalmente scomparsa dal mercato. Ma devi dare credito a Flash, perché è stato lui a creare il mercato delle conferenze Web e ha offerto le capacità tecniche per la comunicazione dal vivo nei browser.

Presentazioni video WebRTC

Dmitry Odintsov, TrueConf, video+conferenza ottobre 2017

Codec in WebRTC

Codec audio

Per comprimere il traffico audio in WebRTC, vengono utilizzati i codec Opus e G.711.

G.711- il codec vocale più antico con un bitrate elevato (64 kbps), utilizzato più spesso nei sistemi di telefonia tradizionali. Il vantaggio principale è il carico computazionale minimo dovuto all'uso di algoritmi di compressione leggeri. Il codec è diverso basso livello compressione dei segnali vocali e non introduce ulteriore ritardo audio durante la comunicazione tra gli utenti.

G.711 è supportato da un gran numero di dispositivi. I sistemi che utilizzano questo codec sono più facili da usare rispetto a quelli basati su altri codec audio (G.723, G.726, G.728, ecc.). In termini di qualità, G.711 ha ricevuto un punteggio di 4,2 nel test MOS (un punteggio di 4-5 è il più alto e indica una buona qualità, simile alla qualità del traffico vocale in ISDN e anche superiore).

Opusè un codec con basso ritardo di codifica (da 2,5 ms a 60 ms), supporto per bitrate variabile e alto livello compressione, ideale per lo streaming audio su reti con file variabile portata. Opus è una soluzione ibrida che unisce la prestazione migliore codec SILK (compressione vocale, eliminazione delle distorsioni del linguaggio umano) e CELT (codifica dei dati audio). Il codec è disponibile gratuitamente, gli sviluppatori che lo utilizzano non devono pagare royalties ai detentori del copyright. Rispetto ad altri codec audio, Opus vince sicuramente in molti modi. Ha eclissato codec a basso bitrate piuttosto popolari come MP3, Vorbis, AAC LC. Opus ripristina l '"immagine" del suono più vicino all'originale rispetto a AMR-WB e Speex. Questo codec è il futuro, motivo per cui i creatori della tecnologia WebRTC lo hanno incluso nella gamma obbligatoria degli standard audio supportati.

Codec video

I problemi relativi alla scelta di un codec video per WebRTC hanno richiesto agli sviluppatori diversi anni, alla fine hanno deciso di utilizzare H.264 e VP8. Quasi tutti i browser moderni supportano entrambi i codec. I server di videoconferenza devono supportarne solo uno per funzionare con WebRTC.

VP8è un codec video gratuito con licenza aperta, caratterizzato da un'elevata velocità di decodifica del flusso video e da una maggiore resistenza alla perdita di fotogrammi. Il codec è universale, è facile da implementare nelle piattaforme hardware, quindi gli sviluppatori di sistemi di videoconferenza lo utilizzano spesso nei loro prodotti.

Codec video a pagamento H.264 divenne noto molto prima di suo fratello. Questo è un codec con un alto grado di compressione del flusso video durante il salvataggio Alta qualità video. L'elevata prevalenza di questo codec tra i sistemi di videoconferenza hardware suggerisce il suo utilizzo nello standard WebRTC.

Google e Mozilla stanno promuovendo attivamente il codec VP8, mentre Microsoft, Apple e Cisco stanno promuovendo attivamente H.264 (per garantire la compatibilità con i tradizionali sistemi di videoconferenza). E qui sorge un grosso problema per gli sviluppatori di soluzioni WebRTC basate su cloud, perché se tutti i partecipanti alla conferenza utilizzano un browser, è sufficiente mescolare la conferenza una volta con un codec, e se i browser sono diversi e tra loro c'è è Safari / Edge, quindi la conferenza dovrà essere codificata due volte codec diversi, che raddoppieranno il requisiti di sistema al media server e, di conseguenza, il costo degli abbonamenti ai servizi WebRTC.

API WebRTC

La tecnologia WebRTC si basa su tre API principali:

• (responsabile del browser Web per ricevere segnali audio e video dalle telecamere o dal desktop dell'utente).
• RTCPeerConnection(responsabile della connessione tra i browser per "scambiare" i dati multimediali ricevuti dalla fotocamera, dal microfono e dal desktop. Inoltre, i "compiti" di questa API includono l'elaborazione del segnale (ripulirlo da rumori estranei, regolare il volume del microfono) e il controllo del codec audio e video utilizzati).
• Canale dati RTC(fornisce il trasferimento dati bidirezionale su una connessione stabilita).

Prima di accedere al microfono e alla videocamera dell'utente, il browser richiede questa autorizzazione. A Google Chromeè possibile preconfigurare l'accesso nella sezione "Impostazioni", in Opera e Firefox, la scelta dei dispositivi viene effettuata direttamente al momento dell'accesso, dall'elenco a tendina. La richiesta di autorizzazione apparirà sempre quando si utilizza il protocollo HTTP e una volta se si utilizza HTTPS:

RTCPeerConnection. Ogni browser che partecipa a una conferenza WebRTC deve avere accesso a questo oggetto. Grazie all'utilizzo di RTCPeerConnection, i dati multimediali da un browser all'altro possono persino passare attraverso NAT e firewall. Per trasmettere correttamente i flussi multimediali, i partecipanti devono scambiare i seguenti dati utilizzando un trasporto come i web socket:

• l'operatore promotore invia al secondo operatore un'Offerta-SDP (struttura dati, con le caratteristiche del flusso multimediale che trasmetterà);
• il secondo partecipante genera una "risposta" - Answer-SDP e la invia all'iniziatore;
• quindi, viene organizzato uno scambio di candidati ICE tra i partecipanti, se ne vengono trovati (se i partecipanti sono dietro NAT o firewall).

Dopo il completamento con successo di questo scambio tra i partecipanti, viene organizzato direttamente il trasferimento dei flussi multimediali (audio e video).

Canale dati RTC. Il supporto per il protocollo Data Channel è apparso nei browser relativamente di recente, quindi questa API può essere considerata solo nei casi in cui WebRTC viene utilizzato in Browser Mozilla Firefox 22+ e Google Chrome 26+. Con esso, i partecipanti possono scambiarsi messaggi di testo nel navigatore.

Connessione WebRTC

Browser desktop supportati

• Google Chrome (17+) e tutti i browser basati sul motore Chromium;
• MozillaFirefox (18+);
• Opera (12+);
• Safari (11+);

Browser mobili supportati per Android

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

WebRTC, Microsoft e Internet Explorer

Per molto tempo, Microsoft ha taciuto sul supporto WebRTC in Internet Explorer e nel suo nuovo Navigatore perimetrale. Ai ragazzi di Redmond non piace molto mettere la tecnologia nelle mani di utenti che non controllano, questo è il tipo di politica. Ma gradualmente le cose sono decollate, perché. Non era più possibile ignorare WebRTC e fu annunciato il progetto ORTC, derivato dallo standard WebRTC.

Secondo gli sviluppatori, ORTC è un'estensione dello standard WebRTC con un set migliorato di API basate su JavaScript e HTML5, che, tradotto in un linguaggio ordinario, significa che tutto sarà uguale, solo Microsoft, non Google, controllerà lo standard e il suo sviluppo. Il set di codec è stato ampliato con il supporto per H.264 e alcuni codec audio della serie G.7XX utilizzati nei sistemi di telefonia e videoconferenza hardware. Forse ci sarà il supporto integrato per RDP (per il trasferimento di contenuti) e messaggistica. A proposito, gli utenti di Internet Explorer sono sfortunati, il supporto ORTC sarà solo in Edge. E, naturalmente, un tale insieme di protocolli e codec si adatta a Skype for Business con poco sangue, il che apre ancora più applicazioni aziendali per WebRTC.

Gli utenti Internet europei si dividono in due parti: secondo un sondaggio dell'Institute for Public Opinion Analysis di Allenbach (Germania), Skype, chat e sistemi di messaggistica istantanea sono diventati parte integrante della vita quotidiana di 16,5 milioni di adulti e bambini, 9 milioni usa questi servizi caso per caso e 28 milioni non li toccano.

La situazione potrebbe cambiare, poiché ora Firefox è integrato tecnologia di comunicazione in tempo reale (WebRTC), nonché il cliente stesso. Avviare una chat audio e video ora non è più difficile che aprire un sito web. Servizi come Facebook e Skype, invece, si affidano a soluzioni che utilizzano un client separato e creano un account.

WebRTC non è solo facile da usare. Questo metodo ti consente persino di impostare connessione diretta tra due browser. In questo modo i dati audio e video non passano attraverso un server dove possono verificarsi congestioni o dove l'amministratore non è particolarmente sensibile alla privacy o alla protezione dei dati. Grazie alla connessione diretta, WebRTC non richiede alcuna registrazione o Account in qualsiasi servizio.

Per iniziare una conversazione, devi solo seguire il link. La comunicazione rimane privata perché il flusso di dati è crittografato. Comunicazione in tempo reale tramite browser Google ha iniziato a impegnarsi attivamente nel 2011, quando ha pubblicato il codice sorgente della sua implementazione WebRTC.

Poco dopo, Chrome e Firefox hanno ricevuto i propri motori WebRTC. Lo sono attualmente opzioni mobili dotato sia di questa tecnologia che del motore WebView 3.6 installato con Android 5.0, utilizzato dalle applicazioni.

Per la comunicazione in tempo reale, nel visualizzatore Web devono essere implementate le interfacce JavaScript appropriate. Utilizzo di GetUserMedia Software attiva la cattura da sorgenti audio e video, ovvero webcam e microfono. RTCPeerConnection è responsabile della creazione della connessione, nonché della comunicazione stessa.

Parallelamente all'integrazione del browser gruppo di lavoro Il World Wide Web Consortium (W3C) ha promosso il processo di standardizzazione di WebRTC. Dovrebbe essere completato nel 2015.

WebRTC si accontenta di poco

L'utilizzo del servizio WebRTC non richiede molte risorse, poiché il server collega solo gli amici. Anche stabilire una connessione non è particolarmente difficile. Innanzitutto, il browser segnala al server WebRTC che intende avviare una chiamata. Riceve un collegamento HTTPS dal server: la connessione è crittografata. L'utente invia questo link al suo interlocutore. Il browser chiede quindi all'utente il permesso di accedere alla webcam e al microfono.

Per stabilire una connessione streaming diretta con l'altra parte, il browser riceve il suo indirizzo IP e i dati di configurazione dal servizio WebRTC. Il browser web dell'amico fa lo stesso.

Affinché la connessione in streaming funzioni senza intoppi e in buona qualità, tre motori funzionano nel browser. Due di loro ottimizzano e comprimono i dati audio e video, il terzo è responsabile del loro trasporto. Invia i dati tramite Protocollo SRTP(Secure Real-time Transport Protocol), che consente lo streaming crittografato in tempo reale.

Se una connessione diretta fallisce, WebRTC cerca un altro percorso. Ad esempio, questo accade quando impostazioni di rete impediscono al server STUN di segnalare l'indirizzo IP. Lo standard WebRTC stabilisce che in questo caso la conversazione avrà luogo, ma con l'inclusione intermedia del server TURN (Traversal Using Relays around NAT). Quindi, sul sito Web netscan.co, puoi verificare se WebRTC è implementato sul tuo computer e con il tuo accesso al Web.

Come avviene la connessione

Per prima cosa devi registrare una conversazione (1). Il servizio WebRTC fornisce un collegamento che deve essere inviato all'interlocutore. Il browser, utilizzando lo STUNserver, rileva il proprio indirizzo IP (2), lo invia al servizio e riceve l'IP del partner per stabilire una connessione diretta (3). Se STUN fallisce, la conversazione viene reindirizzata utilizzando TURNserver (4).

La comunicazione che utilizza la tecnologia WebRTC nel browser viene avviata utilizzando il codice JavaScript. Successivamente, tre motori sono responsabili della comunicazione: i motori voce e video raccolgono dati multimediali dalla webcam e dal microfono e il motore di trasporto combina le informazioni e invia il flusso in forma crittografata utilizzando il protocollo SRTP (Secure Real-time Protocol).

Quali browser funzionano con WebRTC

Chrome e Firefox sono dotati di un motore WebRTC che utilizza servizi come talky.io. Il browser Mozilla può funzionare direttamente con il proprio client.

Google e Mozilla continuano a sviluppare l'idea della comunicazione in tempo reale: Chrome può ospitare una conferenza WebRTC con più partecipanti e il nuovo client Hello in Firefox è sviluppato con l'aiuto di una filiale del colosso delle telecomunicazioni Telefonica. Apple rimane in disparte per ora, non dovresti ancora aspettarti WebRTC in Safari. Tuttavia, ci sono molte app e plug-in iOS alternativi per Safari.

Microsoft sta prendendo una strada leggermente diversa. In qualità di proprietaria del competitivo servizio Skype, questa azienda non capitolerà così facilmente a WebRTC. Invece, Microsoft sta sviluppando una tecnologia chiamata ORTC (Object Real-Time Communications) per Internet Explorer.

Le differenze rispetto a WebRTC, come codec e protocolli diversi per stabilire un contatto con il server, sono minori e nel tempo, molto probabilmente, si aggiungeranno allo standard WebRTC, che includerà queste differenze. Pertanto, solo Apple rimane indietro, come al solito.

Una foto: Compagnie manifatturiere; goodluz/Photolia.com

WebRTC è un'API fornita dal browser che consente di organizzare una connessione P2P e trasferire i dati direttamente tra i browser. Ci sono parecchi tutorial su Internet su come scrivere la tua chat video quando Aiuto WebRTC. Ad esempio, ecco un articolo su Habré. Tuttavia, sono tutti limitati alla connessione di due client. In questo articolo cercherò di parlare di come organizzare una connessione e uno scambio di messaggi tra tre o più utenti utilizzando WebRTC.

L'interfaccia RTCPeerConnection è una connessione peer-to-peer tra due browser. Per connettere tre o più utenti, dovremo organizzare una rete mesh (una rete in cui ogni nodo è connesso a tutti gli altri nodi).
Useremo il seguente schema:

1. All'apertura della pagina, controlliamo la presenza dell'ID della camera in posizione.hash
2. Se l'ID della stanza non è specificato, generane uno nuovo
3. Inviamo un server di segnalazione "un messaggio che vogliamo unirci alla stanza specificata
4. Il server di segnalazione invia una notifica di nuovo utente ad altri client in questa stanza
5. I clienti che sono già nella stanza inviano un'offerta SDP al nuovo arrivato
6. Il nuovo arrivato risponde all'offerta "s

0. Server di segnalazione

Come sai, sebbene WebRTC fornisca la possibilità di connessione P2P tra browser, richiede comunque un trasporto aggiuntivo per lo scambio di messaggi di servizio. In questo esempio, il trasporto è un server WebSocket scritto in Node.JS utilizzando socket.io:

var socket_io = require("socket.io"); module.exports = function (server) ( var users = (); var io = socket_io(server); io.on("connection", function(socket) ( // Vuoi che un nuovo utente si unisca alla room socket.on( "room ", function(message) ( var json = JSON. parse(message); // Aggiunge il socket all'elenco degli utenti users = socket; if (socket.room !== undefined) ( // Se il socket è già in qualche stanza, lasciala socket.leave(socket.room); ) // Inserisci la stanza richiesta socket.room = json.room; socket.join(socket.room); socket.user_id = json.id; // Invia ad altri client questa stanza ha un messaggio sull'adesione di un nuovo partecipante socket.broadcast.to(socket.room).emit("new", json.id); )); // messaggio relativo a WebRTC (offerta SDP, risposta SDP o candidato ICE) socket.on("webrtc", function(message) ( var json = JSON.parse(message); if (json.to !== undefined && users !== undefined) ( // Se il messaggio ha un destinatario e questo destinatario noto al server, invia un messaggio solo a lui... users.emit("webrtc", message); ) else ( // ...altrimenti considera il messaggio come un broadcast socket.broadcast.to(socket.room).emit("webrtc", message); ) )); // Qualcuno si è disconnesso socket.on("disconnect", function() ( // Quando un client si disconnette, avvisa gli altri socket.broadcast.to(socket.room).emit("leave", socket.user_id); delete users; )); )); );

1. indice.html

Il codice sorgente per la pagina stessa è abbastanza semplice. Non ho deliberatamente prestato attenzione al layout e ad altre cose belle, poiché questo articolo non riguarda questo. Se qualcuno vuole renderla bella, non sarà difficile.

2.main.js

2.0. Ottenere collegamenti agli elementi della pagina e alle interfacce WebRTC

var chatlog = document.getElementById("chatlog"); var messaggio = document.getElementById("messaggio"); var connection_num = document.getElementById("connection_num"); var room_link = document.getElementById("room_link");

Dobbiamo ancora utilizzare i prefissi del browser per accedere alle interfacce WebRTC.

Var PeerConnection = window.mozRTCPeerConnection || window.webkitRTCPeerConnection; var SessionDescription = window.mozRTCSessionDescription || window.RTCSessionDescription; var IceCandidate = window.mozRTCIceCandidate || window.RTCIceCandidate;

2.1. Determinazione dell'ID della stanza

Qui abbiamo bisogno di una funzione per generare una stanza e un ID utente univoci. Useremo UUID per questo scopo.

Funzione uuid () ( var s4 = function() ( return Math.floor(Math.random() * 0x10000).toString(16); ); return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4(); )

Ora proviamo ad estrarre l'ID della camera dall'indirizzo. Se questo non è impostato, ne genereremo uno nuovo. Visualizzeremo un collegamento alla stanza corrente sulla pagina e, allo stesso tempo, genereremo un identificatore per l'utente corrente.

VarROOM = location.hash.substr(1); if (!ROOM) ( ROOM = uuid(); ) room_link.innerHTML = "Link alla stanza"; varME = uuid();

2.2. presa web

Immediatamente dopo aver aperto la pagina, ci collegheremo al nostro server di segnalazione, invieremo una richiesta per entrare nella stanza e specificheremo i gestori dei messaggi.

// Specifichiamo che quando il messaggio è chiuso, dobbiamo inviare una notifica al server riguardo a questo var socket = io.connect("", ("sync disconnect on unload": true)); socket.on("webrtc", socketReceived); socket.on("nuovo", socketNewPeer); // Invia immediatamente una richiesta per entrare nella stanza socket.emit("room", JSON.stringify((id: ME, room: ROOM))); // Funzione di supporto per l'invio di messaggi di indirizzo relativi alla funzione WebRTC sendViaSocket(type, message, to) ( socket.emit("webrtc", JSON.stringify((id: ME, to: to, type: type, data: message ) )); )

2.3. Impostazioni di connessione peer

La maggior parte degli ISP fornisce connettività Internet tramite NAT. Per questo motivo, una connessione diretta diventa non così banale. Quando creiamo una connessione, dobbiamo specificare un elenco di server STUN e TURN che il browser tenterà di utilizzare per bypassare il NAT. Specifichiamo anche un paio opzioni aggiuntive per connettere.

Var server = ( iceServers: [ (url: "stun:23.21.150.121"), (url: "stun:stun.l.google.com:19302"), (url: "turn:numb.viagenie.ca", credenziali: "la tua password va qui", nome utente: " [e-mail protetta]") ] ); var options = ( opzionale: [ (DtlsSrtpKeyAgreement: true), // richiesto per la connessione tra Chrome e Firefox (RtpDataChannels: true) // richiesto in Firefox per utilizzare l'API DataChannels ] )

2.4. Collegamento di un nuovo utente

Quando un nuovo peer viene aggiunto alla stanza, il server ci invia un messaggio nuovo. Secondo i gestori di messaggi sopra, la funzione verrà chiamata socketNewPeer.

var pari = (); function socketNewPeer(data) ( peers = (candidateCache: ); // Crea una nuova connessione var pc = new PeerConnection(server, options); // Inizializzala initConnection(pc, data, "offer"); // Memorizza il peer nella lista peers peers.connection = pc; // Crea un DataChannel attraverso il quale verranno scambiati i messaggi var channel = pc.createDataChannel("mychannel", ()); channel.owner = data; peers.channel = channel; // Installa i gestori di eventi bindEvents(channel); // Crea un'offerta SDP pc.createOffer(function(offer) ( pc.setLocalDescription(offer); )); ) function initConnection(pc, id, sdpType) ( pc.onicecandidate = function ( event) ( if (event.candidate) ( // Quando viene trovato un nuovo candidato ICE, aggiungilo all'elenco per ulteriori invii peers.candidateCache.push(event.candidate); ) else ( // Quando la scoperta dei candidati è completato, l'handler verrà chiamato di nuovo, ma senza candidato // In questo caso, inviamo prima al peer un'offerta SDP, oppure Risposta di SDP (a seconda del parametro della funzione)... sendViaSocket(sdpType, pc.localDescription, id); // ...e poi tutti i candidati ICE precedentemente trovati per (var i = 0; i< 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 += "

"; }; }

2.5. Offerta SDP, risposta SDP, candidato ICE

Quando viene ricevuto uno di questi messaggi, chiamiamo il corrispondente gestore di messaggi.

Funzione socketReceived(data) ( var json = JSON.parse(data); switch (json.type) ( case "candidate": remoteCandidateReceived(json.id, json.data); break; case "offer": remoteOfferReceived(json. id, json.data); break; case "risposta": remoteAnswerReceived(json.id, json.data); break; ) )

2.5.0 Offerta SDP

function remoteOfferReceived(id, data) ( createConnection(id); var pc = peers.connection; pc.setRemoteDescription(new SessionDescription(data)); pc.createAnswer(function(answer) ( pc.setLocalDescription(answer); )); ) funzione createConnection(id) ( if (peers === undefined) ( peers = (candidateCache: ); var pc = new PeerConnection(server, options); initConnection(pc, id, "answer"); peers.connection = pc ; pc.ondatachannel = function(e) ( peers.channel = e.channel; peers.channel.owner = id; bindEvents(peers.channel); ) ) )

2.5.1 Risposte SDP

function remoteAnswerReceived(id, data) ( var pc = peers.connection; pc.setRemoteDescription(new SessionDescription(data)); )

2.5.2 Candidato ICE

function remoteCandidateReceived(id, data) ( createConnection(id); var pc = peers.connection; pc.addIceCandidate(new IceCandidate(data)); )

2.6. Invio di un messaggio

Premendo il pulsante inviare viene chiamata la funzione invia messaggio. Tutto ciò che fa è scorrere l'elenco dei peer e provare a inviare il messaggio specificato a tutti.

Oggi, WebRTC è la tecnologia "calda" per lo streaming di audio e video nei browser. Tecnologie conservative come Streaming HTTP e Flash sono più adatti alla distribuzione di contenuti registrati (video on demand) e sono significativamente inferiori a WebRTC in termini di trasmissioni in tempo reale e online, ovvero dove è richiesta una latenza video minima, consentendo agli spettatori di vedere cosa sta succedendo "dal vivo".

La possibilità di una comunicazione in tempo reale di alta qualità deriva dalla stessa architettura WebRTC, in cui il protocollo UDP viene utilizzato per trasportare flussi video, che è la base standard per la trasmissione di video con ritardi minimi ed è ampiamente utilizzato nei sistemi di comunicazione in tempo reale.

La latenza della comunicazione è importante nei sistemi di live streaming, webinar e altre applicazioni in cui è richiesta una comunicazione interattiva con la sorgente video, gli utenti finali e la soluzione.

Un altro buon motivo per provare WebRTC è sicuramente una tendenza. Ogni Android oggi Browser Chrome supporta questa tecnologia, che garantisce che milioni di dispositivi siano pronti a guardare la trasmissione senza installare software e configurazioni aggiuntivi.

Per testare la tecnologia WebRTC in azione e lanciare una semplice trasmissione online su di essa, abbiamo utilizzato il software server Flashphoner WebRTC Media & Broadcasting Server. Le funzionalità dichiarano la possibilità di trasmettere flussi WebRTC in modalità uno-a-molti, nonché il supporto per telecamere IP e sistemi di videosorveglianza tramite il protocollo RTSP; in questa recensione, ci concentreremo sulle trasmissioni web-web e sulle loro caratteristiche.

Installazione di WebRTC Media & Broadcasting Server

Perchè per Sistemi Windows non esisteva una versione server e non volevo installare una macchina virtuale come VMWare + Linux, testare le trasmissioni online su Windows casa computer guasto. Per risparmiare tempo, abbiamo deciso di prendere un'istanza su cloud hosting come questa:

Era un Centos x86_64 versione 6.5 senza alcun software preinstallato in un data center di Amsterdam. Pertanto, tutto ciò che abbiamo a nostra disposizione è un server e l'accesso ssh ad esso. Per coloro che hanno familiarità con comandi della console Linux, installazione Server WebRTC promette di passare in modo semplice e indolore. Quindi cosa abbiamo fatto:

1. Scarica l'archivio:

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

2. Disimballare:

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

3. Installare:

$cd FlashphonerWebCallServer

Durante l'installazione, inserire l'indirizzo IP del server: XXX.XXX.XXX.XXX

4. Attiva licenza:

$cd /usr/local/FlashphonerWebCallServer/bin

$./attivazione.sh

5. Avvia il server WCS:

Avvio di $service webcallserver

6. Registro di controllo:

$tail - f /usr/local/FlashphonerWebCallServer/logs/flashphoner_manager.log

7. Verificare che siano presenti due processi:

$ps ausiliario | grep Flashphone

Il processo di installazione è completo.

Testare i live streaming WebRTC

Testare le trasmissioni si è rivelato una cosa semplice. Oltre al server, c'è un client web, che consiste in una dozzina di file Javascript, HTML e CSS ed è stato distribuito da noi nella cartella /var/www/html durante la fase di installazione. L'unica cosa che doveva essere fatta era inserire l'indirizzo IP del server nella configurazione flashphoner.xml in modo che il client Web potesse stabilire una connessione al server tramite Websocket HTML5. Descriviamo il processo di test.

1. Apri la pagina index.html del client di test nel browser Chrome:

2. Per avviare la trasmissione, è necessario fare clic sul pulsante "Avvia" al centro dello schermo.
Prima di farlo, devi assicurarti che la webcam sia connessa e pronta per l'uso. Non ci sono requisiti speciali per una webcam, ad esempio, abbiamo utilizzato una fotocamera standard per laptop integrata con una risoluzione di 1280 × 800.

Il browser Chrome chiederà sicuramente l'accesso alla videocamera e al microfono in modo che l'utente capisca che il suo video verrà inviato al server Internet e gli consenta di farlo.

3. L'interfaccia rappresenta una trasmissione riuscita del flusso video dalla telecamera al server WebRTC. Nell'angolo in alto a destra, l'indicatore indica che lo streaming sta andando al server, nell'angolo in basso c'è un pulsante "Stop" per interrompere l'invio del video.

Dai un'occhiata al link qui sotto. Contiene un identificatore univoco per questo flusso, quindi chiunque può unirsi alla visualizzazione. Basta aprire questo collegamento in un browser. Per copiarlo negli appunti, è necessario fare clic sul pulsante "Copia".

In applicazioni reali come webinar, conferenze, trasmissioni video online o TV interattive, gli sviluppatori dovranno implementare la distribuzione di questo identificatore a determinati gruppi di spettatori in modo che possano connettersi ai flussi desiderati, ma questa è la logica dell'applicazione. Server multimediale e di trasmissione WebRTC non incide, ma si occupa solo della distribuzione di video.

5. La connessione viene stabilita e lo spettatore vede il flusso sullo schermo. Ora può inviare il collegamento a qualcun altro, interrompere la riproduzione dello streaming o attivarlo modalità schermo intero utilizzando i controlli nell'angolo in basso a destra.

Risultati dei test del server WebRTC per le trasmissioni online

Durante i test, la latenza sembrava essere perfetta. Il ping al data center era di circa 100 millisecondi e il ritardo non era visibile a occhio nudo. Da qui, possiamo supporre che il ritardo reale sia lo stesso 100 più o meno qualche decina di millisecondi per il tempo di buffering. Rispetto al video Flash, Flash non si comporta bene come WebRTC in questi test. Quindi, se muovi la mano su una rete simile, il movimento sullo schermo può essere visto solo dopo uno / due secondi.

Per quanto riguarda la qualità, notiamo che a volte puoi distinguere i cubi sui movimenti. Ciò è in linea con la natura del codec VP8 e il suo obiettivo principale è fornire comunicazioni video in tempo reale con una qualità accettabile e senza ritardi di comunicazione.

Il server è abbastanza facile da installare e configurare, non richiede competenze serie per eseguirlo, ad eccezione della conoscenza di Linux a livello di utente avanzato che può eseguire comandi dalla console tramite ssh e utilizzare editor di testo. Di conseguenza, siamo riusciti a impostare una trasmissione online uno-a-molti tra i browser. Anche il collegamento di altri visualizzatori allo stream non ha causato problemi.

La qualità della trasmissione si è rivelata abbastanza accettabile per webinar e trasmissioni online. L'unica cosa che ha causato alcune domande è stata la risoluzione del video. La fotocamera supporta 1280x800, ma la risoluzione dell'immagine di prova è molto simile a 640x480. Apparentemente, questo problema deve essere chiarito con gli sviluppatori.

Video sui test trasmessi da una webcam
tramite server WebRTC

Lo scopo di questo articolo è di familiarizzare con la sua struttura e il principio di funzionamento su un campione demo di una chat video peer-to-peer (chat video p2p). A tale scopo, utilizzeremo la demo di chat video peer-to-peer multiutente webrtc.io-demo. Può essere scaricato dal link: https://github.com/webRTC/webrtc.io-demo/tree/master/site .

Va notato che GitHub è un sito o un servizio Web per lo sviluppo collaborativo di progetti Web. Su di esso, gli sviluppatori possono pubblicare i codici dei loro sviluppi, discuterli e comunicare tra loro. Inoltre, alcune grandi aziende IT ospitano i loro repository ufficiali su questo sito. Il servizio è gratuito per i progetti open source. GitHub è un repository di librerie open source.

Quindi, scaricato da GitHub un campione demo di una video chat peer-to-peer, lo posizioneremo sul disco C personal computer nella directory creata per la nostra applicazione "webrtc_demo".

Riso. uno

Come risulta dalla struttura (Fig. 1), una video chat peer-to-peer è costituita da script client script.js e server server.js implementati nel linguaggio di programmazione JavaScript. Script (libreria) webrtc.io.js (CLIENT) - fornisce l'organizzazione delle comunicazioni in tempo reale tra i browser secondo uno schema peer-to-peer: "client-client" e webrtc.io.js (CLIENT) e webrtc .io.js (SERVER), utilizzando il protocollo WebSocket, forniscono la comunicazione duplex tra il browser e il web server utilizzando l'architettura "client-server".

Lo script webrtc.io.js (SERVER) è incluso nella libreria webrtc.io e si trova nella directory node_modules\webrtc.io\lib. L'interfaccia di chat video index.html è implementata in HTML5 e CSS3. Il contenuto dei file dell'applicazione webrtc_demo può essere visualizzato con uno degli editor html, ad esempio "Notepad++".

Verificheremo il principio del funzionamento della chat video sistema di file pc. Per eseguire il server (server.js) su un PC, è necessario installare il runtime node.js. Node.js ti consente di eseguire codice JavaScript al di fuori del browser. Puoi scaricare node.js dal link: http://nodejs.org/ (versione v0.10.13 del 15/07/13). Sul pagina principale node.org, fai clic sul pulsante di download e vai su http://nodejs.org/download/. Per utenti Windows prima scarica win.installer (.msi), quindi esegui win.installer (.msi) su PC e installa nodejs e "npm package manager" nella directory Program Files.

Riso. 2

Pertanto, node.js è costituito da un ambiente di sviluppo ed esecuzione JavaScript, nonché da un insieme di moduli interni che possono essere installati utilizzando il gestore di pacchetti npm o il gestore di pacchetti.

Per installare i moduli, è necessario riga di comando dalla directory dell'applicazione (ad esempio, "webrtc_demo") eseguire il comando: npm installa nome_modulo. Durante l'installazione dei moduli, il gestore npm crea una cartella node_modules nella directory da cui è stata eseguita l'installazione. Durante l'esecuzione, nodejs include automaticamente i moduli dalla directory node_modules.

Quindi, dopo aver installato node.js, apri la riga di comando e aggiorna il modulo express nella cartella node_modules della directory webrtc_demo utilizzando il gestore di pacchetti npm:

C:\webrtc_demo>npm install express

Il modulo express è un framework web per node.js o piattaforma di sviluppo di applicazioni web. Per avere accesso globale a express, puoi installarlo in questo modo: npm installa -g espresso.

Quindi aggiorniamo il modulo webrtc.io:

C:\webrtc_demo>npm installa webrtc.io

Quindi, sulla riga di comando, avviamo il server: server.js:

C:\webrtc_demo>nodeserver.js

Riso. 3

Tutto, il server funziona correttamente (Figura 3). Ora, utilizzando un browser Web, è possibile contattare il server tramite indirizzo IP e scaricare la pagina Web index.html, da cui il browser Web estrarrà il codice dello script client - script.js e il codice dello script webrtc.io.js, ed eseguirli. Affinché una video chat peer-to-peer funzioni (per stabilire una connessione tra due browser), è necessario che due browser che supportano webrtc contattino il server di segnale in esecuzione su node.js tramite indirizzo ip.

Di conseguenza, l'interfaccia della parte client dell'applicazione di comunicazione (chat video) si aprirà con una richiesta di autorizzazione per accedere alla telecamera e al microfono (Fig. 4).

Riso. quattro

Dopo aver fatto clic sul pulsante "Consenti", la fotocamera e il microfono sono collegati per la comunicazione multimediale. Inoltre, tramite l'interfaccia di chat video, è possibile comunicare con dati testuali (Fig. 5).

Riso. 5

Si dovrebbe notare che . Il server sta segnalando ed è progettato principalmente per stabilire una connessione tra i browser degli utenti. Lo script server.js che fornisce la segnalazione WebRTC utilizza Node.js per l'esecuzione.