Tout d'abord, vous devez comprendre que l'affichage de toutes les adresses IP de votre ordinateur/tablette/téléphone via WebRTC n'est pas un problème ou une lacune du VPN/tor/socks, c'est un problème et une lacune du navigateur que vous utilisez. .

Le projet WebRTC a été créé par Google pour transférer des données en streaming (audio et vidéo) principalement directement entre les navigateurs des utilisateurs (connexions p2p), sans participation programmes tiers(par exemple Skype) ou des plugins. Cela implique non seulement l'accès par un navigateur compatible WebRTC à l'environnement réseau (quel que soit le système d'exploitation utilisé), mais la possibilité de déterminer l'adresse IP publique et locale à l'aide du protocole STUN pour établir une connexion p2p contournant tous les types de NAT.

Sur ce moment On sait que WebRTC est activé par défaut dans les navigateurs Chrome (à partir de la version 23), Firefox (à partir de la version 22) et Opera (à partir de la version 18), ce qui annule généralement toutes les méthodes d'anonymisation pour les utilisateurs de ces navigateurs. Pour rendre impossible la détermination de votre adresse IP publique et locale via WebRTC, vous devez, curieusement, désactiver sa prise en charge.

Désactivation de WebRTC dans Firefox :

• DANS barre d'adresse tapez about:config et appuyez sur Entrée
• Dans la ligne Rechercher, saisissez « media.peerconnection.enabled » et double-cliquez sur la ligne trouvée, définissant ainsi le champ Valeur sur « false ».

Désactivation de WebRTC dans Chrome et Opera :

• Pour le moment, il n'existe aucun moyen connu de désactiver WebRTC à l'aide des navigateurs eux-mêmes, et nous ne pouvons pas recommander de solutions alternatives sous forme d'extensions (recherchez-les et installez-les à vos risques et périls), car leur efficacité laisse beaucoup à désirer. . Par conséquent, apparemment, il ne reste plus qu'à conseiller de ne pas utiliser ces navigateurs jusqu'à ce que les développeurs mettent en œuvre la possibilité de désactiver eux-mêmes les moyens des navigateurs (similaires à Firefox).

Désactivation de WebRTC sur Android dans Chrome :

• DANS dernières versions Navigateur Chrome pour Android, il n'est pas possible de désactiver WebRTC, bien qu'il existe une telle option dans les paramètres.
• Si vous devez utiliser un navigateur avec WebRTC désactivé sur Android, nous vous recommandons d'utiliser Firefox pour Android. Sur celui-ci, vous pouvez désactiver WebRTC en suivant les mêmes instructions pour Firefox ci-dessus.

Les technologies d'appel depuis le navigateur existent depuis de nombreuses années : Java, ActiveX, Adobe Flash... Ces dernières années, il est devenu évident que les plugins et les gauchers machines virtuelles ils ne brillent pas par leur commodité (pourquoi devrais-je installer quoi que ce soit ?) et, surtout, par leur sécurité. Ce qu'il faut faire? Il y a une sortie !

Jusqu'à récemment, plusieurs protocoles étaient utilisés sur les réseaux IP pour la téléphonie ou la vidéo sur IP : SIP, le protocole le plus répandu, H.323 et MGCP, Jabber/Jingle (utilisé dans Gtalk), le protocole semi-ouvert Adobe RTMP*. et, bien sûr, le Skype fermé. Le projet WebRTC, initié par Google, tente de bouleverser le monde de la téléphonie IP et web en rendant obsolètes tous les softphones, y compris Skype. WebRTC ne se contente pas de tout implémenter capacités de communication directement à l'intérieur du navigateur, qui est maintenant installé sur presque tous les appareils, mais il essaie en même temps de résoudre une tâche plus générale de communication entre les utilisateurs du navigateur (échange de diverses données, diffusion d'écran, collaboration avec des documents et bien plus encore).

WebRTC par un développeur web

Du point de vue d'un développeur Web, WebRTC se compose de deux parties principales :

• contrôle des flux multimédias à partir de ressources locales (caméra, microphone ou écran) ordinateur local) est implémenté par la méthode navigator.getUserMedia, qui renvoie un objet MediaStream ;
• communications peer-to-peer entre les appareils qui génèrent des flux multimédias, y compris la définition des méthodes de communication et leur transmission directe - objets RTCPeerConnection (pour envoyer et recevoir des flux audio et vidéo) et RTCDataChannel (pour envoyer et recevoir des données depuis le navigateur).

Qu'est-ce qu'on fait?

Nous verrons comment organiser le chat vidéo multijoueur le plus simple entre navigateurs sur basé sur WebRTC en utilisant des sockets Web. Commençons par expérimenter avec Chrome / Chromium, le plus avancé en termes de Navigateurs WebRTC, même si Firefox 22, sorti le 24 juin, les a presque rattrapés. Il faut dire que la norme n'a pas encore été adoptée, et l'API peut évoluer de version en version. Tous les exemples ont été testés dans Chromium 28. Pour des raisons de simplicité, nous ne surveillerons pas la propreté du code et la compatibilité entre navigateurs.

flux multimédia

Le premier et le plus simple composant WebRTC est MediaStream. Il permet au navigateur d'accéder aux flux multimédias de la caméra et du microphone de l'ordinateur local. Dans Chrome, cela nécessite d'appeler la fonction navigator.webkitGetUserMedia() (car la norme n'est pas encore finalisée, toutes les fonctions sont accompagnées d'un préfixe, et dans Firefox, la même fonction est appelée navigator.mozGetUserMedia()). Lorsqu'il est appelé, l'utilisateur sera invité à autoriser l'accès à la caméra et au microphone. Il ne sera possible de poursuivre l'appel qu'après que l'utilisateur aura donné son consentement. Les paramètres du flux multimédia requis et deux fonctions de rappel sont transmis en paramètres à cette fonction : la première sera appelée en cas d'accès réussi à la caméra/microphone, la seconde - en cas d'erreur. Tout d'abord, créons un fichier HTML rtctest1.html avec un bouton et un élément :

WebRTC - vidéo de la première rencontre (hauteur : 240 px ; largeur : 320 px ; bordure : 1 px gris uni ; ) getUserMedia

Microsoft CU-RTC-Web

Microsoft ne serait pas Microsoft si, en réponse à l'initiative de Google, il ne publiait pas immédiatement sa propre variante personnalisée incompatible appelée CU-RTC-Web (html5labs.interoperabilitybridges.com/cu-rtc-web/cu-rtc-web. htm). Bien que la part d'IE, déjà faible, continue de diminuer, le nombre d'utilisateurs de Skype donne à Microsoft l'espoir de pousser Google, et on peut supposer que cette norme sera utilisée dans le navigateur. Versions Skype. La norme Google se concentre principalement sur la communication de navigateur à navigateur ; dans le même temps, la majeure partie du trafic vocal reste dans le réseau téléphonique conventionnel, et des passerelles entre celui-ci et les réseaux IP sont nécessaires non seulement pour faciliter l'utilisation ou une distribution plus rapide, mais également comme moyen de monétisation qui permettra plus joueurs pour les développer. L'apparition d'une autre norme peut non seulement conduire à un besoin désagréable pour les développeurs de prendre en charge deux technologies incompatibles à la fois, mais aussi à l'avenir offrir à l'utilisateur un choix plus large de fonctionnalités possibles et disponibles. solutions techniques. Attend et regarde.

Activer le fil de discussion local

A l'intérieur des balises de notre fichier HTML, nous déclarerons une variable globale pour le flux média :

VarlocalStream = nul ;

Le premier paramètre de la méthode getUserMedia consiste à spécifier les paramètres du flux multimédia demandé - par exemple, activez simplement l'audio ou la vidéo :

Var streamConstraints = ( "audio" : true, "video" : true ); // Demander l'accès à l'audio et à la vidéo

Ou spécifiez des options supplémentaires :

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

Le deuxième paramètre de la méthode getUserMedia consiste à transmettre une fonction de rappel qui sera appelée en cas de succès :

Function getUserMedia_success(stream) ( console.log("getUserMedia_success():", stream); localVideo1.src = URL.createObjectURL(stream); // Connectez le flux multimédia à l'élément HTML localStream = stream; // et stockez-le dans une variable globale pour une utilisation ultérieure)

Le troisième paramètre est une fonction de rappel, un gestionnaire d'erreurs qui sera appelé en cas d'erreur.

Fonction getUserMedia_error(error) ( console.log("getUserMedia_error():", error); )

L'appel réel à la méthode getUserMedia - demandant l'accès au microphone et à la caméra lorsque le premier bouton est enfoncé

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

Il n'est pas possible d'accéder au flux multimédia à partir d'un fichier ouvert localement. Si nous essayons de faire cela, nous obtenons une erreur :

NavigatorUserMediaError (code : 1, PERMISSION_DENIED : 1)"

Téléchargeons le fichier résultant sur le serveur, ouvrons-le dans le navigateur et, en réponse à la demande qui apparaît, autorisons l'accès à la caméra et au microphone.

Vous pouvez sélectionner les appareils auxquels Chrome accédera dans Paramètres, Afficher le lien des paramètres avancés, section Confidentialité, bouton Contenu. Dans les navigateurs Firefox et Opera, les appareils sont sélectionnés directement dans la liste déroulante lorsque l'accès est accordé.

Lors de l'utilisation du protocole HTTP, l'autorisation sera demandée à chaque accès à un flux multimédia après le chargement de la page. Le passage au HTTPS vous permettra d'afficher la requête une seule fois, uniquement lors du tout premier accès au flux média.

Faites attention au cercle clignotant dans l'icône sur l'onglet et à l'icône de l'appareil photo sur le côté droit de la barre d'adresse :

RTCMediaConnexion

RTCMediaConnection - un objet conçu pour établir et transférer des flux multimédias sur le réseau entre les participants. De plus, cet objet est chargé de générer une description de session multimédia (SDP), d'obtenir des informations sur les candidats ICE pour passer via NAT ou des pare-feu (locaux et utilisant STUN) et d'interagir avec le serveur TURN. Chaque participant doit disposer d'une RTCMediaConnection par connexion. Les flux multimédias sont transmis via le protocole SRTP crypté.

Serveurs TOUR

Il existe trois types de candidats ICE : hôte, srflx et relais. L'hôte contient des informations obtenues localement, srflx est à quoi ressemble l'hôte pour un serveur externe (STUN) et le relais est des informations pour le trafic proxy via le serveur TURN. Si notre nœud est derrière un NAT, alors les candidats hôtes contiendront des adresses locales et seront inutiles, les candidats srflx n'aideront qu'avec certains types de NAT et le relais sera le dernier espoir de faire passer le trafic via un serveur intermédiaire.

Un exemple de candidat ICE de type host, avec l'adresse 192.168.1.37 et le port udp/34022 :

A=candidat:337499441 2 udp 2113937151 192.168.1.37 34022 typ génération d'hôte 0

Format général pour spécifier les serveurs STUN/TURN :

Var serveurs = ( "iceServers": [ ( "url": "stun:stun.stunprotocol.org:3478" ), ( "url": "turn:user@host:port", "credential": "mot de passe" ) ]);

Il existe de nombreux serveurs STUN publics sur Internet. Une grande liste, par exemple, est . Malheureusement, ils ne résolvent que trop peu de problèmes. Il n'y a pratiquement pas de serveurs TURN publics, contrairement à STUN. Cela est dû au fait que le serveur TURN transmet lui-même les flux multimédias, ce qui peut charger considérablement à la fois le canal réseau et le serveur lui-même. Par conséquent, le moyen le plus simple de se connecter aux serveurs TURN est de l’installer vous-même (vous aurez évidemment besoin d’une IP publique). De tous les serveurs, à mon avis, le meilleur est rfc5766-turn-server . En dessous il y a même image finie pour Amazon EC2.

Avec TURN, tout n'est pas aussi bon que nous le souhaiterions, mais un développement actif est en cours, et j'aimerais espérer qu'après un certain temps WebRTC, s'il ne rattrape pas Skype en termes de qualité de transmission de la traduction d'adresses ( NAT) et les pare-feu, puis au moins sensiblement se rapprochent.

RTCMediaConnection a besoin d'un mécanisme supplémentaire pour échanger des informations de contrôle afin d'établir une connexion - bien qu'il génère ces données, il ne les transmet pas et la transmission par les autres participants doit être mise en œuvre séparément.

Le choix de la méthode de transmission relève de la responsabilité du développeur – au moins manuellement. Dès que les données nécessaires seront échangées, RTCMediaConnection mettra automatiquement en place des flux média (si possible, bien sûr).

modèle offre-réponse

Pour établir et modifier les flux média, le modèle offre/réponse (offre/réponse ; décrit dans RFC3264) et le protocole SDP (Session Description Protocol) sont utilisés. Ils sont également utilisés par le protocole SIP. Dans ce modèle, on distingue deux agents : l'offrant - celui qui génère une description de session SDP pour en créer une nouvelle ou en modifier une existante (Offer SDP), et le répondeur - celui qui reçoit une description de session SDP d'un autre agent et répond à avec sa propre description de session (Answer SDP). Dans le même temps, la spécification exige un protocole de plus de haut niveau(par exemple, SIP ou vos propres sockets via Web, comme dans notre cas), qui est responsable du transfert de SDP entre agents.

Quelles données doivent être transmises entre deux RTCMediaConnections pour qu'elles puissent établir avec succès des flux multimédias :

• Le premier abonné qui initie la connexion forme une Offre dans laquelle il transmet une structure de données SDP (le même protocole est utilisé dans le même but dans SIP) décrivant les caractéristiques possibles du flux média qu'il s'apprête à transmettre. Ce bloc de données doit être transféré au deuxième participant. Le deuxième participant génère une Réponse avec son SDP et l'envoie au premier.
• Le premier et le deuxième participant effectuent tous deux la procédure de détermination des candidats possibles à l'ICE, à l'aide de laquelle le deuxième participant peut leur transférer le flux multimédia. Au fur et à mesure que les candidats sont identifiés, les informations les concernant doivent être transférées à un autre participant.

Formation d'offre

Pour former une offre, nous avons besoin de deux fonctions. Le premier sera appelé en cas de réussite de sa formation. Le deuxième paramètre de la méthode createOffer() est une fonction de rappel appelée en cas d'erreur lors de son exécution (à condition que le flux local soit déjà disponible).

De plus, deux gestionnaires d'événements sont nécessaires : onicecandidate lors de la définition d'un nouveau candidat ICE et onaddstream lors de la connexion d'un flux multimédia depuis le côté éloigné. Revenons à notre dossier. Ajoutons-en un autre au HTML après les lignes avec les éléments :

créer une offre

Et après la ligne avec l'élément (pour le futur) :

Aussi, au début du code JavaScript, nous déclarerons une variable globale pour RTCPeerConnection :

varpc1;

Lors de l'appel du constructeur RTCPeerConnection, vous devez spécifier les serveurs STUN/TURN. Voir l'encadré pour plus de détails ; tant que tous les participants sont sur le même réseau, ils ne sont pas obligatoires.

var serveurs = null ;

Options d'approvisionnement Offre SDP

var offreConstraints = ();

Le premier paramètre de la méthode createOffer() est une fonction de rappel appelée lors de la formation réussie d'une offre.

Function pc1_createOffer_success(desc) ( console.log("pc1_createOffer_success(): \ndesc.sdp:\n"+desc.sdp+"desc:", desc); pc1.setLocalDescription(desc); // Définir la RTCPeerConnection générée par le Offre la méthode setLocalDescription du SDP. // Lorsque le côté distant envoie sa réponse SDP, celle-ci devra être définie à l'aide de la méthode setRemoteDescription // Jusqu'à ce que le deuxième côté soit implémenté, ne faites rien // pc2_receivedOffer(desc); )

Le deuxième paramètre est une fonction de rappel qui sera appelée en cas d'erreur

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

Et nous déclarerons une fonction de rappel qui sera transmise aux candidats ICE tels qu'ils sont définis :

Fonction pc1_onicecandidate(event)( if (event.candidate) ( console.log("pc1_onicecandidate():\n"+ event.candidate.candidate.replace("\r\n", ""), event.candidate); // Ne rien faire jusqu'à ce que le deuxième côté soit implémenté // pc2.addIceCandidate(new RTCIceCandidate(event.candidate)); ) )

Ainsi qu'une fonction de rappel pour ajouter un flux multimédia depuis le côté éloigné (pour le futur, puisque nous n'avons qu'un seul RTCPeerConnection jusqu'à présent) :

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

Lorsque vous cliquez sur le bouton « createOffer », créez une RTCPeerConnection, définissez les méthodes onicecandidate et onaddstream, et demandez la formation d'un Offer SDP en appelant la méthode createOffer() :

Function createOffer_click() ( console.log("createOffer_click()"); pc1 = new webkitRTCPeerConnection(servers); // Créer une RTCPeerConnection pc1.onicecandidate = pc1_onicecandidate; // Fonction de rappel pour traiter les candidats ICE pc1.onaddstream = pc1_onaddstream; / / Fonction de rappel appelée lorsqu'il y a un flux multimédia venant du côté éloigné, il n'existe pas encore pc1.addStream(localStream); // Passer le flux multimédia local (en supposant qu'il a déjà été reçu) pc1.createOffer(// Et en fait demander la formation de l'Offre pc1_createOffer_success , pc1_createOffer_error, offerConstraints); )

Sauvegardons le fichier sous rtctest2.html, plaçons-le sur le serveur, ouvrons-le dans un navigateur et voyons dans la console quelles données sont générées lors de son fonctionnement. La deuxième vidéo n'apparaîtra pas encore car il n'y a qu'un seul participant. Rappelons que SDP est une description des paramètres de la session multimédia, les codecs disponibles, les flux multimédias et les candidats ICE sont des options possibles pour se connecter à ce participant.

Formation de Answer SDP et échange de candidats ICE

L'offre SDP et chacun des candidats ICE doivent être transmis à l'autre côté, et là, après les avoir reçus de RTCPeerConnection, appeler les méthodes setRemoteDescription pour l'offre SDP et addIceCandidate pour chaque candidat ICE reçu du côté éloigné ; de même, en sens inverse pour les candidats Answer SDP et ICE distants. La Réponse SDP elle-même est formée de la même manière que l'Offre ; la différence est que ce n'est pas la méthode createOffer qui est appelée, mais la méthode createAnswer, et avant ce RTCPeerConnection, la méthode setRemoteDescription transmet l'offre SDP reçue de l'appelant.

Ajoutons un autre élément vidéo au HTML :

Et une variable globale pour le deuxième RTCPeerConnection sous la déclaration du premier :

Varpc2;

Traitement de l'offre et de la réponse SDP

Former une réponse SDP est très similaire à une offre. Dans la fonction de rappel appelée en cas de formation réussie de la réponse, à l'instar de l'offre, nous donnerons une description locale et transmettrons la réponse SDP reçue au premier participant :

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

La fonction de rappel appelée en cas d'erreur lors de la génération de la Réponse est complètement similaire à l'Offre :

Fonction pc2_createAnswer_error(erreur) ( console.log("pc2_createAnswer_error():", erreur); )

Paramètres de génération de Answer SDP :

Var réponseConstraints = ( "obligatoire": ( "OfferToReceiveAudio":true, "OfferToReceiveVideo":true ) );

Lorsque le deuxième participant reçoit une Offre, créez une RTCPeerConnection et formez une Réponse de la même manière que l'Offre :

Function pc2_receivedOffer(desc) ( console.log("pc2_receiveOffer()", desc); // Crée un objet RTCPeerConnection pour le deuxième participant similaire au premier pc2 = new webkitRTCPeerConnection(servers); pc2.onicecandidate = pc2_onicecandidate; // Set le gestionnaire d'événements lorsque le candidat ICE pc2.onaddstream = pc_onaddstream; // Lorsqu'un flux apparaît, connectez-le au HTML pc2.addStream(localStream); // Transmettez le flux média local (dans notre exemple, le deuxième participant a le même flux comme le premier) // Maintenant, lorsque le deuxième RTCPeerConnection est prêt, transmettez-lui l'offre SDP reçue (nous avons transmis le flux local au premier) pc2.setRemoteDescription(new RTCSessionDescription(desc)); // Demande au second connexion pour générer des données pour le message de réponse pc2.createAnswer(pc2_createAnswer_success, pc2_createAnswer_error,answerConstraints); )

Afin de transférer l'Offre SDP du premier participant vers le deuxième, dans le cadre de notre exemple, décommentez dans la fonction pc1 créer une offre chaîne d'appel success() :

Pc2_receivedOffer(desc);

Pour implémenter le traitement des candidats ICE, décommentez dans le gestionnaire d'événements de préparation des candidats ICE du premier participant pc1_onicecandidate() sa transmission au second :

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

Le gestionnaire d'événements de préparation des candidats ICE du deuxième participant ressemble à celui du premier :

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

Fonction de rappel pour ajouter un flux média du premier participant :

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

Terminer une connexion

Ajoutons un autre bouton en HTML

raccrocher

Et une fonction pour mettre fin à la connexion

Fonction btnHangupClick() ( // Déconnectez la vidéo locale des éléments HTML, arrêtez le flux multimédia local, set = null localVideo1.src = ""; localStream.stop(); localStream = null; // Pour chaque participant, désactivez la vidéo des éléments HTML , fermez la connexion, définissez le pointeur = null remoteVideo1.src = ""; pc1.close(); pc1 = null; remoteVideo2.src = ""; pc2.close(); pc2 = null; )

Sauvegardons-le sous rtctest3.html, mettons-le sur le serveur et ouvrons-le dans le navigateur. Cet exemple implémente le streaming multimédia bidirectionnel entre deux RTCPeerConnections dans le même onglet de navigateur. Pour organiser l'échange d'offres et de réponses SDP, de candidats ICE entre participants et d'autres informations via le réseau, il sera nécessaire de mettre en œuvre l'échange entre les participants en utilisant une sorte de transport, dans notre cas, des sockets Web, au lieu d'un appel direct à procédures.

Diffusion sur écran

Avec la fonction getUserMedia, vous pouvez également capturer l'écran et diffuser en tant que MediaStream en spécifiant les paramètres suivants :

Var mediaStreamConstraints = ( audio : false, vidéo : ( obligatoire : ( chromeMediaSource : "screen" ), facultatif : ) );

Pour réussir l'accès à l'écran, plusieurs conditions doivent être remplies :

• activer l'indicateur de capture d'écran dans getUserMedia() dans chrome://flags/,chrome://flags/ ;
• le fichier source doit être téléchargé via HTTPS (origine SSL) ;
• le flux audio ne doit pas être demandé ;
• plusieurs demandes ne doivent pas être effectuées dans le même onglet du navigateur.

Bibliothèques pour WebRTC

Bien que WebRTC ne soit pas encore terminé, plusieurs bibliothèques basées sur celui-ci sont déjà apparues. JsSIP est conçu pour créer des softphones basés sur un navigateur qui fonctionnent avec des commutateurs SIP tels qu'Asterisk et Camalio. PeerJS simplifiera la création de réseaux P2P pour l'échange de données, et Holla réduira la quantité de développement requise pour la communication P2P à partir des navigateurs.

Node.js et socket.io

Afin d'organiser l'échange de candidats SDP et ICE entre deux RTCPeerConnections sur le réseau, nous utilisons Node.js avec le module socket.io.

L'installation de la dernière version stable de Node.js (pour Debian/Ubuntu) est décrite

$ 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

Installation pour autrui Système d'exploitation décrit

Allons vérifier:

$ echo "sys=require("util"); sys.puts("Message de test");" > nodetest1.js $ nodejs nodetest1.js

À l'aide de npm (Node Package Manager), installez socket.io et le module express supplémentaire :

$ npm installer socket.io express

Vérifions-le en créant un fichier nodetest2.js côté serveur :

$ nano nodetest2.js var app = require("express")() , server = require("http").createServer(app) , io = require("socket.io").listen(server); serveur.écouter(80); // Si le port 80 est libre app.get("/", function (req, res) ( // Lors de l'accès à la page racine res.sendfile(__dirname + "/nodetest2.html"); // donne le fichier HTML ) ) ; io.sockets.on("connection", function (socket) ( // Lors de la connexion socket.emit("événement serveur", ( bonjour : "monde" )); // envoyer un message socket.on("événement client", function (data) ( // et déclare un gestionnaire d'événements lorsqu'un message arrive du client console.log(data); )); ));

Et nodetest2.html pour le côté client :

$ nano nodetest2.html var socket = io.connect("/"); // URL du serveur web socket (page racine du serveur à partir duquel la page a été chargée) socket.on("événement serveur", function (data) ( console.log(data); socket.emit("événement client" , ( " nom": "valeur" )); ));

Démarrons le serveur :

$ sudo nodejs nodetest2.js

et ouvrez la page http://localhost:80 (si elle est exécutée localement sur le port 80) dans un navigateur. Si tout réussit, dans la console JavaScript du navigateur nous verrons l'échange d'événements entre le navigateur et le serveur lors de la connexion.

Échange d'informations entre RTCPeerConnection via des sockets Web Côté client

Gardons notre exemple principal (rtcdemo3.html) sous le nouveau nom rtcdemo4.html. Incluez la bibliothèque socket.io dans l'élément :

Et au début du script JavaScript - connexion web socket :

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

Remplaçons un appel direct aux fonctions d'un autre participant en lui envoyant un message via des web sockets :

Fonction createOffer_success(desc) ( ... // pc2_receivedOffer(desc); socket.emit("offer", desc); ... ) fonction 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); .. . ) function pc2_onicecandidate(event) ( ... // pc1.addIceCandidate(new RTCIceCandidate(event.candidate)); socket.emit("ice2", event.candidate); ... )

Dans la fonction hangup(), au lieu d'appeler directement les fonctions du deuxième participant, nous enverrons un message via des web sockets :

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

Et ajoutez des gestionnaires de réception de messages :

Socket.on("offre", fonction (données) ( console.log("socket.on("offre"):", données); pc2_receivedOffer(données); )); socket.on("answer", function (data) (e console.log("socket.on("answer"):", data); pc1.setRemoteDescription(new RTCSessionDescription(data)); )); 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; ) );

Partie serveur

Côté serveur, enregistrez le fichier nodetest2 sous le nouveau nom rtctest4.js et à l'intérieur de la fonction io.sockets.on("connection", function (socket) ( ... ) ajoutez la réception et l'envoi de messages client :

Socket.on("offer", function (data) ( // Lorsqu'un message "offer" est reçu, // depuis la connexion client dans cet exemple juste un, // renvoie un message via le même socket socket.emit("offer", data); // S'il était nécessaire de transmettre le message sur toutes les connexions // sauf l'expéditeur : // socket.broadcast.emit("offer", data); )); socket.on("réponse", fonction (données) ( socket.emit("réponse", données); )); socket.on("ice1", fonction (données) ( socket.emit("ice1", données); )); socket.on("ice2", fonction (données) ( socket.emit("ice2", données); )); socket.on("raccrocher", fonction (données) ( socket.emit("raccrocher", données); ));

De plus, changez le nom du fichier HTML :

// res.sendfile(__dirname + "/nodetest2.html"); // Envoie le fichier HTML res.sendfile(__dirname + "/rtctest4.html");

Démarrage du serveur :

$ sudo nodejs nodetest2.js

Malgré le fait que le code des deux clients s'exécute dans le même onglet du navigateur, toutes les interactions entre les participants dans notre exemple s'effectuent entièrement via le réseau et il n'est plus difficile de « répartir » les participants. Cependant, ce que nous avons fait était également très simple : ces technologies sont bonnes par leur facilité d'utilisation. Même si parfois trompeur. N'oublions pas notamment que sans les serveurs STUN/TURN, notre exemple ne pourra pas fonctionner en présence de traduction d'adresses et de pare-feu.

Conclusion

L'exemple résultant est très conditionnel, mais si nous universalisons légèrement les gestionnaires d'événements afin qu'ils ne diffèrent pas entre les appelants et les appelés, au lieu de deux objets pc1 et pc2, créez un tableau de RTCPeerConnection et implémentez création dynamique et en supprimant des éléments, vous obtenez un chat vidéo complètement utilisable. Ce n'est plus spécifique à WebRTC, et un exemple du chat vidéo le plus simple pour plusieurs participants (ainsi que les textes de tous les exemples de l'article) se trouve sur le disque fourni avec le magazine. Cependant, sur Internet, vous pouvez déjà trouver beaucoup bons exemples. En particulier, lors de la préparation de l'article, les éléments suivants ont été utilisés : simpl.info getUserMedia , simpl.info RTCPeerConnection , WebRTC Reference App .

On peut supposer que très bientôt, grâce au WebRTC, il y aura une révolution non seulement dans notre compréhension des communications vocales et vidéo, mais aussi dans la façon dont nous percevons Internet dans son ensemble. WebRTC se positionne non seulement comme une technologie d'appel de navigateur à navigateur, mais également comme une technologie de communication en temps réel. Le lien vidéo que nous avons analysé n’en est qu’une petite partie. choix Son usage. Il existe déjà des exemples de partage d'écran (partage d'écran) et de collaboration, et même un réseau de diffusion de contenu P2P basé sur un navigateur utilisant RTCDataChannel.

Efforcez-vous de fournir un maximum transmission efficace Le streaming de données entre navigateurs conduit à l'émergence de technologies de plus en plus avancées, mais il peut également devenir une source de nouvelles préoccupations pour les utilisateurs qui accordent de l'importance à la confidentialité et à la sécurité sur Internet. L'une de ces technologies est la communication en temps réel ou en abrégé, qui est un ensemble de API-les interfaces utilisées notamment pour assurer les communications vocales et vidéo dans les navigateurs.

Actuellement prend en charge les navigateurs Web les plus populaires, notamment Google Chrome , Mozilla Firefox, Opéra et Microsoft Bord. Cette technologie, utile à bien des égards, présente en revanche un inconvénient important, puisqu'elle permet de réelles IP-utilisateur même s'il est utilisé par le dernier VPN et d'autres outils de confidentialité dans réseau mondial. Cependant, tous les sites n'utilisent pas , mais tous les navigateurs ne vous permettent pas de le désactiver, du moins via les paramètres principaux. Ci-dessous, nous montrons comment désactiver dans les navigateurs populaires, mais pour l'instant, découvrons comment déterminer si un site utilise cette technologie.

Si vous disposez de Google Chrome ou d'un autre navigateur basé sur Chromium (Opera, Yandex, etc.), ouvrez la ressource Web analysée, puis accédez à chrome://webrtc-internals dans un nouvel onglet. Si le site a tenté d'installer -connexion, vous verrez une image comme dans la capture d'écran (l'adresse du site sera indiquée en haut).

Sinon, la page ressemblera à ceci :

Si c’est le cas, ouvrez également le site et accédez à about:webrtc dans un nouvel onglet. en utilisant le site sera affiché dans la section "Statistiques de session", sinon la section sera vide.

Malheureusement, les développeurs de navigateurs sont jusqu'à présent restés sourds aux demandes des utilisateurs de faire désactivé par défaut, vous devez donc agir par vous-même. Le moyen le plus simple de désactiver la technologie est de . Pour cela, ouvrez la page du service, appuyez sur le bouton "J'accepte le risque", recherchez le paramètre, double-cliquez pour changer sa valeur de vrai sur FAUX et redémarrez le navigateur.

Alternativement, vous pouvez utiliser l'extension en l'installant à partir de magasin Modules complémentaires de Firefox . Mieux encore, téléchargez l'utilitaire, exécutez-le et cochez l'option dans la liste des paramètres affichés par celui-ci (située dans la branche Média, Caméra, Micro).

Avec Google Chrome, les choses sont un peu plus compliquées. Dans ses paramètres cachés, il n'y a aucune option qui vous permettrait de désactiver , mais vous pouvez essayer de le faire en utilisant une extension ScriptSafe tierce. Une fois installé, le plugin désactive les scripts, notamment , c'est dommage que la méthode présente un inconvénient, car personne ne peut garantir que les sites fonctionneront correctement après cela. Le même plugin peut être utilisé pour désactiver dans Opera et (recherchez les versions dans les magasins de modules complémentaires).

Beaucoup d'utilisateurs ne savent même pas ce qu'est le WebRTC (enfin, rien d'intéressant en principe) et que cette technologie peut vous trahir si vous utilisez un proxy... et même Tor ! WebRCT si en termes simples, alors c'est une telle chose qui a été créée Google pour assurer le transfert d'une sorte de données en streaming entre les navigateurs ou d'autres programmes prenant en charge cette chose.

Mais, je ne sais pas où il est utilisé, mais WebRTC devrait être désactivé, car il peut facilement donner votre adresse IP avec des abats... et ce qui est le plus intéressant, vous pouvez la vérifier en utilisant le site IPLeak.net (faites-le mieux mis en favoris) - activez le VPN ou définissez un proxy et voyez ce que ce site vous offre

Et il vous donnera des informations très, très intéressantes - en haut, il y aura une adresse proxy ou VPN, mais en bas, c'est juste la vôtre, même si vous l'avez modifiée comme :

Quelle est la meilleure chose à faire, comment se débarrasser de ce montant ? Vous devez désactiver complètement cette technologie dans votre navigateur ! Aujourd'hui, cela est tout à fait possible dans Chrome et Mozilla, qui sont en principe les navigateurs les plus populaires, d'autant plus que de nombreux autres sont également basés sur Chrome.

Donc pour désactiver Technologie WebRTC de Google, vous devez utiliser l'extension officielle de Google, eh bien, c'est drôle, vous pouvez la télécharger depuis la boutique ici sur ce lien.

Allez-y, cliquez sur INSTALLER :

Maintenant, nous confirmons :

L'extension est installée, vous pouvez la vérifier, rendez-vous à nouveau sur IPLeak.net et vérifiez que désormais WebRTC n'interfère plus avec notre anonymat.

Et Mozilla ? Ce n'est pas non plus difficile ici, ouvrez-le et écrivez dans la barre d'adresse comme ceci - à propos de : config, après quoi nous arriverons à une page spéciale avec un tas de paramètres.

Vous devez maintenant saisir dans la recherche (sur la ligne supérieure) ce paramètre - media.peerconnection.enabled, et changer la valeur de true à false :

Voilà, vous pouvez redémarrer votre navigateur et vérifier, désormais votre adresse IP ne sera plus visible sur le réseau lors de l'utilisation d'un VPN ou d'un proxy. Comme je l'ai déjà écrit, il est possible que d'autres navigateurs basés sur Chrome puissent utiliser l'extension ci-dessus, mais il n'y a aucune garantie, et surtout Navigateur Opéra(Elle semble également utiliser le moteur Chrome). Jusqu'à présent, cela fonctionne à coup sûr dans Chrome et Mozilla !

02.02.2016

L'écran suivant indique que la fonction WebRTC est activée dans votre navigateur. De plus, le site fournit d'autres informations intéressantes.

Comment désactiver WebRTC ?

De tous les navigateurs modernes, Firefox est le plus facile à entraîner. Et dans ce cas particulier, Firefox a montré son meilleur côté, permettant à l'utilisateur de désactiver WebRTC à l'aide de paramètres cachés sans utiliser de modules complémentaires tiers.

Désactivation de WebRTC Firefox

Pour le désactiver dans le navigateur Firefox, vous devez saisir la commande about:config dans la barre d'adresse, après quoi ce message apparaîtra.

Cliquez sur le bouton "Je promets..." et continuez.

Dans la fenêtre des paramètres, dans la barre de recherche (pas dans la barre d'adresse !), comme indiqué dans la capture d'écran ci-dessous, saisissez la commande media.peerconnection.enabled . La ligne dont nous avons besoin apparaîtra. Cliquez dessus avec le bouton droit de la souris et sélectionnez le premier élément dans le menu déroulant " Basculer".

Après être passé au champ "Valeur", vous devriez voir le paramètre "False". Fermez maintenant cette fenêtre et redémarrez le navigateur.

Une autre façon consiste à installer l’extension spéciale Disable WebRTC. Mais je préfère et vous conseille de faire cette opération vous-même. Je n'aime pas installer de programmes sur un ordinateur, surtout dans un navigateur.

Il existe un moyen encore plus simple : téléchargez l'utilitaire ConfigFox qui, en plus de cette opération, peut améliorer considérablement la confidentialité et l'anonymat du navigateur Firefox. Nous avons parlé de ce programme dans l'article « Paramètres de sécurité de Firefox ». Je recommande fortement d'utiliser cet utilitaireà tous les utilisateurs Navigateur Mozilla Firefox. Le programme ne s'installe pas tout seul dans le navigateur, mais permet simplement de modifier le fichier de paramètres.

Désactivation de WebRTC Chrome

DANS Navigateur Google Chrome est un peu plus compliqué. Il n'y a aucun moyen de le désactiver dans Chrome. cette fonction dans le navigateur lui-même. Pour ce faire, vous devez télécharger un module complémentaire spécial appelé WebRTC Block. Vous pouvez télécharger et installer le module complémentaire en utilisant ce lien direct. Nous n'avons pas testé cette extension et ne pouvons donner aucune garantie.

Il existe également un module complémentaire ScriptSafe qui peut également aider à résoudre ce problème. A mon avis ceci La meilleure façon résoudre le problème WebRTC dans Chrome.

Avec cette extension utilisateur inexpérimenté ce sera plus difficile, mais si vous êtes avancé, alors je vous conseille fortement d'y creuser.

Si vous connaissez d'autres moyens de résoudre ce problème dans le navigateur Chrome, écrivez dans les commentaires.

Désactivation du navigateur WebRTC Opera / Yandex

Il existe plusieurs plugins pour le navigateur Opera : WebRTC Leak Prevent et WebRTC Control . Je ne l’ai pas personnellement testé, essayez-le et écrivez ce qui a aidé et ce qui n’a pas fonctionné.

En conclusion, je tiens à dire qu'à l'heure actuelle, il n'existe aucun moyen fiable à cent pour cent de désactiver WebRTC dans Navigateurs Chrome tels que : Chrome, Yandex, Opera, etc. Par conséquent, je conseille à tous ceux qui utilisent des VPN et qui se soucient de l’anonymat d’arrêter temporairement d’utiliser ces navigateurs. Je pense que dans un avenir proche, ce trou sera fermé et vous pourrez y retourner. En attendant, vous pouvez temporairement migrer vers Firefox.

C'est tout. Dans les articles suivants, nous parlerons de l’anonymat et de la fiabilité des VPN et des proxys publics. Ce sera amusant, nous briserons les stéréotypes. Vous allez l'adorer ;)!