WebRTC (Web Real Time Communications) est une norme qui décrit le transfert de données audio en streaming, de données vidéo et de contenu depuis le navigateur et vers le navigateur en temps réel sans installer de plugins ou d'autres extensions. La norme vous permet de transformer le navigateur en un terminal de vidéoconférence, il suffit d'ouvrir une page Web pour démarrer la communication.

Qu'est-ce que le WebRTC ?

Dans cet article, nous couvrirons tout ce qu'il y a à savoir sur la technologie WebRTC pour l'utilisateur moyen. Examinons les avantages et les inconvénients du projet, révélons quelques secrets, vous expliquons comment cela fonctionne, où et à quoi sert WebRTC.

Que devez-vous savoir sur le WebRTC ?

L'évolution des normes et des technologies vidéo

Sergey Yutsaitis, Cisco, Vidéo+Conférence 2016

Comment fonctionne WebRTC

Côté client

• L'utilisateur ouvre une page contenant une balise HTML5
• Le navigateur demande l'accès à la webcam et au microphone de l'utilisateur.
• Le code JavaScript sur la page utilisateur contrôle les paramètres de connexion (adresses IP et ports du serveur WebRTC ou d'autres clients WebRTC) pour contourner le NAT et le pare-feu.
• Lors de la réception d'informations sur l'interlocuteur ou sur le flux avec la conférence mixée sur le serveur, le navigateur commence à négocier les codecs audio et vidéo utilisés.
• Le processus d'encodage et de diffusion des données entre les clients WebRTC (dans notre cas, entre le navigateur et le serveur) commence.

Côté serveur WebRTC

Un serveur vidéo n'est pas nécessaire pour l'échange de données entre deux participants, mais si vous souhaitez combiner plusieurs participants dans une conférence, un serveur est nécessaire.

Le serveur vidéo recevra le trafic multimédia de diverses sources, le convertira et l'enverra aux utilisateurs qui utilisent WebRTC comme terminal.

Le serveur WebRTC recevra également le trafic multimédia des pairs WebRTC et le transmettra aux participants à la conférence à l'aide d'applications de bureau ou appareils mobiles, si seulement.

Avantages de la norme

• Aucune installation de logiciel requise.
• Très haute qualité de communication grâce à :
  • Utilisation de codecs vidéo (VP8, H.264) et audio modernes (Opus).
  • Ajustement automatique de la qualité du flux aux conditions de connexion.
  • Annulation d'écho et de bruit intégrée.
  • Contrôle automatique du niveau des microphones des participants (AGC).
• Haut niveau de sécurité : toutes les connexions sont sécurisées et cryptées selon les protocoles TLS et SRTP.
• Il existe un mécanisme intégré pour capturer du contenu, tel que le bureau.
• Possibilité d'implémenter n'importe quelle interface de contrôle basée sur HTML5 et JavaScript.
• La possibilité d'intégrer l'interface à n'importe quel système back-end utilisant WebSockets.
• Un projet open source - vous pouvez l'intégrer dans votre produit ou service.
• Véritable multiplateforme : la même application WebRTC fonctionnera aussi bien sur n'importe quel système opérateur, ordinateur de bureau ou mobile, à condition que le navigateur prenne en charge WebRTC. Cela permet d'économiser beaucoup de ressources pour le développement de logiciels.

Inconvénients de la norme

• Pour organiser des conférences audio et vidéo de groupe, il faut un serveur de visioconférence qui mélange la vidéo et l'audio des participants, car le navigateur ne sait pas comment synchroniser plusieurs flux entrants entre eux.
• Toutes les solutions WebRTC sont incompatibles entre elles, car la norme décrit uniquement les méthodes de transmission vidéo et audio, laissant la mise en œuvre des méthodes d'adressage des abonnés, de suivi de leur disponibilité, d'échange de messages et de fichiers, de planification et d'autres choses pour le fournisseur.
• En d'autres termes, vous ne pourrez pas appeler depuis une application WebRTC d'un développeur vers une application WebRTC d'un autre développeur.
• Le mixage des conférences de groupe nécessite beaucoup de ressources informatiques, ce type de communication vidéo nécessite donc un achat abonnement payant ou investir dans votre infrastructure, où chaque conférence nécessite 1 cœur physique d'un processeur moderne.

Secrets WebRTC : comment les fournisseurs bénéficient de la technologie Web perturbatrice

Tzachi Levent-Levi, Bloggerek.me, Vidéo+Conférence 2015

WebRTC pour le marché de la visioconférence

Augmentation du nombre de terminaux de visioconférence

La technologie WebRTC a eu une forte influence sur le développement du marché de la visioconférence. Après la sortie des premiers navigateurs prenant en charge WebRTC en 2013, le nombre potentiel de terminaux de visioconférence dans le monde a immédiatement augmenté d'un milliard d'appareils. En fait, chaque navigateur est devenu un terminal de visioconférence qui n'est pas inférieur à ses homologues matériels en termes de qualité de communication.

Utilisation dans des solutions spécialisées

L'utilisation de diverses bibliothèques JavaScript et API de service cloud avec prise en charge WebRTC facilite l'ajout de la prise en charge vidéo à tous les projets Web. Dans le passé, la transmission de données en temps réel obligeait les développeurs à apprendre le fonctionnement des protocoles et à utiliser le travail d'autres sociétés, ce qui nécessitait le plus souvent des licences supplémentaires, ce qui augmentait les coûts. WebRTC est déjà activement utilisé dans des services tels que "Appel depuis le site", "Chat d'assistance en ligne", etc.

Ex-utilisateurs de Skype pour Linux

En 2014, Microsoft a annoncé la fin du support du projet Skype pour Linux, ce qui a provoqué un grand mécontentement parmi les professionnels de l'informatique. La technologie WebRTC n'est pas liée au système d'exploitation, mais est implémentée au niveau du navigateur, c'est-à-dire Les utilisateurs de Linux pourront voir les produits et services basés sur WebRTC comme un remplacement à part entière de Skype.

Concurrence avec Flash

WebRTC et HTML5 ont été un coup mortel pour Technologies Flash, qui connaissait déjà ses années loin d'être les meilleures. Depuis 2017, les principaux navigateurs ont officiellement cessé de prendre en charge Flash et la technologie a finalement disparu du marché. Mais vous devez donner du crédit à Flash, car c'est lui qui a créé le marché de la conférence Web et a offert les capacités techniques de communication en direct dans les navigateurs.

Présentations vidéo WebRTC

Dmitry Odintsov, TrueConf, Vidéo+Conférence Octobre 2017

Codecs dans WebRTC

Codecs audio

Pour compresser le trafic audio dans WebRTC, les codecs Opus et G.711 sont utilisés.

G.711- le codec vocal le plus ancien avec un débit élevé (64 kbps), qui est le plus souvent utilisé dans les systèmes de téléphonie traditionnels. Le principal avantage est la charge de calcul minimale due à l'utilisation d'algorithmes de compression légers. Le codec est différent niveau faible compression des signaux vocaux et n'introduit pas de retard audio supplémentaire lors de la communication entre les utilisateurs.

G.711 est pris en charge par un grand nombre d'appareils. Les systèmes utilisant ce codec sont plus faciles à utiliser que ceux basés sur d'autres codecs audio (G.723, G.726, G.728, etc.). En termes de qualité, G.711 a reçu un score de 4,2 dans les tests MOS (un score de 4-5 est le plus élevé et signifie une bonne qualité, similaire à la qualité du trafic vocal dans le RNIS et même supérieure).

Opus est un codec avec un faible délai d'encodage (de 2,5 ms à 60 ms), prenant en charge le débit binaire variable et haut niveau compression, ce qui est idéal pour le streaming audio sur les réseaux avec variable débit. Opus est une solution hybride qui combine Meilleure performance codecs SILK (compression de la voix, élimination des distorsions de la parole humaine) et CELT (codage des données audio). Le codec est disponible gratuitement, les développeurs qui l'utilisent n'ont pas besoin de payer de redevances aux détenteurs de droits d'auteur. Comparé à d'autres codecs audio, Opus gagne certainement à bien des égards. Il a éclipsé les codecs à faible débit assez populaires tels que MP3, Vorbis, AAC LC. Opus restitue "l'image" du son plus proche de l'original que AMR-WB et Speex. Ce codec est l'avenir, c'est pourquoi les créateurs de la technologie WebRTC l'ont inclus dans la gamme obligatoire des normes audio prises en charge.

Codecs vidéo

Les problèmes de choix d'un codec vidéo pour WebRTC ont pris plusieurs années aux développeurs, finalement ils ont décidé d'utiliser H.264 et VP8. Presque tous les navigateurs modernes prennent en charge les deux codecs. Les serveurs de visioconférence n'ont besoin d'en prendre en charge qu'un seul pour fonctionner avec WebRTC.

VP8 est un codec vidéo gratuit avec une licence ouverte, offrant une vitesse de décodage de flux vidéo élevée et une résistance accrue à la perte de trame. Le codec est universel, il est facile de l'implémenter dans des plates-formes matérielles, de sorte que les développeurs de systèmes de visioconférence l'utilisent souvent dans leurs produits.

Codec vidéo payant H.264 s'est fait connaître beaucoup plus tôt que son frère. Il s'agit d'un codec avec un degré élevé de compression du flux vidéo lors de l'enregistrement Haute qualité vidéo. La forte prévalence de ce codec parmi les systèmes de visioconférence matériels suggère son utilisation dans la norme WebRTC.

Google et Mozilla font activement la promotion du codec VP8, tandis que Microsoft, Apple et Cisco font activement la promotion du H.264 (pour assurer la compatibilité avec les systèmes de visioconférence traditionnels). Et ici, un très gros problème se pose aux développeurs de solutions WebRTC basées sur le cloud, car si tous les participants à la conférence utilisent le même navigateur, il suffit alors de mélanger la conférence une fois avec un codec, et si les navigateurs sont différents et parmi eux il y a Safari/Edge, alors la conférence devra être encodée deux fois avec des codecs différents, ce qui doublera la Configuration requise au serveur média et, par conséquent, le coût des abonnements aux services WebRTC.

API WebRTC

La technologie WebRTC repose sur trois principales API :

• (responsable de la réception par le navigateur Web des signaux audio et vidéo des caméras ou du bureau de l'utilisateur).
• RTCPeerConnection(responsable de la connexion entre les navigateurs pour «l'échange» des données multimédias reçues de la caméra, du microphone et du bureau. De plus, les «tâches» de cette API incluent le traitement du signal (le nettoyer des bruits parasites, régler le volume du microphone) et le contrôle sur les codecs audio et vidéo utilisés) .
• Canal de données RTC(fournit un transfert de données bidirectionnel sur une connexion établie).

Avant d'accéder au microphone et à la caméra de l'utilisateur, le navigateur demande cette autorisation. À Google Chrome vous pouvez pré-configurer l'accès dans la rubrique "Paramètres", dans Opera et Firefox, le choix des appareils s'effectue directement au moment de l'accès, depuis la liste déroulante. La demande d'autorisation apparaîtra toujours lors de l'utilisation du protocole HTTP et une fois si vous utilisez HTTPS :

RTCPeerConnection. Chaque navigateur participant à une conférence WebRTC doit avoir accès à cet objet. Grâce à l'utilisation de RTCPeerConnection, les données multimédias d'un navigateur à l'autre peuvent même passer par le NAT et les pare-feu. Pour transmettre avec succès les flux multimédias, les participants doivent échanger les données suivantes à l'aide d'un transport tel que les sockets Web :

• le participant initiateur envoie au deuxième participant une Offer-SDP (structure de données, avec les caractéristiques du flux média qu'il va transmettre) ;
• le second participant génère une « réponse » - Answer-SDP et l'envoie à l'initiateur ;
• puis, un échange de candidats ICE est organisé entre les participants, s'il y en a (si les participants sont derrière des NAT ou des firewalls).

Après la réussite de cet échange entre les participants, le transfert des flux média (audio et vidéo) est directement organisé.

Canal de données RTC. La prise en charge du protocole Data Channel est apparue relativement récemment dans les navigateurs, de sorte que cette API ne peut être envisagée que dans les cas où WebRTC est utilisé dans Navigateurs Mozilla Firefox 22+ et Google Chrome 26+. Avec lui, les participants peuvent échanger des messages texte dans le navigateur.

Connexion WebRTC

Navigateurs de bureau pris en charge

• Google Chrome (17+) et tous les navigateurs basés sur le moteur Chromium ;
• Mozilla Firefox (18+);
• Opéra (12+);
• Safari (11+);

Navigateurs mobiles pris en charge pour Android

• GoogleChrome (28+) ;
• MozillaFirefox (24+);
• Opéra Mobile (12+);
• Safari (11+).

WebRTC, Microsoft et Internet Explorer

Pendant très longtemps, Microsoft est resté silencieux sur la prise en charge de WebRTC dans Internet Explorer et dans son nouveau Navigateur périphérique. Les gars de Redmond n'aiment pas vraiment mettre la technologie entre les mains d'utilisateurs qu'ils ne contrôlent pas, c'est le genre de politique. Mais peu à peu les choses ont décollé, parce que. Il n'était plus possible d'ignorer WebRTC, et le projet ORTC, dérivé de la norme WebRTC, a été annoncé.

Selon les développeurs, ORTC est une extension de la norme WebRTC avec un ensemble amélioré d'API basées sur JavaScript et HTML5, ce qui, traduit en langage courant, signifie que tout sera pareil, seul Microsoft, pas Google, contrôlera la norme et son développement. L'ensemble de codecs a été étendu avec la prise en charge de H.264 et de certains codecs audio de la série G.7XX utilisés dans les systèmes de téléphonie et de visioconférence matériels. Il y aura peut-être un support intégré pour RDP (pour le transfert de contenu) et la messagerie. Soit dit en passant, les utilisateurs d'Internet Explorer n'ont pas de chance, le support ORTC ne sera que dans Edge. Eh bien, et bien sûr, un tel ensemble de protocoles et de codecs s'adapte facilement à Skype Entreprise, ce qui ouvre encore plus d'applications professionnelles pour WebRTC.

Les internautes européens se divisent en deux parties : selon une enquête de l'Institut d'analyse de l'opinion publique d'Allenbach (Allemagne), Skype, le chat et les systèmes de messagerie instantanée font désormais partie intégrante de la vie quotidienne de 16,5 millions d'adultes et d'enfants, 9 millions utilisent ces services au cas par cas, et 28 millions n'y touchent pas.

La situation peut changer, puisque maintenant Firefox est intégré technologie de communication en temps réel (WebRTC), ainsi que le client lui-même. Démarrer un chat audio et vidéo n'est désormais pas plus difficile que d'ouvrir un site Web. Des services tels que Facebook et Skype, en revanche, s'appuient sur des solutions utilisant un client distinct et créant un compte.

WebRTC n'est pas seulement facile à utiliser. Cette méthode vous permet même de définir connexion directe entre deux navigateurs. Ainsi, les données audio et vidéo ne transitent pas par un serveur où la congestion peut se produire ou où l'administrateur n'est pas particulièrement sensible à la confidentialité ou à la protection des données. Grâce à la connexion directe, WebRTC ne nécessite aucune inscription ni Compte dans n'importe quel service.

Pour démarrer une conversation, il vous suffit de suivre le lien. La communication reste privée car le flux de données est crypté. Communication en temps réel via navigateur Google a commencé à s'engager activement en 2011, lorsqu'elle a publié le code source de son implémentation WebRTC.

Peu de temps après, Chrome et Firefox ont reçu leurs propres moteurs WebRTC. Ils sont actuellement options mobileséquipé à la fois de cette technologie et du moteur WebView 3.6 installé avec Android 5.0, qui est utilisé par les applications.

Pour la communication en temps réel, les interfaces JavaScript appropriées doivent être implémentées dans le visualiseur Web. Utilisation de GetUserMedia Logiciel active la capture à partir de sources audio et vidéo, c'est-à-dire la webcam et le microphone. RTCPeerConnection est responsable de l'établissement de la connexion, ainsi que de la communication elle-même.

Parallèlement à l'intégration du navigateur groupe de travail Le World Wide Web Consortium (W3C) a poussé le processus de normalisation WebRTC. Il devrait être achevé en 2015.

WebRTC se contente de peu

L'utilisation du service WebRTC ne nécessite pas beaucoup de ressources, puisque le serveur ne fait que connecter les copains. L'établissement d'une connexion n'est pas non plus particulièrement difficile. Tout d'abord, le navigateur signale au serveur WebRTC qu'il prévoit d'initier un appel. Il reçoit un lien HTTPS du serveur - la connexion est cryptée. L'utilisateur transmet ce lien à son interlocuteur. Le navigateur demande alors à l'utilisateur l'autorisation d'accéder à la webcam et au microphone.

Pour établir une connexion de streaming directe avec l'autre partie, le navigateur reçoit son adresse IP et ses données de configuration du service WebRTC. Le navigateur Web du copain fait de même.

Pour que la connexion en streaming fonctionne de manière fluide et de bonne qualité, trois moteurs fonctionnent dans le navigateur. Deux d'entre eux optimisent et compressent les données audio et vidéo, le troisième se charge de leur transport. Il envoie des données via Protocole SRTP(Secure Real-time Transport Protocol), qui permet un streaming crypté en temps réel.

Si une connexion directe échoue, WebRTC recherche un autre chemin. Par exemple, cela se produit lorsque paramètres réseau empêcher le serveur STUN de pouvoir rapporter l'adresse IP. La norme WebRTC stipule que dans ce cas la conversation aura lieu, mais avec l'inclusion intermédiaire du serveur TURN (Traversal Using Relays around NAT). Ainsi, sur le site netscan.co, vous pouvez vérifier si WebRTC est implémenté sur votre ordinateur et avec votre accès au Web.

Comment se fait la connexion

Vous devez d'abord enregistrer une conversation (1). Le service WebRTC fournit un lien qui doit être envoyé à l'interlocuteur. Le navigateur, à l'aide du serveur STUN, trouve sa propre adresse IP (2), l'envoie au service et reçoit l'IP du partenaire pour établir une connexion directe (3). Si STUN échoue, la conversation est redirigée à l'aide du serveur TURN (4).

La communication utilisant la technologie WebRTC dans le navigateur est lancée à l'aide de code JavaScript. Après cela, trois moteurs sont responsables de la communication : les moteurs voix et vidéo collectent les données multimédias de la webcam et du microphone, et le moteur de transport combine les informations et envoie le flux sous forme cryptée à l'aide du protocole SRTP (Secure Real-time Protocol).

Quels navigateurs fonctionnent avec WebRTC

Chrome et Firefox sont équipés d'un moteur WebRTC qui utilise des services tels que talky.io. Le navigateur Mozilla peut fonctionner directement avec son propre client.

Google et Mozilla continuent de développer l'idée de communication en temps réel : Chrome peut héberger une conférence WebRTC avec plusieurs participants, et le nouveau client Hello de Firefox est développé avec l'aide d'une filiale du géant des télécommunications Telefonica. Apple reste sur la touche pour l'instant, il ne faut pas encore s'attendre à WebRTC dans Safari. Cependant, il existe de nombreuses applications et plugins iOS alternatifs pour Safari.

Microsoft prend un cours légèrement différent. En tant que propriétaire du service Skype compétitif, cette société ne va pas capituler si facilement face au WebRTC. Au lieu de cela, Microsoft développe une technologie appelée ORTC (Object Real-Time Communications) pour Internet Explorer.

Les différences par rapport au WebRTC, telles que les différents codecs et protocoles pour établir le contact avec le serveur, sont mineures et, avec le temps, sont susceptibles de s'ajouter à la norme WebRTC, qui inclura ces différences. Ainsi, seul Apple reste derrière - comme d'habitude.

Une photo: entreprises de fabrication; goodluz/Photolia.com

WebRTC est une API fournie par un navigateur qui vous permet d'organiser une connexion P2P et de transférer des données directement entre les navigateurs. Il existe de nombreux tutoriels sur Internet sur la façon d'écrire votre propre chat vidéo lorsque Aide WebRTC. Par exemple, voici un article sur Habré. Cependant, ils sont tous limités à la connexion de deux clients. Dans cet article, je vais essayer de parler de la façon d'utiliser WebRTC pour organiser une connexion et un échange de messages entre trois utilisateurs ou plus.

L'interface RTCPeerConnection est une connexion peer-to-peer entre deux navigateurs. Pour connecter trois utilisateurs ou plus, nous devrons organiser un réseau maillé (un réseau dans lequel chaque nœud est connecté à tous les autres nœuds).
Nous utiliserons le schéma suivant :

1. A l'ouverture de la page, nous vérifions la présence de l'identifiant de la chambre dans emplacement.hash
2. Si l'ID de la salle n'est pas spécifié, générez-en un nouveau
3. Nous envoyons à un serveur de signalisation "un message indiquant que nous voulons rejoindre la salle spécifiée
4. Le serveur de signalisation envoie une nouvelle notification d'utilisateur aux autres clients de cette salle
5. Les clients qui sont déjà dans la salle envoient une offre SDP au nouveau venu
6. Le nouveau venu répond à l'offre "s

0. Serveur de signalisation

Comme vous le savez, bien que WebRTC offre la possibilité d'une connexion P2P entre les navigateurs, il nécessite toujours un transport supplémentaire pour échanger des messages de service. Dans cet exemple, le transport est un serveur WebSocket écrit en Node.JS à l'aide de socket.io :

var socket_io = require("socket.io"); module.exports = function (server) ( var users = (); var io = socket_io(server); io.on("connection", function(socket) ( // Vous voulez qu'un nouvel utilisateur rejoigne la salle socket.on( "room", function(message) ( var json = JSON.parse(message); // Ajoute le socket à la liste des utilisateurs users = socket; if (socket.room !== undefined) ( // Si le socket est déjà dans une pièce, laissez-la socket.leave(socket.room); ) // Entrez la pièce demandée socket.room = json.room; socket.join(socket.room); socket.user_id = json.id; // Envoyer à d'autres clients cette salle a un message sur l'adhésion d'un nouveau participant socket.broadcast.to(socket.room).emit("new", json.id); )); // Message lié au WebRTC (offre SDP, réponse SDP ou candidat ICE) socket.on("webrtc", function(message) ( var json = JSON.parse(message); if (json.to !== undefined && users !== undefined) ( // Si le message a un destinataire et ce destinataire connu du serveur, envoyer un message seulement pour lui... users.emit("webrtc", message); ) else ( // ... sinon considérer le message comme une diffusion socket.broadcast.to(socket.room).emit("webrtc", message); ) )); // Quelqu'un s'est déconnecté socket.on("disconnect", function() ( // Lorsqu'un client se déconnecte, avertir les autres socket.broadcast.to(socket.room).emit("leave", socket.user_id); delete users; )); )); );

1. index.html

Le code source de la page elle-même est assez simple. Je n'ai délibérément pas prêté attention à la mise en page et autres belles choses, puisque cet article ne parle pas de cela. Si quelqu'un veut la rendre belle, ce ne sera pas difficile.

2.main.js

2.0. Obtenir des liens vers des éléments de page et des interfaces WebRTC

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

Nous devons encore utiliser les préfixes du navigateur pour accéder aux interfaces WebRTC.

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

2.1. Détermination de l'ID de la salle

Ici, nous avons besoin d'une fonction pour générer une pièce unique et un ID utilisateur. Nous utiliserons l'UUID à cette fin.

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

Essayons maintenant d'extraire l'identifiant de la chambre de l'adresse. S'il n'est pas défini, nous en générerons un nouveau. Nous afficherons un lien vers la salle actuelle sur la page et, en même temps, nous générerons un identifiant pour l'utilisateur actuel.

VarROOM = location.hash.substr(1); if (!ROOM) ( ROOM = uuid(); ) room_link.innerHTML = "Lien vers la salle"; varME = uuid();

2.2. prise internet

Immédiatement après l'ouverture de la page, nous nous connecterons à notre serveur de signalisation, enverrons une demande pour entrer dans la salle et spécifierons les gestionnaires de messages.

// Nous spécifions que lorsque le message est fermé, nous devons envoyer une notification au serveur à propos de cette var socket = io.connect("", ("sync disconnect on unload": true)); socket.on("webrtc", socketReceived); socket.on("nouveau", socketNouveauPeer); // Envoie immédiatement une requête pour entrer dans la pièce socket.emit("room", JSON.stringify((id: ME, room: ROOM))); // Une fonction d'assistance pour envoyer des messages ciblés liés à la fonction WebRTC sendViaSocket(type, message, to) ( socket.emit("webrtc", JSON.stringify((id: ME, to: to, type: type, data: message ))); )

2.3. Paramètres de connexion homologue

La plupart des FAI fournissent une connectivité Internet via NAT. Pour cette raison, une connexion directe devient pas si triviale. Lors de la création d'une connexion, nous devons spécifier une liste de serveurs STUN et TURN que le navigateur tentera d'utiliser pour contourner le NAT. Nous spécifions également un couple options additionelles se connecter.

Var server = ( iceServers: [ (url: "stun:23.21.150.121"), (url: "stun:stun.l.google.com:19302"), (url: "turn:numb.viagenie.ca", identifiant : "votre mot de passe va ici", nom d'utilisateur : " [courriel protégé]") ] ); var options = ( optionnel : [ (DtlsSrtpKeyAgreement : vrai), // requis pour la connexion entre Chrome et Firefox (RtpDataChannels : vrai) // requis dans Firefox pour utiliser l'API DataChannels ] )

2.4. Connecter un nouvel utilisateur

Lorsqu'un nouveau pair est ajouté à la salle, le serveur nous envoie un message Nouveau. Selon les gestionnaires de messages ci-dessus, la fonction sera appelée socketNewPeer.

var pairs = (); function socketNewPeer(data) ( peers = (candidateCache: ); // Créer une nouvelle connexion var pc = new PeerConnection(server, options); // Initialiser initConnection(pc, data, "offer"); // Stocker le pair dans la liste peers peers.connection = pc; // Créer un DataChannel via lequel les messages seront échangés var channel = pc.createDataChannel("mychannel", ()); channel.owner = data; peers.channel = channel; // Définir les gestionnaires d'événements bindEvents(channel); // Créer une offre SDP pc.createOffer(function(offer) ( pc.setLocalDescription(offer); )); ) function initConnection(pc, id, sdpType) ( pc.onicecandidate = function ( event) ( if (event.candidate) ( // Lorsqu'un nouveau candidat ICE est trouvé, ajoutez-le à la liste pour un envoi ultérieur peers.candidateCache.push(event.candidate); ) else ( // Lorsque la découverte de candidats est terminé, le gestionnaire sera appelé à nouveau, mais sans candidat // Dans ce cas, nous envoyons d'abord au pair une offre SDP, ou Réponse de SDP (selon le paramètre de la fonction)... sendViaSocket(sdpType, pc.localDescription, id); // ... puis tous les candidats ICE précédemment trouvés pour (var i = 0; i< peers.candidateCache.length; i++) { sendViaSocket("candidate", peers.candidateCache[i], id); } } } pc.oniceconnectionstatechange = function (event) { if (pc.iceConnectionState == "disconnected") { connection_num.innerText = parseInt(connection_num.innerText) - 1; delete peers; } } } function bindEvents (channel) { channel.onopen = function () { connection_num.innerText = parseInt(connection_num.innerText) + 1; }; channel.onmessage = function (e) { chatlog.innerHTML += "

"; }; }

2.5. Offre SDP, réponse SDP, candidat ICE

Lorsque l'un de ces messages est reçu, nous appelons le gestionnaire de messages correspondant.

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

2.5.0 Offre SDP

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

2.5.1 Réponse SDP

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

2.5.2 Candidat ICE

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

2.6. Envoi d'un message

En appuyant sur le bouton envoyer la fonction s'appelle envoyer le message. Tout ce qu'il fait est de parcourir la liste des pairs et d'essayer d'envoyer le message spécifié à tout le monde.

Aujourd'hui, WebRTC est la technologie "à la mode" pour le streaming audio et vidéo dans les navigateurs. technologies conservatrices telles que Streaming HTTP et Flash sont plus adaptés à la diffusion de contenus enregistrés (vidéo à la demande) et sont nettement inférieurs au WebRTC en termes de diffusions en temps réel et en ligne, c'est-à-dire où une latence vidéo minimale est requise, permettant aux téléspectateurs de voir ce qui se passe "en direct".

La possibilité d'une communication en temps réel de haute qualité provient de l'architecture WebRTC elle-même, où le protocole UDP est utilisé pour transporter les flux vidéo, qui est la base standard pour transmettre la vidéo avec des retards minimaux et est largement utilisé dans les systèmes de communication en temps réel.

La latence de communication est importante dans les systèmes de diffusion en direct, les webinaires et d'autres applications où une communication interactive avec la source vidéo, les utilisateurs finaux et la solution est requise.

Une autre bonne raison d'essayer WebRTC est définitivement une tendance. Chaque Android aujourd'hui Navigateur Chrome prend en charge cette technologie, qui garantit que des millions d'appareils sont prêts à regarder la diffusion sans installer de logiciel ni de configuration supplémentaire.

Afin de tester la technologie WebRTC en action et de lancer une simple diffusion en ligne dessus, nous avons utilisé le logiciel serveur Flashphoner WebRTC Media & Broadcasting Server. Les fonctionnalités déclarent la possibilité de diffuser des flux WebRTC en mode un à plusieurs, ainsi que la prise en charge des caméras IP et des systèmes de vidéosurveillance via le protocole RTSP ; dans cette revue, nous nous concentrerons sur les diffusions web-web et leurs fonctionnalités.

Installation du serveur multimédia et de diffusion WebRTC

Parce que pour Systèmes Windows il n'y avait pas de version serveur, et je ne voulais pas installer une machine virtuelle comme VMWare + Linux, tester les diffusions en ligne sur Accueil Windows l'ordinateur a échoué. Pour gagner du temps, nous avons décidé de prendre une instance sur l'hébergement cloud comme celle-ci :

Il s'agissait d'un Centos x86_64 version 6.5 sans aucun logiciel préinstallé dans un centre de données d'Amsterdam. Ainsi, tout ce que nous avons à notre disposition est un serveur et un accès ssh à celui-ci. Pour ceux qui connaissent commandes de la console Linux, mise en place Serveurs WebRTC promet de passer simplement et sans douleur. Alors ce qu'on a fait :

1. Télécharger l'archive :

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

2. Déballer:

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

3. Installer:

$cd FlashphonerWebCallServer

Lors de l'installation, saisissez l'adresse IP du serveur : XXX.XXX.XXX.XXX

4. Activer la licence :

$cd /usr/local/FlashphonerWebCallServer/bin

$./activation.sh

5. Démarrez le serveur WCS :

$service webcallserver start

6. Vérifier le journal :

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

7. Vérifiez que deux processus sont en place :

$ps aux | grep Flashphone

Le processus d'installation est terminé.

Tester les flux en direct WebRTC

Tester les émissions s'est avéré être une affaire simple. En plus du serveur, il existe un client Web, qui se compose d'une douzaine de fichiers Javascript, HTML et CSS et a été déployé par nos soins dans le dossier /var/www/html lors de la phase d'installation. La seule chose à faire était d'entrer l'adresse IP du serveur dans la configuration flashphoner.xml afin que le client Web puisse établir une connexion au serveur via HTML5 Websockets. Décrivons le processus de test.

1. Ouvrez la page index.html du client de test dans le navigateur Chrome :

2. Pour commencer la diffusion, vous devez cliquer sur le bouton "Démarrer" au milieu de l'écran.
Avant de faire cela, vous devez vous assurer que la webcam est connectée et prête à être utilisée. Il n'y a pas d'exigences particulières pour une webcam, par exemple, nous avons utilisé une caméra d'ordinateur portable intégrée standard avec une résolution de 1280 × 800.

Le navigateur Chrome demandera certainement l'accès à la caméra et au microphone afin que l'utilisateur comprenne que sa vidéo sera envoyée au serveur Internet et lui permet de le faire.

3. L'interface représente une diffusion réussie du flux vidéo de la caméra vers le serveur WebRTC. Dans le coin supérieur droit, l'indicateur indique que le flux va vers le serveur, dans le coin inférieur il y a un bouton "Stop" pour arrêter l'envoi de la vidéo.

Regardez le lien ci-dessous. Il contient un identifiant unique pour ce flux, afin que n'importe qui puisse rejoindre la vue. Ouvrez simplement ce lien dans un navigateur. Pour le copier dans le presse-papiers, cliquez sur le bouton "Copier".

Dans des applications réelles telles que des webinaires, des conférences, des diffusions vidéo en ligne ou de la télévision interactive, les développeurs devront implémenter la distribution de cet identifiant à certains groupes de téléspectateurs afin qu'ils puissent se connecter aux flux souhaités, mais c'est la logique de l'application. Serveur multimédia et de diffusion WebRTC cela n'affecte pas, mais ne traite que de la distribution de la vidéo.

5. La connexion est établie et le spectateur voit le flux à l'écran. Il peut maintenant envoyer le lien à quelqu'un d'autre, arrêter la lecture du flux ou activer mode plein écran en utilisant les commandes dans le coin inférieur droit.

Résultats des tests du serveur WebRTC pour les diffusions en ligne

Lors des tests, la latence semblait parfaite. Le ping vers le centre de données était d'environ 100 millisecondes et le retard n'était pas visible à l'œil nu. À partir de là, nous pouvons supposer que le délai réel est le même 100 plus ou moins quelques dizaines de millisecondes pour le temps de mise en mémoire tampon. Comparé à la vidéo Flash, Flash n'est pas aussi performant que WebRTC dans ces tests. Ainsi, si vous déplacez votre main sur un réseau similaire, le mouvement à l'écran ne peut être vu qu'après une / deux secondes.

Concernant la qualité, on note que parfois on distingue les cubes sur les mouvements. Ceci est conforme à la nature du codec VP8 et son objectif principal est de fournir une communication vidéo en temps réel avec une qualité acceptable et sans retards de communication.

Le serveur est assez facile à installer et à configurer, il ne nécessite aucune compétence sérieuse pour le faire fonctionner, à l'exception d'une connaissance de Linux au niveau d'un utilisateur avancé qui peut exécuter des commandes depuis la console via ssh et utiliser éditeur de texte. En conséquence, nous avons réussi à mettre en place une diffusion en ligne un à plusieurs entre les navigateurs. La connexion de téléspectateurs supplémentaires au flux n'a pas non plus posé de problèmes.

La qualité de diffusion s'est avérée tout à fait acceptable pour les webinaires et les diffusions en ligne. La seule chose qui a causé quelques questions était la résolution de la vidéo. La caméra prend en charge 1280x800, mais la résolution sur l'image de test est très similaire à 640x480. Apparemment, ce problème doit être clarifié avec les développeurs.

Vidéo sur les tests diffusée depuis une webcam
via le serveur WebRTC

Le but de cet article est de se familiariser avec sa structure et son principe de fonctionnement sur un exemple de démonstration d'un chat vidéo peer-to-peer (chat vidéo p2p). À cette fin, nous utiliserons la démonstration de chat vidéo peer-to-peer multi-utilisateurs webrtc.io-demo. Il peut être téléchargé à partir du lien : https://github.com/webRTC/webrtc.io-demo/tree/master/site .

A noter que GitHub est un site ou service web de développement collaboratif de projets Web. Sur celui-ci, les développeurs peuvent poster les codes de leurs développements, en discuter et communiquer entre eux. De plus, certaines grandes sociétés informatiques hébergent leurs référentiels officiels sur ce site. Le service est gratuit pour les projets open source. GitHub est un référentiel de bibliothèques open source.

Ainsi, téléchargé depuis GitHub un échantillon de démonstration d'un chat vidéo peer-to-peer, nous le placerons sur le disque C ordinateur personnel dans le répertoire créé pour notre application "webrtc_demo".

Riz. une

Comme il ressort de la structure (Fig. 1), un chat vidéo peer-to-peer se compose de scripts client script.js et serveur server.js implémentés dans le langage de programmation JavaScript. Script (bibliothèque) webrtc.io.js (CLIENT) - fournit l'organisation des communications en temps réel entre les navigateurs selon un schéma peer-to-peer : "client-client", et webrtc.io.js (CLIENT) et webrtc .io.js (SERVER), utilisant le protocole WebSocket, ils assurent une communication duplex entre le navigateur et le serveur web en utilisant l'architecture "client-serveur".

Le script webrtc.io.js (SERVER) est inclus dans la bibliothèque webrtc.io et se trouve dans le répertoire node_modules\webrtc.io\lib. L'interface de chat vidéo index.html est implémentée en HTML5 et CSS3. Le contenu des fichiers de l'application webrtc_demo peut être visualisé avec l'un des éditeurs html, par exemple "Notepad++".

Nous allons vérifier le principe de fonctionnement du chat vidéo dans système de fichiers PC. Pour exécuter le serveur (server.js) sur un PC, vous devez installer le runtime node.js. Node.js vous permet d'exécuter du code JavaScript en dehors du navigateur. Vous pouvez télécharger node.js depuis le lien : http://nodejs.org/ (version v0.10.13 du 15/07/13). Sur le page d'accueil node.org, cliquez sur le bouton de téléchargement et allez sur http://nodejs.org/download/. Pour utilisateurs Windows téléchargez d'abord win.installer (.msi), puis exécutez win.installer (.msi) sur PC et installez nodejs et "npm package manager" dans le répertoire Program Files.

Riz. 2

Ainsi, node.js se compose d'un environnement de développement et d'exécution JavaScript, ainsi que d'un ensemble de modules internes pouvant être installés à l'aide du gestionnaire de packages npm ou du gestionnaire de packages.

Pour installer des modules, vous devez ligne de commande depuis le répertoire de l'application (par exemple, "webrtc_demo") exécutez la commande : npm install nom_du_module. Lors de l'installation des modules, le gestionnaire npm crée un dossier node_modules dans le répertoire à partir duquel l'installation a été effectuée. Lors de son exécution, nodejs inclut automatiquement les modules du répertoire node_modules.

Ainsi, après avoir installé node.js, ouvrez la ligne de commande et mettez à jour le module express dans le dossier node_modules du répertoire webrtc_demo à l'aide du gestionnaire de packages npm :

C:\webrtc_demo>npm installer express

Le module express est un framework web pour node.js ou plateforme de développement d'applications web. Pour avoir un accès global à express, vous pouvez l'installer comme ceci : npm installer -g express.

Ensuite, nous mettons à jour le module webrtc.io :

C:\webrtc_demo>npm install webrtc.io

Puis, en ligne de commande, on démarre le serveur : server.js :

C:\webrtc_demo>nodeserver.js

Riz. 3

Tout, le serveur fonctionne avec succès (Figure 3). Maintenant, à l'aide d'un navigateur Web, vous pouvez contacter le serveur par adresse IP et télécharger la page Web index.html, à partir de laquelle le navigateur Web extraira le code de script client - script.js et le code de script webrtc.io.js, et les exécuter. Pour qu'un chat vidéo peer-to-peer fonctionne (pour établir une connexion entre deux navigateurs), il est nécessaire à partir de deux navigateurs prenant en charge webrtc de contacter le serveur de signal fonctionnant sur node.js par adresse IP.

En conséquence, l'interface de la partie client de l'application de communication (chat vidéo) s'ouvrira avec une demande d'autorisation d'accès à la caméra et au microphone (Fig. 4).

Riz. quatre

Après avoir cliqué sur le bouton "Autoriser", la caméra et le microphone sont connectés pour la communication multimédia. De plus, via l'interface de chat vidéo, vous pouvez communiquer avec des données textuelles (Fig. 5).

Riz. 5

Il convient de noter que. Le serveur est de signalisation et est principalement conçu pour établir une connexion entre les navigateurs des utilisateurs. Node.js est utilisé pour exécuter le script server.js qui fournit la signalisation WebRTC.