Quoi de mieux à utiliser lors du développement de logiciels - technologies natives ou Web? Holivar à ce sujet ne se terminera pas bientôt, mais peu de gens soutiendront qu'il est utile de dupliquer les fonctions natives pour les utiliser dans les navigateurs ou WebView. Et si autrefois les applications pour les appels existaient exclusivement séparément du navigateur, elles sont maintenant faciles à mettre en œuvre sur le Web. Le développeur Grigory Kuznetsov a expliqué comment utiliser la technologie WebRTC pour les connexions P2P.
- Comme vous le savez tous, ces dernières années, il y a eu beaucoup d'applications basées sur l'échange direct de données entre deux navigateurs, c'est-à-dire le P2P. Ce sont toutes sortes de messageries instantanées, chats, numéroteurs, vidéoconférences. Il peut également s'agir d'applications qui effectuent une sorte de calcul distribué. Les limites de la fantaisie ne sont en aucune façon limitées.
Comment fabriquer une telle technologie? Imaginez que nous voulons passer un appel d'un navigateur à un autre. Et imaginez quelles étapes nous devons atteindre pour atteindre cet objectif. Tout d'abord, il semble que l'appel soit notre image, notre voix, notre image, et nous devons avoir accès aux périphériques multimédias connectés à l'ordinateur: à la caméra et au microphone. Après avoir obtenu l'accès, vous avez besoin de vos deux navigateurs, deux clients, pour vous trouver. Il est nécessaire de les aider à se connecter, à tendre la main, à transmettre des méta-informations.
Lorsque vous atteignez, vous devez commencer à transférer des données en mode P2P, c'est-à-dire pour assurer la transmission des flux multimédias. Nous avons tous les éléments nécessaires, nous sommes prêts à mettre en œuvre notre nouveau vélo cool. Mais c'est une blague, nous sommes ingénieurs et nous comprenons que c'est cher, injustifié et risqué. Par conséquent, en tant qu'ingénieurs classiques, réfléchissons d'abord aux solutions qui existent déjà.
Tout d'abord, l'ancienne technologie Adobe Flash mourante. Elle est vraiment en train de mourir et Adobe cessera de le soutenir d'ici 2020. La technologie vous permettra vraiment d'accéder à vos appareils multimédias, à l'intérieur, vous pouvez implémenter toutes les mécaniques nécessaires pour aider les navigateurs à se connecter, afin qu'ils commencent à transmettre des informations P2P, mais vous réinventerez votre vélo, car il n'y a pas de norme unique, une approche unique pour mettre en œuvre cette méthode transfert de données.
Vous pouvez écrire un plugin de navigateur. C'est ainsi que Skype fonctionne pour les navigateurs qui ne prennent pas en charge les technologies plus modernes. Vous devrez implémenter votre vélo, car il n'y a pas de norme unique, et c'est également mauvais pour les utilisateurs, car l'utilisateur devra installer une sorte de plug-in dans son navigateur, effectuer des actions supplémentaires. Les utilisateurs n'aiment pas cela et ne veulent pas le faire.
Et il existe la technologie WebRTC: Google Hangouts et Facebook Messenger fonctionnent avec. Voximplant l'utilise pour que vous puissiez passer vos appels. Arrêtons-nous dessus plus en détail. Il s'agit d'une nouvelle technologie en développement, elle est apparue en 2011 et continue de se développer. Que permet-elle de faire? Accédez à la caméra et au microphone. Établissez une connexion P2P entre deux ordinateurs, deux navigateurs. Naturellement, il vous permet de transférer des flux multimédias en temps réel. De plus, il vous permet de transférer des informations, c'est-à-dire n'importe quelle date binaire, vous pouvez également transmettre du P2P, vous pouvez créer votre propre système informatique distribué.
Un point important: WebRTC ne fournit pas aux navigateurs un moyen de se retrouver. Nous pouvons générer toutes les méta-informations nécessaires sur nos proches, mais comment un navigateur peut-il connaître l'existence d'un autre? Comment les connecter? Prenons un exemple.
Il y a deux clients. Le premier client souhaite appeler le deuxième client. WebRTC vous donne toutes les informations dont vous avez besoin pour vous identifier. Mais la question reste de savoir comment trouver un autre navigateur, comment envoyer ces méta-informations, comment initialiser l'appel. C'est à la merci des développeurs, nous pouvons utiliser absolument n'importe quelle méthode, prendre cette méta-information, l'imprimer sur un morceau de papier, l'envoyer par courrier, une autre l'utilisera et tout fonctionnera.
Et nous pouvons trouver un mécanisme de signalisation. Dans ce cas, il s'agit d'un mécanisme tiers qui nous permettra, si nous connaissons nos clients, d'assurer le transfert entre eux de certaines informations nécessaires à l'établissement d'une connexion.
Prenons un exemple utilisant un serveur de signaux. Il existe un serveur de signaux qui maintient une connexion constante avec nos clients, par exemple via des sockets Web ou en utilisant HTTP. Le premier client génère des méta-informations et les envoie au serveur de signaux à l'aide de sockets Web ou HTTP. Il envoie également une partie des informations avec lesquelles il souhaite se connecter, par exemple un pseudonyme ou d'autres informations.
Le serveur de signaux utilisant cet identifiant détermine quel client doit rediriger nos méta-informations et les transmet. Le deuxième client le prend, l'utilise, s'installe lui-même, forme une réponse et, à l'aide du mécanisme de signalisation, l'envoie au serveur de signal, qui à son tour le transmet au premier client. Ainsi, les deux clients disposent actuellement de toutes les dates et méta-informations nécessaires pour établir une connexion P2P. C'est fait.
Examinons de plus près exactement ce que les clients échangent; ils échangent un datagramme SDP, Session Description Protocol.
Il s'agit essentiellement d'un fichier texte qui contient toutes les informations nécessaires pour établir une connexion. Il y a des informations sur l'adresse IP, sur les ports utilisés, sur le type d'informations recherchées entre les clients, ce qu'elles sont - audio, vidéo, quels codecs sont utilisés. Tout ce dont nous avons besoin est là.
Faites attention à la deuxième ligne. Il montre l'adresse IP du client, 192.168.0.15. De toute évidence, il s'agit de l'adresse IP d'un ordinateur qui se trouve sur un réseau local. Si nous avons deux ordinateurs, dont chacun est sur le réseau local, dont chacun connaît son adresse IP au sein de ce réseau, ils veulent appeler. Pourront-ils le faire avec un tel datagramme? Évidemment non, ils ne connaissent pas les adresses IP externes. Comment être
Écartons-nous et voyons comment fonctionne le NAT. Sur Internet, de nombreux ordinateurs sont cachés derrière des routeurs. Il existe des réseaux locaux au sein desquels les ordinateurs connaissent leurs adresses, il y a un routeur qui a une adresse IP externe et tous ces ordinateurs se distinguent par l'adresse IP de ce routeur. Lorsqu'un paquet provenant d'un ordinateur du réseau local est acheminé vers le routeur, le routeur regarde où il doit être transféré. Si sur un autre de ce réseau local, il le relaie simplement, et si vous avez besoin de l'envoyer à l'extérieur, sur Internet, une table de routage est compilée.
Nous remplissons l'adresse IP interne de l'ordinateur qui souhaite transférer le paquet, son port, définissons l'adresse IP externe, l'adresse IP du routeur et effectuons également un changement de port. À quoi ça sert? Imaginez que deux ordinateurs accèdent à la même ressource et que nous devons acheminer correctement les paquets de réponse. Nous les identifierons par port, le port sera unique pour chacun des ordinateurs, tandis que l'adresse IP externe correspondra.
Comment vivre s'il y a du NAT, si les ordinateurs sortent sous la même adresse IP, mais à l'intérieur ils se connaissent les uns les autres?
Le cadre ICE pour Internet Connectivity Establishment vient à la rescousse. Il décrit les moyens de contourner NAT, comment établir une connexion si nous avons NAT.
Ce cadre utilise l'attribut de serveur STUN.
Il s'agit d'un serveur spécial, auquel vous pouvez trouver votre adresse IP externe. Ainsi, dans le processus d'établissement d'une connexion P2P, chaque client doit faire une demande à ce serveur STUN afin de connaître son adresse IP, générer des informations supplémentaires, IceCandidate, et échanger IceCandidate avec le mécanisme de signalisation. Les clients se connaîtront alors avec les bonnes adresses IP et pourront établir une connexion P2P.
Cependant, il existe des cas plus compliqués. Par exemple, lorsque l'ordinateur est caché derrière un double NAT. Dans ce cas, le framework ICE nécessite l'utilisation d'un serveur TURN.
Il s'agit d'un tel serveur spécial qui transforme une connexion client-client, P2P, en une connexion client-serveur-client, c'est-à-dire qu'il agit comme un relais. La bonne nouvelle pour les développeurs est que, quel que soit le scénario dans lequel la connexion a été établie, que nous soyons sur le réseau local, que nous devions nous tourner vers un serveur STUN ou TURN, la technologie API sera identique pour nous. Nous indiquons simplement au début la configuration des serveurs ICE et TURN, indiquons comment y accéder, puis la technologie fait tout pour nous sous le capot.
Un bref résumé. Pour établir une connexion, vous devez sélectionner et mettre en œuvre une sorte de mécanisme de signalisation, un certain intermédiaire qui nous aidera à envoyer des méta-informations. WebRTC nous fournira toutes les méta nécessaires pour cela.
Nous devons nous battre avec NAT, c'est notre principal ennemi à ce stade. Mais pour contourner ce problème, nous utilisons le serveur STUN pour connaître notre adresse IP externe et nous utilisons le serveur TURN comme relais.
Que transmettons-nous exactement? À propos des flux multimédias.
Les flux multimédias sont des canaux qui contiennent des pistes en eux-mêmes. Les pistes du flux multimédia sont synchronisées. L'audio et la vidéo ne différeront pas, ils viendront avec un seul timing. Vous pouvez créer n'importe quel nombre de pistes dans le flux multimédia, les pistes peuvent être contrôlées séparément, par exemple, vous pouvez couper le son, ne laissant qu'une image. Vous pouvez également transférer un nombre illimité de flux multimédias, ce qui vous permet, par exemple, de mettre en œuvre une conférence.
Comment accéder aux médias à partir d'un navigateur? Parlons de l'API.
Il existe une méthode getUserMedia qui accepte un ensemble de constantes en entrée. Il s'agit d'un objet spécial où vous indiquez à quels appareils vous souhaitez accéder, quelle caméra, quel microphone. Vous spécifiez les caractéristiques que vous souhaitez avoir, quelle résolution, et il y a également deux arguments - successCallback et errorCallback, qui est appelé en cas de succès ou d'échec. Des implémentations technologiques plus modernes utilisent des promesses.
Il existe également une méthode enumerateDevices pratique qui renvoie une liste de tous les périphériques multimédias connectés à votre ordinateur, qui vous donne la possibilité de les montrer à l'utilisateur, de dessiner une sorte de sélecteur afin que l'utilisateur choisisse la caméra particulière qu'il souhaite utiliser.
L'objet central de l'API est RTCPeerConnection. Lorsque nous établissons la connexion, nous prenons la classe RTCPeerConnection, qui renvoie l'objet peerConnection. En tant que configuration, nous spécifions un ensemble de serveurs ICE, c'est-à-dire les serveurs STUN et TURN, auxquels nous accéderons pendant le processus d'installation. Et il y a un événement onicecandidate important qui se déclenche chaque fois que nous avons besoin de l'aide de notre mécanisme de signalisation. Autrement dit, la technologie WebRTC a fait une demande, par exemple, à un serveur STUN, nous avons reconnu notre adresse IP externe, un nouveau ICECandidate est apparu, et nous devons le transmettre à l'aide d'un mécanisme tiers, l'événement a été strigger.
Lorsque nous établissons une connexion et que nous voulons initialiser l'appel, nous utilisons la méthode createOffer () pour former le SDP initial, offrir au SDP, les mêmes métadonnées qui doivent être envoyées au partenaire.
Pour le définir sur PeerConnection, nous utilisons la méthode setLocalDescription (). L'interlocuteur reçoit ces informations par le mécanisme de signalisation, les définit pour lui-même à l'aide de la méthode setRemoteDescription () et génère une réponse à l'aide de la méthode createAnswer (), qui est également envoyée au premier client à l'aide du mécanisme de signalisation.
Lorsque nous avons eu accès aux médias, obtenu le flux multimédia, nous le transférons à notre connexion P2P en utilisant la méthode addStream, et notre interlocuteur le découvre, il a coupé l'événement onaddstream. Il recevra notre flux et pourra l'afficher.
Vous pouvez également travailler avec des flux de données. C'est très similaire à la formation d'un peerConnection régulier, spécifiez simplement RtpDataChannels: true et appelez la méthode createDataChannel (). Je ne m'attarderai pas là-dessus en détail, car un tel travail est très similaire à l'utilisation de sockets Web.
Quelques mots sur la sécurité. WebRTC fonctionne uniquement sur HTTPS, votre site doit être signé avec un certificat. Les flux multimédias sont également chiffrés à l'aide de DTLS. La technologie ne nécessite aucune installation supplémentaire, aucun plug-in, et c'est bien. Et cela ne fonctionnera pas pour créer une application de logiciel espion, le site n'écoutera pas ou n'espionnera pas l'utilisateur, il affichera à l'utilisateur une invite spéciale, lui demandera l'accès et ne la recevra que si l'utilisateur autorise l'accès aux périphériques audio et multimédias.
Quant à la prise en charge du navigateur - IE reste et reste rouge. À la fin de l'année dernière, le support Safari a été ajouté, c'est-à-dire que tous les navigateurs modernes sont déjà capables de fonctionner avec cette technologie et que nous pouvons l'utiliser en toute sécurité.
Je veux partager un ensemble de toutes sortes d'utilitaires qui vous aideront si vous souhaitez travailler avec WebRTC. Il s'agit principalement d'un
adaptateur . Les technologies évoluent constamment et il existe une différence dans les API de navigateur. La bibliothèque d'adaptateurs élimine cette différence et facilite le travail.
Peerjs est une bibliothèque pratique pour travailler avec des flux de données. Vous pouvez également consulter les implémentations open source des
serveurs STUN et
TURN . Un grand ensemble de tutoriels, d'exemples, d'articles est sur la
page awesome-webrtc , je le recommande fortement.
Le dernier outil utile pour le débogage est webrtc-internals. Pendant le développement, vous pouvez taper une commande spéciale dans la barre d'adresse - par exemple, dans le navigateur Chrome, il s'agit de Chrome: // webrtc-internals. Vous verrez une page avec toutes les informations sur votre connexion WebRTC actuelle. Il y aura des séquences d'appels dans les méthodes, et tous les datagrammes échangés entre les navigateurs, et des graphiques qui caractériseront en quelque sorte votre connexion. En général, toutes les informations seront nécessaires lors du débogage et du développement. Merci de votre attention.