Prima di tutto devi capire che mostrare tutti gli indirizzi IP del tuo computer/tablet/telefono tramite WebRTC non è un problema o un difetto di VPN/tor/socks, è un problema e un difetto del browser che stai utilizzando .

Il progetto WebRTC nasce da Google per trasferire dati in streaming (audio e video) principalmente direttamente tra i browser degli utenti (connessioni p2p), senza partecipazione programmi di terze parti(es. Skype) o plugin. Ciò implica non solo l'accesso da parte di un browser abilitato per WebRTC all'ambiente di rete (indipendentemente dal sistema operativo utilizzato), ma la capacità di determinare l'indirizzo IP pubblico e locale utilizzando il protocollo STUN per stabilire una connessione p2p bypassando tutti i tipi di NAT.

Sul questo momentoÈ noto che per impostazione predefinita WebRTC è abilitato nei browser Chrome (dalla versione 23), Firefox (dalla versione 22) e Opera (dalla versione 18), il che generalmente annulla tutti i metodi di anonimizzazione per gli utenti di questi browser. Per rendere impossibile determinare il tuo indirizzo IP pubblico e locale tramite WebRTC, devi, stranamente, disabilitarne il supporto.

Disabilitazione di WebRTC in Firefox:

• A barra degli indirizzi digita about:config e premi Invio
• Nella riga di ricerca, immettere "media.peerconnection.enabled" e fare doppio clic sulla riga trovata, impostando così il campo Valore su "false".

Disabilitazione di WebRTC in Chrome e Opera:

• Al momento, non è noto un modo per disabilitare WebRTC utilizzando i browser stessi e non possiamo consigliare soluzioni alternative sotto forma di estensioni (cercarle e installarle a proprio rischio e pericolo), poiché la loro efficacia lascia molto a desiderare . Pertanto, a quanto pare, non resta che consigliare di non utilizzare questi browser fino a quando gli sviluppatori non implementeranno la possibilità di disabilitare i mezzi dei browser stessi (simile a Firefox).

Disabilitazione di WebRTC su Android in Chrome:

• A ultime versioni browser Chrome per Android, non è possibile disabilitare WebRTC, sebbene sia presente tale opzione nelle impostazioni.
• Se devi utilizzare un browser con WebRTC disabilitato su Android, ti consigliamo di utilizzare Firefox per Android. Su di esso, puoi disabilitare WebRTC seguendo le stesse istruzioni per Firefox, che è sopra.

Le tecnologie per le chiamate dal browser esistono da molti anni: Java, ActiveX, Adobe Flash... Negli ultimi anni, è diventato chiaro che i plugin e se ne sono andati macchine virtuali non brillano di praticità (perché dovrei installare qualcosa?) e, soprattutto, di sicurezza. Cosa fare? C'è un'uscita!

Fino a poco tempo, nelle reti IP venivano utilizzati diversi protocolli per la telefonia IP o il video: SIP, il protocollo più comune che esce di scena, H.323 e MGCP, Jabber/Jingle (usato in Gtalk), il semiaperto Adobe RTMP* e , ovviamente, lo Skype chiuso. Il progetto WebRTC, avviato da Google, sta cercando di dare una svolta al mondo della telefonia IP e web rendendo obsoleti tutti i softphone, Skype compreso. WebRTC non implementa solo tutto capacità di comunicazione direttamente all'interno del browser, che ormai è installato su quasi tutti i dispositivi, ma allo stesso tempo cerca di risolvere un compito più generale di comunicazione tra utenti del browser (scambio di dati vari, screen casting, collaborazione con documenti e molto altro).

WebRTC da uno sviluppatore web

Dal punto di vista di uno sviluppatore web, WebRTC è composto da due parti principali:

• controllo dei flussi multimediali da risorse locali (telecamera, microfono o schermo computer locale) è implementato dal metodo navigator.getUserMedia, che restituisce un oggetto MediaStream;
• comunicazioni peer-to-peer tra dispositivi che generano flussi multimediali, inclusa la definizione dei metodi di comunicazione e la loro trasmissione diretta - oggetti RTCPeerConnection (per inviare e ricevere flussi audio e video) e RTCDataChannel (per inviare e ricevere dati dal browser).

Cosa facciamo?

Scopriremo come organizzare la più semplice chat video multiplayer tra browser attivi basato su WebRTC utilizzando prese web. Iniziamo a sperimentare in Chrome/Chromium, in quanto i più avanzati in termini di Browser WebRTC, anche se Firefox 22, rilasciato il 24 giugno, li ha quasi raggiunti. C'è da dire che lo standard non è stato ancora adottato e l'API potrebbe cambiare da versione a versione. Tutti gli esempi sono stati testati in Chromium 28. Per semplicità, non controlleremo la pulizia del codice e la compatibilità cross-browser.

mediastream

Il primo e più semplice componente WebRTC è MediaStream. Fornisce al browser l'accesso ai flussi multimediali dalla fotocamera e dal microfono del computer locale. In Chrome, ciò richiede la chiamata della funzione navigator.webkitGetUserMedia() (poiché lo standard non è ancora finalizzato, tutte le funzioni hanno un prefisso e in Firefox la stessa funzione è chiamata navigator.mozGetUserMedia()). Quando viene chiamato, all'utente verrà chiesto di consentire l'accesso alla telecamera e al microfono. Sarà possibile continuare la chiamata solo dopo che l'utente ha dato il suo consenso. I parametri del flusso multimediale richiesto e due funzioni di richiamata vengono passati come parametri a questa funzione: la prima verrà chiamata in caso di accesso riuscito alla telecamera/microfono, la seconda in caso di errore. Per prima cosa, creiamo un file HTML rtctest1.html con un pulsante e un elemento

getUserMedia

Microsoft CU-RTC-Web

Microsoft non sarebbe Microsoft se, in risposta all'iniziativa di Google, non rilasciasse immediatamente la propria variante personalizzata incompatibile chiamata CU-RTC-Web (html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web. htm). Sebbene la quota di IE, già piccola, continui a diminuire, il numero di utenti Skype dà a Microsoft la speranza di spingere Google e si può presumere che questo standard verrà utilizzato nel browser. Versioni Skype. Lo standard di Google si concentra principalmente sulla comunicazione da browser a browser; allo stesso tempo, la maggior parte del traffico vocale rimane ancora nella rete telefonica convenzionale e sono necessari gateway tra essa e le reti IP non solo per facilità d'uso o distribuzione più rapida, ma anche come mezzo di monetizzazione che consentirà Di più giocatori per svilupparli. La comparsa di un altro standard non solo può portare a una spiacevole necessità per gli sviluppatori di supportare due tecnologie incompatibili contemporaneamente, ma anche in futuro offrire all'utente una scelta più ampia di funzionalità possibili e disponibili soluzioni tecniche. Aspetta e vedi.

Abilita thread locale

Tag interni Nel nostro file HTML, dichiariamo una variabile globale per il flusso multimediale:

VarlocalStream = nullo;

Il primo parametro del metodo getUserMedia consiste nello specificare i parametri del flusso multimediale richiesto, ad esempio abilitare semplicemente l'audio o il video:

Var streamConstraints = ( "audio": true, "video": true ); // Richiedi l'accesso sia all'audio che al video

Oppure specifica opzioni aggiuntive:

Var streamConstraints = ( "audio": true, "video": ( "obbligatorio": ( "maxWidth": "320", "maxHeight": "240", "maxFrameRate": "5" ), "optional": ) );

Il secondo parametro del metodo getUserMedia consiste nel passare una funzione di callback che verrà chiamata se ha esito positivo:

Funzione getUserMedia_success(stream) ( console.log("getUserMedia_success():", stream); localVideo1.src = URL.createObjectURL(stream); // Allega flusso multimediale all'elemento HTML

Il terzo parametro è una funzione di callback, un gestore di errori che verrà chiamato in caso di errore.

Funzione getUserMedia_error(error) ( console.log("getUserMedia_error():", errore); )

La chiamata effettiva al metodo getUserMedia - che richiede l'accesso al microfono e alla videocamera quando viene premuto il primo pulsante

Funzione getUserMedia_click() ( console.log("getUserMedia_click()"); navigator.webkitGetUserMedia(streamConstraints, getUserMedia_success, getUserMedia_error); )

Non è possibile accedere al flusso multimediale da un file aperto localmente. Se proviamo a farlo, otteniamo un errore:

NavigatorUserMediaError (codice: 1, PERMISSION_DENIED: 1)"

Carichiamo il file risultante sul server, apriamolo nel browser e, in risposta alla richiesta che compare, consentiamo l'accesso alla telecamera e al microfono.

Puoi selezionare a quali dispositivi Chrome accederà in Impostazioni, Mostra collegamento alle impostazioni avanzate, sezione Privacy, pulsante Contenuti. Nei browser Firefox e Opera, i dispositivi vengono selezionati dall'elenco a discesa direttamente quando viene concesso l'accesso.

Quando si utilizza il protocollo HTTP, l'autorizzazione verrà richiesta ogni volta che si accede a un flusso multimediale dopo il caricamento della pagina. Il passaggio a HTTPS ti consentirà di visualizzare la richiesta una volta, solo al primo accesso al flusso multimediale.

Presta attenzione al cerchio pulsante nell'icona sulla scheda e all'icona della fotocamera sul lato destro della barra degli indirizzi:

RTCMediaConnection

RTCMediaConnection - un oggetto progettato per stabilire e trasferire flussi multimediali sulla rete tra i partecipanti. Inoltre, questo oggetto è responsabile della generazione di una descrizione della sessione multimediale (SDP), dell'ottenimento di informazioni sui candidati ICE per il passaggio tramite NAT o firewall (locali e tramite STUN) e dell'interazione con il server TURN. Ciascun partecipante deve disporre di un RTCMediaConnection per connessione. I flussi multimediali vengono trasmessi tramite il protocollo SRTP crittografato.

Server TURN

Esistono tre tipi di candidati ICE: host, srflx e relay. L'host contiene le informazioni ottenute localmente, srflx è l'aspetto dell'host a un server esterno (STUN) e l'inoltro è l'informazione per l'inoltro del traffico tramite il server TURN. Se il nostro nodo è dietro un NAT, i candidati host conterranno indirizzi locali e saranno inutili, i candidati srflx aiuteranno solo con alcuni tipi di NAT e il relay sarà l'ultima speranza per far passare il traffico attraverso un server intermedio.

Un esempio di candidato ICE di tipo host, con indirizzo 192.168.1.37 e porta udp/34022:

A=candidato:337499441 2 udp 2113937151 192.168.1.37 34022 typ generazione host 0

Formato generale per specificare i server STUN/TURN:

Var server = ( "iceServers": [ ( "url": "stun:stun.stunprotocol.org:3478" ), ( "url": "turn: [email protetta]:porta", "credenziale": "password" ) ]);

Ci sono molti server STUN pubblici su Internet. Un grande elenco, ad esempio, è . Sfortunatamente, risolvono troppo pochi dei problemi. Non ci sono praticamente server TURN pubblici, a differenza di STUN. Ciò è dovuto al fatto che il server TURN trasmette flussi multimediali attraverso se stesso, il che può caricare in modo significativo sia il canale di rete che il server stesso. Pertanto, il modo più semplice per connettersi ai server TURN è installarlo da soli (ovviamente, avrai bisogno di un IP pubblico). Di tutti i server, secondo me, il migliore è rfc5766-turn-server . Sotto c'è anche immagine finita per Amazon EC2.

Con TURN, non tutto va bene come vorremmo, ma lo sviluppo attivo è in corso e mi auguro che dopo qualche tempo WebRTC, se non raggiungerà Skype in termini di qualità della traduzione degli indirizzi di passaggio ( NAT) e firewall, almeno si avvicinano notevolmente.

RTCMediaConnection necessita di un meccanismo aggiuntivo per lo scambio di informazioni di controllo per stabilire una connessione: sebbene generi questi dati, non li trasmette e la trasmissione da parte di altri partecipanti deve essere implementata separatamente.

La scelta del metodo di trasmissione è responsabilità dello sviluppatore, almeno manualmente. Non appena i dati necessari vengono scambiati, RTCMediaConnection imposterà automaticamente i flussi multimediali (se possibile, ovviamente).

modello offerta-risposta

Per stabilire e modificare i flussi multimediali, vengono utilizzati il ​​modello di offerta/risposta (offerta/risposta; descritto in RFC3264) e il protocollo SDP (Session Description Protocol). Sono utilizzati anche dal protocollo SIP. In questo modello si distinguono due agenti: Offerente - colui che genera una descrizione di sessione SDP per crearne una nuova o modificarne una esistente (Offer SDP) e Risponditore - colui che riceve una descrizione di sessione SDP da un altro agente e risponde a esso con la propria descrizione della sessione (Answer SDP). Allo stesso tempo, la specifica richiede un protocollo di più di alto livello(ad esempio, SIP o le tue prese Web, come nel nostro caso), che è responsabile del trasferimento di SDP tra agenti.

Quali dati devono essere passati tra due RTCMediaConnections in modo che possano stabilire correttamente flussi multimediali:

• Il primo soggetto che avvia la connessione forma un'Offerta in cui trasmette una struttura dati SDP (lo stesso protocollo viene utilizzato per lo stesso scopo in SIP) descrivendo le possibili caratteristiche del flusso multimediale che sta per iniziare a trasmettere. Questo blocco dati deve essere trasferito al secondo partecipante. Il secondo partecipante genera una risposta con il suo SDP e la invia al primo.
• Sia il primo che il secondo partecipante eseguono la procedura per determinare i possibili candidati ICE, con l'aiuto del quale il secondo partecipante può trasferire loro il flusso multimediale. Quando i candidati vengono identificati, le informazioni su di loro dovrebbero essere trasferite a un altro partecipante.

Offerta Formazione

Per formare un'Offerta, abbiamo bisogno di due funzioni. Il primo sarà chiamato in caso di riuscita formazione. Il secondo parametro del metodo createOffer() è una funzione di callback chiamata in caso di errore durante la sua esecuzione (a condizione che il flusso locale sia già disponibile).

Inoltre, sono necessari due gestori di eventi: onicecandidate quando si definisce un nuovo candidato ICE e onaddstream quando si connette un flusso multimediale dal lato opposto. Torniamo al nostro fascicolo. Aggiungi a HTML dopo le righe con gli elementi un altro:

creare un'offerta

E dopo la linea con l'elemento

Inoltre, all'inizio del codice JavaScript, dichiareremo una variabile globale per RTCPeerConnection:

varpc1;

Quando si chiama il costruttore RTCPeerConnection, è necessario specificare i server STUN/TURN. Vedi la barra laterale per maggiori dettagli; fintanto che tutti i partecipanti sono sulla stessa rete, non sono necessari.

var server = null;

Opzioni per l'offerta di fornitura SDP

var offerConstraints = ();

Il primo parametro del metodo createOffer() è una funzione di callback chiamata dopo la corretta formazione di un'offerta

Funzione pc1_createOffer_success(desc) ( console.log("pc1_createOffer_success(): \ndesc.sdp:\n"+desc.sdp+"desc:", desc); pc1.setLocalDescription(desc); // Imposta il RTCPeerConnection generato dal Offri il metodo setLocalDescription dell'SDP. // Quando il lato opposto invia il suo SDP di risposta, dovrà essere impostato utilizzando il metodo setRemoteDescription // Fino all'implementazione del secondo lato, non fare nulla // pc2_receivedOffer(desc); )

Il secondo parametro è una funzione di callback che verrà chiamata in caso di errore

Funzione pc1_createOffer_error(error)( console.log("pc1_createOffer_success_error(): error:", error); )

E dichiareremo una funzione di callback a cui verranno passati i candidati ICE così come sono definiti:

Funzione pc1_onicecandidate(event)( if (event.candidate) ( console.log("pc1_onicecandidate():\n"+ event.candidate.candidate.replace("\r\n", ""), event.candidate); // Non fare nulla fino a quando non viene implementato il secondo lato // pc2.addIceCandidate(new RTCIceCandidate(event.candidate)); ) )

Oltre a una funzione di callback per aggiungere un flusso multimediale dal lato opposto (per il futuro, poiché finora abbiamo solo un RTCPeerConnection):

Funzione pc1_onaddstream(event) ( console.log("pc_onaddstream()"); remoteVideo1.src = URL.createObjectURL(event.stream); )

Quando si fa clic sul pulsante "createOffer", si crea una RTCPeerConnection, si impostano i metodi onicecandidate e onaddstream e si richiede la formazione di un'offerta SDP chiamando il metodo createOffer():

Funzione createOffer_click() ( console.log("createOffer_click()"); pc1 = new webkitRTCPeerConnection(server); // Crea un RTCPeerConnection pc1.onicecandidate = pc1_onicecandidate; // Funzione di callback per elaborare i candidati ICE pc1.onaddstream = pc1_onaddstream; / / Funzione di callback chiamata quando c'è un flusso multimediale dal lato opposto, non esiste ancora pc1.addStream(localStream); // Passa il flusso multimediale locale (supponendo che sia già stato ricevuto) pc1.createOffer(// E in realtà richiedere la formazione dell'Offerta pc1_createOffer_success , pc1_createOffer_error, offerConstraints); )

Salviamo il file come rtctest2.html, mettiamolo sul server, apriamolo in un browser e vediamo nella console quali dati vengono generati durante il suo funzionamento. Il secondo video non apparirà ancora, poiché c'è un solo partecipante. Ricordiamo che SDP è una descrizione dei parametri della sessione multimediale, codec disponibili, flussi multimediali e candidati ICE sono possibili opzioni per la connessione a questo partecipante.

Formazione di Answer SDP e scambio di candidati ICE

Sia l'Offerta SDP che ciascuno dei candidati ICE devono essere passati all'altra parte, e lì, dopo averli ricevuti da RTCPeerConnection, chiamare i metodi setRemoteDescription per l'Offerta SDP e addIceCandidate per ogni candidato ICE ricevuto dal lato opposto; allo stesso modo al contrario per i candidati Answer SDP e ICE remoto. La stessa Answer SDP è formata in maniera analoga all'Offerta; la differenza è che non viene chiamato il metodo createOffer, ma il metodo createAnswer, e prima di questo RTCPeerConnection, il metodo setRemoteDescription passa l'offerta SDP ricevuta dal chiamante.

Aggiungiamo un altro elemento video all'HTML:

E una variabile globale per il secondo RTCPeerConnection sotto la dichiarazione del primo:

Varpc2;

Elaborazione offerta e risposta SDP

La formazione di un SDP di risposta è molto simile a un'offerta. Nella funzione di callback chiamata dopo la corretta formazione della risposta, analogamente all'offerta, forniremo una descrizione locale e passeremo l'SDP di risposta ricevuto al primo partecipante:

Funzione pc2_createAnswer_success(desc) ( pc2.setLocalDescription(desc); console.log("pc2_createAnswer_success()", desc.sdp); pc1.setRemoteDescription(desc); )

La funzione di callback richiamata in caso di errore durante la generazione della Risposta è del tutto simile all'Offerta:

Funzione pc2_createAnswer_error(error) ( console.log("pc2_createAnswer_error():", error); )

Parametri per la generazione di Answer SDP:

Var answerConstraints = ( "obbligatorio": ("OfferToReceiveAudio":true, "OfferToReceiveVideo":true ) );

Quando il secondo partecipante riceve un'Offerta, crea un RTCPeerConnection e forma una Risposta allo stesso modo dell'Offerta:

Funzione pc2_receivedOffer(desc) ( console.log("pc2_receiveOffer()", desc); // Crea un oggetto RTCPeerConnection per il secondo partecipante simile al primo pc2 = new webkitRTCPeerConnection(servers); pc2.onicecandidate = pc2_onicecandidate; // Imposta il gestore di eventi quando ICE candidato pc2.onaddstream = pc_onaddstream; // Quando viene visualizzato uno stream, collegalo all'HTML

Per trasferire l'Offerta SDP dal primo partecipante al secondo, come parte del nostro esempio, decommentare nella funzione pc1 creare un'offerta success() stringa di chiamata:

Pc2_receivedOffer(desc);

Per implementare l'elaborazione dei candidati ICE, decommentare nel gestore dell'evento ICE candidate readiness del primo partecipante pc1_onicecandidate() la sua trasmissione al secondo:

Pc2.addIceCandidate(nuovo RTCIceCandidate(event.candidate));

Il gestore dell'evento di prontezza del candidato ICE del secondo partecipante è simile al primo:

Funzione pc2_onicecandidate(event) ( if (event.candidate) ( console.log("pc2_onicecandidate():", event.candidate.candidate); pc1.addIceCandidate(new RTCIceCandidate(event.candidate)); ) )

Funzione di richiamata per aggiungere un flusso multimediale dal primo partecipante:

Funzione pc2_onaddstream(event) ( console.log("pc_onaddstream()"); remoteVideo2.src = URL.createObjectURL(event.stream); )

Terminare una connessione

Aggiungiamo un altro pulsante in HTML

appendere

E una funzione per terminare la connessione

Funzione btnHangupClick() ( // Disabilita il video locale dagli elementi HTML

Salviamolo come rtctest3.html, mettiamolo sul server e apriamolo nel browser. Questo esempio implementa lo streaming multimediale bidirezionale tra due RTCPeerConnections all'interno della stessa scheda del browser. Per organizzare lo scambio di Offerta e Risposta SDP, candidati ICE tra partecipanti e altre informazioni attraverso la rete, sarà necessario attuare lo scambio tra partecipanti utilizzando una sorta di mezzo di trasporto, nel nostro caso prese web, anziché una chiamata diretta a procedure.

Trasmissione sullo schermo

Con la funzione getUserMedia, puoi anche catturare lo schermo e trasmettere in streaming come MediaStream specificando i seguenti parametri:

Var mediaStreamConstraints = ( audio: false, video: ( obbligatorio: ( chromeMediaSource: "screen"), facoltativo: ) );

Per un accesso corretto allo schermo, devono essere soddisfatte diverse condizioni:

• abilita il flag dello screenshot in getUserMedia() in chrome://flags/,chrome://flags/;
• il file sorgente deve essere scaricato tramite HTTPS (origine SSL);
• il flusso audio non deve essere richiesto;
• non devono essere effettuate più richieste nella stessa scheda del browser.

Librerie per WebRTC

Sebbene WebRTC non sia ancora completo, sono già apparse diverse librerie basate su di esso. JsSIP è progettato per creare softphone basati su browser che funzionano con switch SIP come Asterisk e Camalio. PeerJS semplificherà la creazione di reti P2P per lo scambio di dati e Holla ridurrà la quantità di sviluppo richiesta per la comunicazione P2P dai browser.

Node.js e socket.io

Per organizzare lo scambio di candidati SDP e ICE tra due RTCPeerConnection sulla rete, utilizziamo Node.js con il modulo socket.io.

Viene descritta l'installazione dell'ultima versione stabile di Node.js (per Debian/Ubuntu).

$ sudo apt-get install python-software-properties python g++ make $ sudo add-apt-repository ppa:chris-lea/node.js $ sudo apt-get update $ sudo apt-get install nodejs

Installazione per altri Sistemi operativi descritto

Controlliamo:

$ echo "sys=require("util"); sys.puts("Messaggio di prova");" > nodetest1.js $ nodejs nodetest1.js

Usando npm (Node Package Manager) installa socket.io e il modulo express aggiuntivo:

$ npm installa socket.io express

Verifichiamolo creando un file nodetest2.js lato server:

$ nano nodetest2.js var app = require("express")() , server = require("http").createServer(app) , io = require("socket.io").ascolta(server); server.ascolta(80); // Se la porta 80 è gratuita app.get("/", function (req, res) ( // Quando si accede alla pagina principale res.sendfile(__dirname + "/nodetest2.html"); // fornire il file HTML ) ) ; io.sockets.on("connection", function (socket) ( // On connection socket.emit("server event", ( hello: "world" )); // send message socket.on("client event", function (data) ( // e dichiara un gestore di eventi quando arriva un messaggio dal client console.log(data); )); ));

E nodetest2.html per il lato client:

$nanonodetest2.html

Avviamo il server:

$ sudo nodejs nodetest2.js

e aprire la pagina http://localhost:80 (se in esecuzione localmente sulla porta 80) in un browser. Se tutto va a buon fine, nella console JavaScript del browser vedremo lo scambio di eventi tra browser e server al momento della connessione.

Scambio di informazioni tra RTCPeerConnection tramite prese web

Dalla parte del cliente

Salviamo il nostro esempio principale (rtcdemo3.html) con il nuovo nome rtcdemo4.html. Includere la libreria socket.io nell'elemento:

E all'inizio dello script JavaScript - connessione socket web:

var socket = io.connect("http://localhost");

Sostituiamo una chiamata diretta alle funzioni di un altro partecipante inviandogli un messaggio tramite web socket:

Funzione createOffer_success(desc) ( ... // pc2_receivedOffer(desc); socket.emit("offer", desc); ... ) funzione pc2_createAnswer_success(desc) ( ... // pc1.setRemoteDescription(desc); socket .emit("answer", desc); ) function pc1_onicecandidate(event) ( ... // pc2.addIceCandidate(new RTCIceCandidate(event.candidate)); socket.emit("ice1", event.candidate); .. .) funzione pc2_onicecandidate(event) ( ... // pc1.addIceCandidate(new RTCIceCandidate(event.candidate)); socket.emit("ice2", event.candidate); ... )

Nella funzione hangup(), invece di chiamare direttamente le funzioni del secondo partecipante, invieremo un messaggio tramite web socket:

Funzione btnHangupClick() ( ... // remoteVideo2.src = ""; pc2.close(); pc2 = null; socket.emit("hangup", ()); )

E aggiungi i gestori di ricezione dei messaggi:

Socket.on("offerta", funzione (dati) ( console.log("socket.on("offerta"):", dati); pc2_receivedOffer(dati); )); socket.on("risposta", funzione (dati) (e console.log("socket.on("risposta"):", dati); pc1.setRemoteDescription(new RTCSessionDescription(dati)); )); socket.on("ice1", function (data) ( console.log("socket.on("ice1"):", data); pc2.addIceCandidate(new RTCIceCandidate(data)); )); socket.on("ice2", function (data) ( console.log("socket.on("ice2"):", data); pc1.addIceCandidate(new RTCIceCandidate(data)); )); socket.on("hangup", function (data) ( console.log("socket.on("hangup")):", data); remoteVideo2.src = ""; pc2.close(); pc2 = null; ) );

Parte server

Sul lato server, salva il file nodetest2 con il nuovo nome rtctest4.js e all'interno della funzione io.sockets.on("connection", function (socket) ( ... ) aggiungi la ricezione e l'invio di messaggi client:

Socket.on("offerta", function (data) ( // Quando viene ricevuto un messaggio di "offerta", // poiché la connessione client in questo esempio solo uno, // invia un messaggio indietro tramite lo stesso socket socket.emit("offer", data); // Se fosse necessario inoltrare il messaggio su tutte le connessioni // tranne il mittente: // socket.broadcast.emit("offer", data); )); socket.on("risposta", funzione (dati) ( socket.emit("risposta", dati); )); socket.on("ice1", funzione (dati) ( socket.emit("ice1", dati); )); socket.on("ice2", funzione (dati) ( socket.emit("ice2", dati); )); socket.on("hangup", funzione (dati) ( socket.emit("hangup", dati); ));

Inoltre, cambia il nome del file HTML:

// res.sendfile(__dirname + "/nodetest2.html"); // Fornisci il file HTML res.sendfile(__dirname + "/rtctest4.html");

Avvio del server:

$ sudo nodejs nodetest2.js

Nonostante il codice di entrambi i client venga eseguito all'interno della stessa scheda del browser, tutte le interazioni tra i partecipanti al nostro esempio vengono eseguite completamente attraverso la rete e non è più difficile "diffondere" i partecipanti. Tuttavia, ciò che abbiamo fatto è stato anche molto semplice: queste tecnologie sono buone per la loro facilità d'uso. Anche se a volte ingannevole. In particolare non dimentichiamo che senza i server STUN/TURN, il nostro esempio non potrà funzionare in presenza di traslazione degli indirizzi e firewall.

Conclusione

L'esempio risultante è molto condizionale, ma se universalizziamo leggermente i gestori di eventi in modo che non differiscano tra le parti chiamanti e chiamate, invece di due oggetti pc1 e pc2, creiamo un array di RTCPeerConnection e implementiamo creazione dinamica e la rimozione di elementi

Si può presumere che molto presto, grazie a WebRTC, ci sarà una rivoluzione non solo nella nostra comprensione delle comunicazioni vocali e video, ma anche nel modo in cui percepiamo Internet nel suo insieme. WebRTC si posiziona non solo come tecnologia di chiamata da browser a browser, ma anche come tecnologia di comunicazione in tempo reale. Il collegamento video che abbiamo analizzato è solo una piccola parte di esso. opzioni il suo uso. Esistono già esempi di condivisione dello schermo (condivisione dello schermo) e collaborazione e persino una rete di distribuzione di contenuti P2P basata su browser che utilizza RTCDataChannel.

Sforzati di fornire il massimo trasmissione efficiente lo streaming di dati tra browser porta all'emergere di tecnologie sempre più avanzate, ma possono anche diventare fonte di nuove preoccupazioni per gli utenti che apprezzano la privacy e la sicurezza su Internet. Una di queste tecnologie è Comunicazioni in tempo reale o abbreviato come un insieme API-interfacce utilizzate, in particolare, per fornire comunicazioni vocali e video nei browser.

Attualmente supporta i browser Web più diffusi, inclusi Google Chrome , Mozilla Firefox , musica lirica e Microsoft Edge . Questa tecnologia, utile sotto molti aspetti, presenta, invece, un notevole inconveniente, in quanto rende reale IP-user anche se utilizzato dall'ultimo VPN e altri strumenti per la privacy in rete globale. Non tutti, tuttavia, i siti utilizzano , ma non tutti i browser consentono di disattivarlo, almeno tramite le impostazioni principali. Di seguito mostriamo come disabilitare nei browser più diffusi, ma per ora scopriamo come determinare se un sito utilizza questa tecnologia.

Se hai Google Chrome o altro basato su browser Cromo (Opera, Yandex, ecc.), apri la risorsa web analizzata, quindi vai all'indirizzo in una nuova scheda chrome://webrtc-internals . Se il sito ha tentato di installare -connection, vedrai un'immagine come lo screenshot (l'indirizzo del sito sarà elencato in alto).

In caso contrario, la pagina sarà simile a questa:

Se lo hai, apri anche il sito e vai all'indirizzo in una nuova scheda su:webrtc. usando il sito verrà visualizzato nella sezione "Statistiche di sessione" in caso contrario la sezione sarà vuota.

Sfortunatamente, gli sviluppatori di browser finora hanno fatto orecchie da mercante alle richieste degli utenti da fare disabilitato per impostazione predefinita, quindi devi agire da solo. Il modo più semplice per disattivare la tecnologia è farlo . Per fare ciò, apri la pagina del servizio, premi il pulsante "Sto correndo il rischio", trova il parametro , fai doppio clic per cambiarne il valore VERO sul falso e riavvia il browser.

In alternativa, puoi utilizzare l'estensione installandola da negozio Componenti aggiuntivi di Firefox . Meglio ancora, scarica l'utilità, eseguila e seleziona l'opzione nell'elenco dei parametri visualizzati da essa. (situato sotto Media, Fotocamera, Microfono) .

DA Google Chrome tutto è un po' più complicato. Nelle sue impostazioni nascoste non c'è alcuna opzione che ti permetta di disabilitare , ma puoi provare a farlo con un'estensione di terze parti ScriptSafe. Una volta installato, il plugin disabilita gli script, inclusi , è un peccato che il metodo abbia uno svantaggio, perché nessuno può garantire che i siti funzioneranno correttamente dopo. Lo stesso plugin può essere utilizzato per disabilitare in musica lirica e (cerca le versioni nei negozi di componenti aggiuntivi) .

Molti utenti non sanno nemmeno cosa sia WebRTC (beh, niente di interessante in linea di principio) e che questa tecnologia può tradirti se usi un proxy ... e anche Tor! WebRCT se in parole povere, allora questa è una cosa del genere che è stata creata Google per garantire il trasferimento di un qualche tipo di dati in streaming tra browser o altri programmi che supportano questa cosa.

Ma non so dove venga utilizzato, ma WebRTC dovrebbe essere disabilitato, poiché può facilmente fornire il tuo indirizzo IP con frattaglie ... e cosa più interessante, puoi verificarlo utilizzando il sito Web IPLeak.net (crealo segnalibro meglio) - attiva la VPN o imposta un proxy e guarda cosa ti offre questo sito

E ti darà informazioni molto, molto interessanti: in alto ci sarà un proxy o un indirizzo VPN, ma in fondo è solo tuo, anche se l'hai cambiato come:

Qual è la cosa migliore da fare, come sbarazzarsi di questo stipite? Devi disabilitare del tutto questa tecnologia nel tuo browser! Oggi è sicuramente possibile in Chrome e Mozilla, questi sono comunque in linea di principio i browser più diffusi, soprattutto considerando che molti altri sono basati anche su Chrome.

Quindi disabilitare Tecnologia WebRTC da Google, devi usare l'estensione ufficiale di Google, beh, è ​​divertente, puoi scaricarla da questo link dallo store.

Vai avanti, fai clic su INSTALLA:

Ora confermiamo:

L'estensione è installata, puoi verificarla, andare di nuovo su IPLeak.net e verificare che ora WebRTC non interferisca più con il nostro anonimato.

Bene, che dire di Mozilla? Anche qui non è difficile, aprilo e scrivi nella barra degli indirizzi in questo modo - about: config, dopodiché arriveremo a una pagina speciale con una serie di parametri.

Ora devi inserire nella ricerca (nella riga in alto) questo parametro - media.peerconnection.enabled e modificare il valore da true a false:

Ecco fatto, puoi riavviare il browser e controllare, ora il tuo indirizzo IP non sarà visibile sulla rete quando utilizzi una VPN o un proxy. Come ho già scritto, è possibile che altri browser basati su Chrome possano utilizzare l'estensione di cui sopra, ma non ci sono garanzie, e soprattutto browser Opera(Sembra anche utilizzare il motore di Chrome). Finora, funziona di sicuro in Chrome e Mozilla!

02.02.2016

La schermata seguente indica che la funzione WebRTC è abilitata nel browser. Inoltre, il sito fornisce altre informazioni interessanti.

Come disabilitare WebRTC?

Di tutti i browser moderni, Firefox è il più addestrabile. E in questo caso particolare, Firefox ha mostrato il suo lato migliore, consentendo all'utente di disabilitare WebRTC utilizzando impostazioni nascoste senza utilizzare componenti aggiuntivi di terze parti.

Disabilitare WebRTC Firefox

Per disabilitare il browser Firefox, devi inserire il comando about:config nella barra degli indirizzi, dopodiché apparirà questo messaggio.

Fare clic sul pulsante "Prometto ..." e continuare.

Nella finestra delle impostazioni, nella barra di ricerca (non nella barra degli indirizzi!), come mostrato nella schermata seguente, inserisci il comando media.peerconnection.enabled . Apparirà la linea di cui abbiamo bisogno. Cliccaci sopra con il tasto destro del mouse e seleziona la prima voce nel menu a tendina "Toggle".

Dopo essere passati al campo "Valore", dovresti vedere il parametro "Falso". Ora chiudi questa finestra e riavvia il browser.

Un altro modo è installare l'estensione speciale Disable WebRTC. Ma io preferisco e ti consiglio di fare questa operazione da solo. Non mi piace installare programmi su un computer, specialmente in un browser.

C'è un modo ancora più semplice: scaricare l'utilità ConfigFox, che, oltre a questa operazione, può migliorare significativamente la privacy e l'anonimato del browser Firefox. Abbiamo scritto di questo programma nell'articolo "Impostazioni di sicurezza Firefox". Consiglio vivamente di utilizzare questa utilità a tutti gli utenti browser Mozilla Firefox. Il programma non si installa da solo nel browser, ma consente semplicemente di modificare il file delle impostazioni.

Disabilitare WebRTC Chrome

A browser Google Chrome è un po' più complicato. Non c'è modo di disattivarlo in Chrome. questa funzione nel browser stesso. Per fare ciò, è necessario scaricare un componente aggiuntivo speciale chiamato Blocco WebRTC. È possibile scaricare e installare il componente aggiuntivo utilizzando questo collegamento diretto. Non abbiamo testato questa estensione e non possiamo fornire alcuna garanzia.

C'è anche un componente aggiuntivo ScriptSafe che può anche aiutare con questo problema. A mio parere questo Il modo migliore risolvere il problema WebRTC in Chrome.

Con questa estensione utente inesperto sarà più difficile, ma se sei avanzato, ti consiglio vivamente di approfondirlo.

Se conosci altri modi per risolvere questo problema nel browser Chrome, scrivi nei commenti.

Disabilitazione del browser WebRTC Opera / Yandex

Esistono diversi plugin per il browser Opera: WebRTC Leak Prevent e WebRTC Control. Non l'ho testato personalmente, lo provo e scrivo cosa ha aiutato e cosa no.

In conclusione, voglio dire che al momento non esiste un modo affidabile al cento per cento per disabilitare WebRTC Browser Chromium come: Chrome, Yandex, Opera, ecc. Pertanto, consiglio a chiunque utilizzi una VPN e abbia a cuore l'anonimato di interrompere temporaneamente l'utilizzo di questi browser. Penso che nel prossimo futuro questo buco sarà chiuso e potrai tornare da loro. Nel frattempo, puoi passare temporaneamente a Firefox.

È tutto. Nei seguenti articoli parleremo dell'anonimato e dell'affidabilità delle VPN e dei proxy pubblici. Sarà divertente, romperemo gli stereotipi. Lo amerai ;)!