Installation de la WEBRTC. Comment organiser une diffusion en ligne WEBRTC à l'aide de Webcam et VPS Server. Connecter un nouvel utilisateur

WEBRTC (Communications en temps réel Web) est une norme qui décrit la transmission de données audio en streaming, de données vidéo et de contenu au navigateur et au navigateur en temps réel sans installer des plug-ins ou d'autres extensions. La norme vous permet d'activer le navigateur dans la borne terminale de la vidéoconférence, il suffit d'ouvrir la page Web pour commencer à communiquer.

Qu'est-ce que webrtc?

Dans cet article, nous examinerons tout ce que vous devez savoir sur la technologie WEBRTC pour un utilisateur ordinaire. Considérons les avantages et les inconvénients du projet, révèlons des secrets, nous vous dirons comment cela fonctionne, où et ce que la WEBRTC est appliquée.

Qu'est-ce que vous devez savoir sur WEBRTC?

Evolution des normes et technologies Communications vidéo

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

Comment fonctionne WEBRTC

Du côté du client

  • L'utilisateur ouvre une page contenant HTML5 Tag
  • Le navigateur demande l'accès à une webcam et à un microphone utilisateur.
  • Le code JavaScript sur la page utilisateur contrôle les paramètres de connexion (adresses IP et serveur WebBRTC ou autres clients de la WEBRTC) pour contourner NAT et PAREWALL.
  • Lors de la réception d'informations sur l'interlocuteur ou un flux avec la conférence, le navigateur commence à correspondre aux codecs audio et vidéo utilisés.
  • Le processus d'encodage et de transmission de données de streaming entre les clients WEBRTC (dans notre cas, entre le navigateur et le serveur) commence.

Sur le côté du serveur WEBRTC

Pour l'échange de données entre les deux participants, le serveur vidéo n'est pas requis, mais si vous devez combiner plusieurs participants dans une conférence, le serveur est nécessaire.



Le serveur vidéo recevra le trafic de média provenant de diverses sources, le convertira et l'envoyer aux utilisateurs qui utilisent WEBRTC en tant que terminal.

Le serveur WEBRTC recevra également le trafic des médias de WEBRTC Peters et transférera à ses participants à la conférence qui utilisent des applications pour les ordinateurs de bureau ou les appareils mobiles, le cas échéant.

Avantages de la norme

  • Aucune installation n'est requise.
  • Communication de très haute qualité en raison de:
    • Utilisation de la vidéo moderne (VP8, H.264) et des codecs audio (OPUS).
    • Réglage automatique de la qualité du flux sous l'état de la connexion.
    • Système d'écho intégré et de réduction de bruit.
    • Ajustement automatique de la sensibilité des microphones des participants (ARU).
  • Haute sécurité: toutes les connexions sont protégées et cryptées selon les protocoles TLS et SRTP.
  • Il existe un mécanisme de capture de contenu intégré, tel que le bureau.
  • La possibilité d'implémenter n'importe quelle interface de gestion HTML5 et JavaScript.
  • Possibilité d'intégrer une interface avec tout système de back-end à l'aide de Webockets.
  • Un projet open source - peut être mis en œuvre dans votre produit ou votre service.
  • Véritable plate-forme croisée: la même application WEBRTC fonctionnera également bien sur tout système d'exploitation, bureau ou mobile, à condition que le navigateur prend en charge WEBRTC. Cela permet d'économiser de manière significative des ressources pour le développement de logiciels.

Inconvénients de la norme

  • Pour l'organisation de la conférence audio et vidéo de groupe, le serveur VKS est requis, qui mélangerait la vidéo et le son des participants, car Le navigateur ne sait pas comment synchroniser plusieurs flux entrants entre eux.
  • Toutes les solutions WEBRTC sont incompatibles, car La norme décrit uniquement des méthodes de transmission vidéo et sonores, laissant la mise en œuvre des méthodes d'adressage des abonnés, suivant leur disponibilité, leur messagerie et leurs fichiers, planification et autres fournisseurs.
  • En d'autres termes, vous ne serez pas en mesure d'appeler de l'application WEBRTC d'un développeur dans l'application WEBRTC d'un autre développeur.
  • Le mélange de conférences de groupe nécessite de grandes ressources informatiques, ce type d'appel vidéo nécessite l'achat d'un abonnement payé ou d'investir dans son infrastructure, où un noyau physique du processeur moderne est requis pour chaque conférence.

WEBRTC Secrets: Comment les fournisseurs bénéficient d'une technologie Web percée


Tsakhi Levent Levi, bloggeek.me, vidéo + conférence 2015

Webrtc pour le marché vks

Augmenter le nombre de terminaux VKS

La technologie WEBRTC a eu un fort impact sur le développement du marché VKS. Après avoir quitté les premiers navigateurs avec le soutien de la WEBRTC en 2013, le nombre potentiel de terminaux de vidéoconférence dans le monde a immédiatement augmenté de 1 milliard d'appareils. En substance, chaque navigateur est devenu un terminal CSM, non inférieur à ses analogues matériels du point de vue des enchères.

Utiliser dans des solutions spécialisées

À l'aide de diverses bibliothèques JavaScript et Webrtc Cloud Service API vous permet d'ajouter facilement une prise en charge de la liaison vidéo à tous les projets Web. Auparavant, pour transmettre des données dans des développeurs en temps réel, il était nécessaire d'étudier les principes des protocoles et d'utiliser l'évolution des autres sociétés qui exiguraient le plus souvent des licences supplémentaires, ce qui augmente les coûts. Déjà, WEBRTC est activement utilisé dans le "site d'appels", "Support de discussion en ligne", etc.

Ex-utilisateurs Skype pour Linux

En 2014, Microsoft a annoncé la résiliation du support du projet Skype pour Linux, ce qui a provoqué une grande irritation des spécialistes de la situation. La technologie WEBRTC n'est pas liée au système d'exploitation et mise en œuvre au niveau du navigateur, c'est-à-dire Les utilisateurs de Linux pourront voir les produits et services basés sur le remplacement Skype à part entière WEBRTC.

Concours avec Flash.

WEBRTC et HTML5 sont devenus un coup fatal pour la technologie Flash, qui et si inquiet de leur loin des meilleures années. Depuis 2017, les principaux navigateurs ont officiellement cessé de soutenir Flash et la technologie ont finalement disparu du marché. Mais vous devez donner au flash dû, après tout ce qui était celui qui a créé le marché de la conférence Web et des possibilités techniques proposées pour les communications en direct dans les navigateurs.

Présentation vidéo WEBRTC.

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

Codecs dans WEBRTC.

Un codec audio

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

G.711 - Le codec vocal le plus ancien avec un débit binaire élevé (64 Kbps), qui est le plus souvent utilisé dans les systèmes de téléphonie traditionnelle. L'avantage principal est la charge de calcul minimale due à l'utilisation d'algorithmes de compression de la lumière. Le codec est caractérisé par un faible niveau de compression de signal vocal et ne fait pas un délai audio supplémentaire lors de la communication entre les utilisateurs.

G.711 est soutenu par un grand nombre d'appareils. Systèmes dans lesquels ce codec est utilisé est plus facile à utiliser que ceux basés sur d'autres codes audio (G.723, G.726, G.728, etc.). En termes de qualité G.711, il a été estimé à 4,2 dans les tests MOS (une estimation de 4 à 5 est le plus élevé et signifie une bonne qualité, similaire à la qualité de la transmission de la circulation vocale dans RNIS et encore plus).

Opus. - Il s'agit d'un codec avec un délai de codage faible (2,5 ms à 60 ms), une prise en charge d'un débit variable et d'un niveau élevé de compression, idéal pour transmettre un signal audio en streaming dans des réseaux avec une bande passante variable. OPUS est une solution hybride qui combine les meilleures caractéristiques des codecs de soie (compression vocale, résolvant la distorsion de la parole humaine) et celt (codage de données audio). Le codec est en libre accès, les développeurs qui l'utilisent, n'ont pas besoin de payer les déductions aux détenteurs de droits d'auteur. Par rapport aux autres codes audio, OPUS gagne sans aucun doute dans de nombreux indicateurs. Il éclipse des codecs assez populaires avec un bittrate bas, tel que MP3, Vorbis, AAC LC. OPUS restaure le plus proche de l'original "image" du son que l'amr-wb et les Speex. Derrière ce codec - l'avenir, c'est pourquoi les technologies de la WEBRTC l'ont inclus dans une gamme obligatoire d'audiostandarts soutenus.

Codec vidéo

La sélection d'un codec vidéo pour WEBRTC a pris plusieurs années de développeurs, en conséquence, nous avons décidé d'utiliser H.264 et VP8. Presque tous les navigateurs modernes prennent en charge les deux codecs. Les serveurs de vidéoconférence pour travailler avec WEBRTC ne supportent que un seul.

VP8. - La vidéo libre codée avec une licence ouverte se distingue par une vitesse élevée de décodage du flux vidéo et une résistance accrue à la perte de cadres. Le codec est universel, il est facile d'introduire dans des plates-formes matérielles, de manière très souvent que les développeurs de systèmes de vidéoconférence l'utilisent dans leurs produits.

Codec vidéo payant H.264. Il est devenu connu beaucoup plus tôt que son compagnon. Ceci est un codec avec un degré élevé de compression de flux vidéo tout en maintenant une vidéo de haute qualité. La prévalence élevée de ce codec parmi les systèmes de matériel de vidéoconférence implique son utilisation dans la norme WEBRTC.

Google et Mozilla promeuvent activement le codec VP8 et Microsoft, Apple et Cisco-H.264 (pour assurer la compatibilité avec les systèmes de vidéoconférence traditionnels). Et ici, c'est un très gros problème pour les développeurs de solutions de Cloud Webrtc, car si lors de la conférence, tous les participants utilisent un navigateur, la conférence est suffisante pour se mélanger une fois avec un codec, et s'il y a des navigateurs différents et qu'il y ait Safari / Edge Les navigateurs devront alors être codés deux fois sur des codecs différents, qui doubleront les exigences système pour le serveur multimédia et, par conséquent, le coût des abonnements aux services WEBRTC.

API WEBRTC.

La technologie WEBRTC est basée sur trois API principales:

  • (Responsable de l'acceptation d'un signal audio et vidéo de navigateur Web à partir d'une caméra ou d'un bureau utilisateur).
  • Rtcpeerconnection. (Responsable de la connexion entre les navigateurs destinés à «échanger» reçu de la caméra, du microphone et du bureau, les médias. Également dans les "fonctions" de cette API entre dans le traitement du signal (le nettoyant des étrangers, ajustant le volume du microphone) et contrôle les codes audio et vidéo utilisés).
  • Chaîne RTCData (Fournit la transmission de données bilatérales par la connexion établie).

Avant d'accéder au microphone et à l'appareil photo de l'utilisateur, le navigateur demande la permission. Dans Google Chrome, vous pouvez ajuster à l'avance dans la section "Paramètres", dans Opera et Firefox, la sélection des périphériques est effectuée directement au moment de l'accès, dans la liste déroulante. La demande de résolution apparaîtra toujours lors de l'utilisation du protocole HTTP et une fois si vous utilisez HTTPS:


Rtcpeerconnection.. Chaque navigateur participant à la conférence WEBRTC doit avoir accès à cet objet. Grâce à l'utilisation de RTCPeerconnection, Mediaden d'un navigateur peut être utilisé même via des écrans NAT et réseau. Pour transférer avec succès des portions multimédia, les participants doivent échanger les données suivantes à l'aide de transport, telles que les prises Web:

  • le participant initiateur envoie le deuxième participant de l'offre-SDP (structure de données, avec les caractéristiques du flux multimédia, qu'elle transmettra);
  • le second participant forme la "réponse" - Réponse-SDP et la transmet à l'initiateur;
  • ensuite, l'échange de candidats à glace est organisé entre les participants, le cas échéant (si les participants sont derrière des écrans NAT ou Network).

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

Chaîne RTCData. Le support de protocole de canal de données est apparu dans les navigateurs relativement récemment. Par conséquent, cette API peut être visualisée uniquement dans des cas d'utilisation de WEBRTC dans Mozilla Firefox 22+ et Google Chrome 26+ Navigateurs. Avec cela, les participants peuvent partager des messages texte dans le navigateur.

Connexion par webrtc.

Navigateurs de bureau pris en charge

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

Navigateurs mobiles pris en charge pour Android

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

WEBRTC, Microsoft et Internet Explorer

Pendant très longtemps, Microsoft a gardé le silence sur le support WEBRTC dans Internet Explorer et dans son nouveau navigateur Edge. Les gars de Redmond n'aiment pas vraiment donner aux technologies aux utilisateurs qu'ils ne contrôlent pas, c'est une telle politique. Mais peu à peu l'affaire est passée du point mort, car La WEBRTC était en outre impossible à ignorer et le projet ORTC dérivé de la norme de la WEBRTC a été annoncé.

Selon les développeurs, ORTC est une extension de la norme WEBRTC avec un ensemble amélioré d'API et de HTML5 basé sur JavaScript, qui s'est traduit en une langue normale signifie que tout sera identique, uniquement pour contrôler la norme et son développement sera Microsoft , et pas google. L'ensemble des codecs est élargi par prise en charge de H.264 et de certains codes audio de la série G.7XX utilisée dans les systèmes de téléphonie et de matériel VKS. Il peut sembler une prise en charge intégrée au RDP (pour la transmission du contenu) et la messagerie. À propos, Internet Explorer Les utilisateurs ne sont pas chanceux, la prise en charge de l'ORTC ne sera qu'en avance. Bien, naturellement, un tel ensemble de protocoles et de codecs avec du sang bas est inséré avec Skype pour les entreprises, ce qui ouvre encore plus d'applications commerciales pour WEBRTC.

L'objectif de cet article est sur un échantillon de démonstration du chat vidéo de pair (chat vidéo P2P) pour se familiariser avec sa structure et son principe de travail. À cette fin, nous utilisons l'échantillon de démonstration multi-utilisateurs de la discussion vidéo à peering webrtc.io-démo. Il peut être téléchargé par référence: https://github.com/webrtc/webrtc.io-demo/tree/master/Site.

Il convient de noter que GitHub est un site Web ou un service Web pour un développement commun de projets Web. Sur les développeurs informatiques peuvent placer des codes de leurs développements, en discuter et communiquer les uns avec les autres. En outre, certaines grandes entreprises informatiques placent leurs référentiels officiels sur ce site. Le service est gratuit pour des projets open source. GitHub est un référentiel de bibliothèques de bibliothèque, code source libre.

Donc, téléchargée à partir de l'échantillon de démonstration GitHub, un échantillon de démonstration de pair, pour publier sur le disque avec un ordinateur personnel dans le répertoire créé pour notre application "webrtc_demo".


Figure. une

Comme suit la structure (figure 1), la chat vidéo par pair est composée de scripts client.js et de serveur Server.js Scripts implémentés dans la langue de programmation JavaScript. Script (bibliothèque) webrtc.io.js (Client) - fournit des communications en temps réel entre les navigateurs peer-nommée: "Client client" et webrtc.i.js (client) et webrtc.i.js (serveur), Utilisation du protocole WebSocket, fournissez une connexion en duplex entre le navigateur et le serveur Web d'architecture client-serveur.

Le script webrtc.io.js (serveur) entre dans la bibliothèque WEBRTC.IO et se trouve dans le répertoire Node_Modules \\ webrTC.IO \\ lib. L'interface du chat vidéo Index.html est implémentée sur HTML5 et CSS3. Le contenu des fichiers d'application webrtc_demo peut être visualisé l'un des éditeurs HTML, tels que "Notepad ++".

Le principe de la discussion vidéo sera vérifié dans le système de fichiers PC. Pour démarrer le serveur (serveur.js) sur le PC, vous devez définir le nœud.js Runtime. Nœud.js vous permet d'exécuter JavaScript en dehors du navigateur. Vous pouvez télécharger node.js par référence: http://nodejs.org/ (version V0.10.13 le 07/15/13). Sur la page principale du site Web Node.org, cliquez sur le bouton Télécharger et accédez à http://nodejs.org/download/. Pour les utilisateurs de Windows, vous téléchargez d'abord Win.Installer (.msi), puis exécutez Win.Installer (.msi) sur le PC et installez NDEJS et "NPM Package Manager" dans le répertoire des fichiers de programme.




Figure. 2.

Ainsi, nœud.js consiste en un environnement de développement et d'exécution de code JavaScript, ainsi qu'à partir d'un ensemble de modules internes pouvant être installés à l'aide d'un gestionnaire de paquets NPM ou d'un gestionnaire.

Pour installer les modules, il est nécessaire d'exécuter la commande sur la ligne de commande dans le répertoire d'applications (par exemple, "webrtc_demo): nPM Installation nom_module. Pendant le processus d'installation, les modules de gestionnaire NPM créent le dossier Node_Modules dans le répertoire à partir duquel l'installation a été effectuée. En cours de fonctionnement, NodeJS connecte automatiquement les modules du répertoire Node_Modules.

Ainsi, après avoir installé Node.js, nous ouvrons la ligne de commande et mettons à jour le module Express dans le répertoire de dossier Node_Modules webrtc_demo à l'aide du gestionnaire de packages NPM:

C: \\ webrtc_demo\u003e NPM Install Express

Le module Express est un cadre Web pour Node.js ou une plate-forme Web pour développer des applications. Pour avoir un accès mondial à express, vous pouvez la définir de cette manière: nPM Installer -g Express.

Ensuite, je vais mettre à jour le module webrtc.io:

C: \\ webrtc_demo\u003e NPM installer webrtc.io

Ensuite, dans l'invite de commande, lancez le serveur: serveur.js:

C: \\ webrtc_demo\u003e nœud server.js


Figure. 3.

Tout, le serveur fonctionne avec succès (Figure 3). Maintenant, à l'aide d'un navigateur Web, vous pouvez contacter le serveur via l'adresse IP et télécharger la page Web Index.html avec laquelle le navigateur Web récupérera le code du script client - script.js et le code de la WEBRTC.IO. Code de script JS et les exécutez. Pour le fonctionnement de la touche Video homologue (pour installer une connexion entre deux navigateurs), il est nécessaire de recevoir deux navigateurs prenant en charge WEBRTC, contactez l'adresse IP sur le serveur de signal en cours d'exécution sur Node.js.

En conséquence, l'interface de la partie client de l'application de communication (chat vidéo) s'ouvre avec une demande de résolution de l'accès à la chambre et au microphone (Fig. 4).



Figure. quatre

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



Figure. cinq

Il convient de noter que. Le serveur est alarme et est principalement conçu pour définir la connexion entre les navigateurs d'utilisateurs. Pour le script Server Server.js Server, fournissant des alarmes WEBRTC, utilise node.js.

Préambule. Chat vidéo P2P sur la base Webrtc. - Ceci est une alternative à Skype et à d'autres moyens de communication. Les éléments de base du chat vidéo P2P basé sur WEBRTC est le navigateur et contactez le serveur. Vidéo P2P - Ce sont des vidéos de théière dans lesquelles le serveur ne participe pas au transfert des flux d'informations. Les informations sont transmises directement entre les navigateurs d'utilisateurs (PIRONGS) sans aucun programme supplémentaire. Outre les navigateurs dans des échantillons vidéo P2P, des serveurs de contact sont utilisés, qui sont conçus pour enregistrer les utilisateurs, stockant des données à leur sujet et en garantissant la commutation entre les utilisateurs. Les navigateurs prenant en charge les dernières technologies WEBRTC et HTML5 fournissent une transmission de messages et de fichiers texte instantanés, ainsi que de la communication vocale et vidéo dans les réseaux IP.

Ainsi, des salles de discussion, des chats Web, des discussions vocales et vidéo dans l'interface Web, IMS, VoIP sont des services qui fournissent des services de communication en ligne via des réseaux composites avec commutation par lots. En règle générale, les services de communication exigent ou installent des applications clientes sur des périphériques utilisateur (PCS, smartphones, etc.), ou d'installer des plug-ins et des extensions dans les navigateurs. Les services ont leurs propres réseaux de communication, dont la plupart sont construits sur l'architecture client-serveur.

Les services de communication sont des applications, à l'exception de la SMS, dans laquelle les canaux vocaux, vidéo, données et texte ne sont pas intégrés. Dans les réseaux de chaque service sont appliqués. Il convient de noter que ces applications ne peuvent pas travailler simultanément dans plusieurs réseaux de communication, c'est-à-dire Les applications, en règle générale, ne peuvent pas interagir les unes avec les autres, à la suite de laquelle une application distincte doit être installée pour chaque réseau de communication.

Le problème de l'intégration des services de communication en temps réel (chat, téléphonie, vidéoconférence), c'est-à-dire Intégrer les canaux de transmission vocale, la vidéo, les données et l'accès à ceux-ci à l'aide d'une application (navigateur) peuvent être résolus chez pair-to-peer ou vidéososphats P2P (Piring, point - point à point) basé sur protocole WEBRTC. En fait, le navigateur prenant en charge WEBRTC devient une interface unique pour tous les périphériques utilisateur (PC, smartphones, iPads, téléphones IP, téléphones mobiles, etc.) qui fonctionnent avec des services de communication.

Il s'agit de WEBRTC qui fournit des implémentations dans le navigateur de toutes les technologies fournissant une communication en temps réel. L'essence des chats vidéo P2P est que les données multimédia et de texte sont transmises directement entre les navigateurs d'utilisateurs (peering à distance) sans participation de serveurs et programmes supplémentaires. Ainsi, les navigateurs donnent non seulement accès à presque toutes les ressources d'informations sur Internet stockées sur des serveurs, mais deviennent également un moyen d'accéder à tous les services de communication en temps réel et aux services postaux (messagerie vocale, courrier électronique, SMS, etc.).

Serveurs (serveurs de contact) Les échantillons vidéo P2P sont destinés uniquement à enregistrer les utilisateurs, à stocker des données utilisateur et à définir une connexion (commutation) entre les navigateurs d'utilisateurs. Les premières vidéos P2P ont été implémentées à l'aide de Flash Technologies. Sites vidéo Flash P2P s'appliquent, par exemple, sur les réseaux sociaux. Les vidéos de flash P2P ne fournissent pas de transmission de données multimédia de haute qualité. De plus, pour émettre le flux vocal et vidéo du microphone et du caméscope dans les téléphones vidéo Flash P2P, le plug-in Flash du navigateur Web est requis.

Mais les services de télécommunication de la nouvelle génération incluent communications Webqui sont utilisés pour communiquer sur Internet uniquement navigateurs et serveurs de contactJustificatif protocoles WEBRTC et spécification Html5.. Tout appareil utilisateur (PC, iPad, smartphones, etc.), équipé d'un tel navigateur, peut fournir des appels vocaux et vidéo de haute qualité, ainsi que de transmettre des messages et des fichiers instantanés.

Ainsi, la nouvelle technologie des communications Web (chats P2P, chats vidéo) est le protocole WebTC. WEBRTC En conjonction avec HTML5, CSS3 et JavaScript vous permettent de créer diverses applications Web. WEBRT est conçu pour organiser des communications Web (réseaux de thé) en temps réel par une architecture peer-to-peer. Les salles de discussion basées sur la BTBRTC P2P fournissent un transfert de fichiers, ainsi que des utilisateurs de communication texte, voix et vidéo via Internet utilisant uniquement des navigateurs Web sans utiliser d'ajouts et de plug-ins externes dans le navigateur.

Dans les chats P2P, le serveur est utilisé uniquement pour l'installation de connexions P2P entre deux navigateurs. Pour créer la partie P2P du client P2P sur le protocole CSS3 et JavaScript, CSS3 et JavaScript. L'application client interagit avec les navigateurs via l'API WEBRTC.

WEBRTC sont mis en œuvre par trois API JavaScript:

  • Rtcpeerconnection;
  • MediaStream (GetTusermedia);
  • Rtcdatachannel.

Les navigateurs transmettent des données multimédia sur le protocole SRTP qui fonctionne sur UDP. Étant donné que NAT crée des problèmes pour les navigateurs (clients) situés derrière des routeurs NAT qui utilisent des connexions P2P via Internet, l'étourdissement est utilisé pour ramper Nat. Stun est un protocole client-serveur qui fonctionne sur le protocole de transport UDP. Dans les discussions P2P, en règle générale, un serveur d'étourdissement public est appliqué et les informations qui y sont reçues sont utilisées pour les connexions UDP entre deux navigateurs si elles sont pour NAT.

Exemples d'applications WEBRTC de mise en œuvre (salles de discussion P2P, discussions sur la voix et vidéo):
1. Bistris de chat vidéo P2P (chat vidéo en un clic, chat P2P), fabriqué sur la base de WEBRTC, peut être ouvert sur BistrI. Bistri travaille dans un navigateur sans installer de nouveaux programmes et plugins. L'essence du travail est la suivante: Ouvrez la discussion vidéo P2P sur le lien spécifié, après vous inscrire dans l'interface qui s'ouvre, invitez les partenaires, puis à partir de la liste cliente de pair, sélectionnez le partenaire qui se trouve sur le réseau et cliquez sur le " Bouton d'appel vidéo ".

En conséquence, MediaStream (Get Mertmedia) capturera les webcams microphone + et le serveur effectuera l'échange de messages de signal avec le partenaire sélectionné. Après l'échange de messages de signaux, l'API de peerclection crée des canaux pour transmettre des flux vocaux et vidéo. De plus, Bistri transfère des messages et des fichiers texte instantanés. En figue. 1 Affiche la capture d'écran de l'interface Bistri Video Chat P2P.


Figure. 1. Bistres de chat vidéo P2P

2. Twelephone (chat vidéo P2P, chat P2P, SIP Twelephone) - Cette application client est construite sur la base HTML5 et WEBRTC, qui vous permet d'effectuer des appels vocaux et vidéo, ainsi que de transmettre des messages texte instantanés, c'est-à-dire Twilephone inclut Test P2P Chat, Chat vidéo et SIP Twelephone. Il convient de noter que Twelephone prend en charge le protocole SIP et vous pouvez désormais créer et recevoir des appels vocaux et vidéo à partir de téléphones SIP à l'aide de votre compte Twitter comme numéro de téléphone. De plus, les messages texte peuvent être entrés par la voix via le microphone et le programme de reconnaissance vocale entre dans le texte de la chaîne "Envoyer un message".

Twelphone est une téléphonie Web qui fonctionne basée sur le navigateur Google Chrome, à commencer par la version 25, sans logiciel supplémentaire. Twelphone a été développé par Chris Matthieu. La partie Twuephone du serveur est basée sur Node.js. Le serveur (Contact Server) est utilisé uniquement pour l'installation de connexions P2P entre deux navigateurs ou des clients WEBRTC. L'application Twelephone n'a aucun outil d'autorisation propre et axé sur la connexion à un compte (compte) dans Twitter.

En figue. 2 est une capture d'écran de l'interface P2P de chat vidéo Twelephone.



Figure. 2. Twéléphone P2P

3. Groupe P2P Video Chat Conversat.io est basé sur les dernières technologies WEBLTC et HTML5. Conversat Video Chat est basé sur la bibliothèque SimpleWebRTC et est conçue pour communiquer jusqu'à 6 clients par des pairs dans une pièce (pour la communication, spécifier le nom de la salle commune pour les clients de pair dans la ligne "Nom de la conversation"). P2P Chat vidéo Conversat fournit des services de communication aux utilisateurs sans enregistrement sur le serveur de contacts. En figue. 3 est représenté par la capture d'écran d'interface P2P de chat de conversation.



Figure. 3. Groupe P2P Video Chat conversat.io

Pour participer à des échantillons vidéo P2P basés sur WEBRTC, vous devez disposer d'un navigateur prenant en charge le protocole WEBRTC et la spécification HTML5. Actuellement, Google Chrome Browersers, à partir de la version 25 et Mozilla Firefox Support nocturne Nightly Spécification du protocole WEBRTC et de HTML5. Les applications de la qualité de l'application et de la transmission sonores de la WEBRTC dépassent les applications Flash.

Les utilisateurs du réseau européen ont été divisés en deux parties: Selon une enquête de l'Institut d'analyse publique de l'opinion publique à Allenbach (Allemagne), Skype, Chat et Systems Memory Systems sont devenus une partie intégrante de la vie quotidienne de 16,5 millions d'adultes et d'enfants, 9 Des millions d'utilisent ces services à partir de cas d'occasion et 28 millions n'ont pas été touchés.

La situation peut changer, car maintenant dans Firefox intégré technologie de communication en temps réel (Webrtc.), ainsi que le client lui-même. Démarrez le chat audio et vidéo maintenant plus difficile que d'ouvrir le site. Des services tels que Facebook et Skype parient sur des solutions à l'aide d'un client séparé et créant un compte.

WEBRTC diffère non seulement par la simplicité. Cette méthode vous permet même d'installer connexion directe entre deux navigateurs. Ainsi, les données audio et vidéo ne transmettent pas le serveur où la surcharge peut se produire ou dont l'administrateur n'est pas particulièrement scrupuleux par rapport au secteur privé ou à la protection des données. Grâce à la connexion directe pour WEBRTC, ni enregistrement ni compte dans aucun service n'est nécessaire.

Pour démarrer la conversation, vous n'avez besoin que de passer par le lien. La communication reste privéePuisque le flux de données est crypté. Communication En temps réel à travers le navigateur, Google a commencé à s'engager activement en 2011, lorsque et publié le code source de son implémentation de la WEBRTC.

Peu de temps après, Chrome et Firefox ont reçu leurs propres moteurs WEBRTC. Actuellement, leurs options mobiles sont équipées de cette technologie et installées avec Android 5.0 par le moteur WebView 3.6, qui est utilisée par les applications.

Pour les communications en temps réel, les interfaces JavaScript appropriées doivent être implémentées dans la visionneuse Web. Avec l'aide de GetTusermedia, le logiciel active la capture des sources audio, issues d'une webcam et d'un microphone. RTCPEerconnection est responsable de l'établissement d'une connexion, ainsi que de la communication elle-même.

Parallèlement à l'intégration dans le navigateur, le groupe de travail du World Wide Web Consortium (W3C) a forcé le processus de normalisation de la WEBRTC. Il doit être achevé en 2015.

Webrtc est satisfait de petit

Pour utiliser le service WEBRTC, de nombreuses ressources ne sont pas nécessaires, car le serveur connecte uniquement des interlocuteurs. L'installation du composé ne représente pas non plus une complexité particulière. Premièrement, le navigateur sert le signal WEBRTC au signal qu'il prévoit de lancer un appel. Sur le serveur, il reçoit un lien HTTPS - la connexion est effectuée sous une forme cryptée. Cet utilisateur de lien envoie son interlocuteur. Après cela, le navigateur demande à l'utilisateur d'accéder à la webcam et au microphone.

Pour définir le streaming direct avec l'interlocuteur, le navigateur reçoit ses données d'adresse IP et de configuration du service WEBRTC. Le visualiseur Web de l'interlocuteur entre de la même manière.

Pour diffuser la fonction de connexion sans échec et de bonne qualité, trois moteurs fonctionnent dans le navigateur. Deux d'entre eux optimisent et compressent des données vidéo audio, le troisième est responsable de leur transport. Il transfère les données à travers protocole SRTP (Protocole de transport en temps réel sécurisé), ce qui vous permet d'effectuer des streaming cryptés en temps réel.

Si la connexion directe ne peut pas être installée, WEBRTC recherche un autre chemin. Par exemple, cela se produit lorsque les paramètres réseau empêchent le serveur étonnant de fournir une adresse IP. La norme de la WEBRTC prévoit que, dans ce cas, la conversation aura lieu, mais avec le tournant intermédiaire sur le serveur TURN (trershasal à l'aide de relais autour de NAT). Donc, sur le site Web NetScan.co, vous pouvez vérifier si la WEBRTC est implémentée sur votre ordinateur et avec votre accès réseau.

Comment se connecter

Vous devez d'abord enregistrer une conversation (1). WEBRTC Service donne un lien à envoyer à l'interlocuteur. Le navigateur utilisant le Stunner découvre sa propre adresse IP (2), l'envoie au service et reçoit un partenaire IP pour installer le composé direct (3). Si vous ne pouvez pas utiliser l'étourdissement, la conversation est redirigée à l'aide du serveur de serrage (4).

La communication sur la technologie WEBRTC dans le navigateur est lancée à l'aide du code JavaScript. Après cela, trois moteurs sont responsables de la communication: les lecteurs de la voix et des vidéos collectent des données multimédia à partir d'une webcam et d'un microphone, et le moteur de transport allie des informations et transfère le flux de formulaire crypté à l'aide du protocole SRTP (protocole en temps réel sécurisé).

Quels navigateurs travaillent avec webrtc

Chrome et Firefox sont équipés d'un moteur WEBRTC qui utilise de tels services comme Talky.IO. Mozilla Navigateur peut travailler directement avec son propre client.

Google et Mozilla continuent de développer une idée de communication en temps réel: Chrome peut organiser une conférence WEBRTC avec plusieurs participants et le nouveau client Hello de Firefox est conçu avec la filiale du géant Telefonica Télécommunication. Apple est encore resté de côté, dans Safari Webrtc à ne pas encore attendre. Cependant, il existe de nombreuses applications alternatives pour iOS et plug-ins pour safari.

Microsoft est quelque peu différent. En tant que propriétaire du service compétitif Skype, cette entreprise ne sera pas si facile à capituler avant WEBRTC. Au lieu de cela, Microsoft développe une technologie appelée ORTC (Object Real-Time Communications) pour Internet Explorer.

De telles différences de WEBRTC, comme d'autres codecs et protocoles d'établissement de contacts avec le serveur, sont insignifiantes et au fil du temps, suscitant probablement une addition à la norme WEBRTC, qui comprendra ces divergences. Ainsi, à la mer seulement, la pomme reste - comme d'habitude.

Photo:fabricants; Goodluz / fotolia.com.

Pendant de nombreuses années pour les appels de navigateur pendant de nombreuses années: Java, ActiveX, Adobe Flash ... Au cours des dernières années, il est devenu évident que les plugins et les machines virtuelles laissées ne brillent pas de commodité (pourquoi devrais-je installer quelque chose?) Et, Plus important encore, la sécurité. Que faire? Il y a une sortie!

Jusqu'à récemment, plusieurs protocoles de téléphonie IP ou de vidéo ont été utilisés dans les réseaux IP: SIP, le protocole le plus courant provenant du H.323 et du MGCP, de la scène Jabber / Jingle (utilisée dans GTALK), semi-ouvert Adobe RTMP * et, de Cours, Skype fermé. Le projet WEBRTC, initié par Google, essaie de transformer l'état des choses dans le monde et la téléphonie Web, en faisant des téléphones logiciels inutiles, y compris Skype. WEBRTC ne met pas simplement à mettre en œuvre toutes les capacités de communication directement à l'intérieur du navigateur installées maintenant sur chaque appareil, mais essayant de résoudre simultanément la tâche plus générale des communications entre les utilisateurs de navigateurs (échange de diverses données, écrans, collaboration avec des documents et bien plus encore).

WEBRTC WEB Developer

Du point de vue du développeur Web de la WEBRTC se compose de deux parties principales:

  • gestion des portions de média à partir de ressources locales (caméra, microphone ou écran d'ordinateur local) est mise en œuvre par la méthode Navigator.GetTretermedia qui renvoie l'objet MediaStream;
  • communication entre pairs entre les périphériques générant du trafic multimédia, y compris la définition des méthodes de communication et les transmettre directement - des objets RTCPeercronnez (pour envoyer et recevoir des flux audio et vidéo) et RTCDatachAnnel (pour l'envoi et la réception de données du navigateur).

Qu'est-ce qu'on fait?

Nous traiterons comment organiser la discussion vidéo multijoueur la plus simple entre les navigateurs WEBRTC à l'aide de sockets Web. L'expérience commencera à Chrome / Chrome, comme le plus avancé en termes de navigateurs WEBRTC, bien que libérés le 24 juin, Firefox 22 les a presque attrapés. Il faut dire que la norme n'a pas encore été acceptée et de la version à la version API, elle peut changer. Tous les exemples ont été contrôlés dans le chrome 28. Pour la simplicité, nous ne suivrons pas la propreté du code et du navigateur croisé.

Mediamstream

Le premier et simple composant de WEBRTC - Mediamstream. Il fournit un accès au navigateur à la circulation multimédia à partir de la caméra et du microphone d'ordinateur local. En Chrome, il est nécessaire d'appeler la fonction navigator.webkittTretermedia () (puisque la norme n'est pas encore terminée, toutes les fonctions vont avec le préfixe et, dans Firefox, la même fonction est appelée Navigator.mozgeTrassermedia ()). Lorsqu'il l'appelle, l'utilisateur sera affiché une demande d'accès à la caméra et à la microphone. Vous pouvez continuer l'appel uniquement après que l'utilisateur donne son consentement. Les paramètres de cette fonction transmettent les paramètres du commutateur de support requis et deux fonctions de rappel: le premier sera provoqué dans le cas d'un accès réussi à la caméra / microphone, le second - en cas d'erreur. Pour commencer, créez un fichier HTML RTCTEST1.HTML avec un bouton et un élément

WEBRTC - Première connaissance

Microsoft Cu-RTC-web

Microsoft ne serait pas Microsoft si en réponse à l'initiative Google n'a pas publié immédiatement sa propre option non standard incompatible appelée le CU-RTC-Web (html5labs.interopérabilitybridges.com/cu-rtc-wareb/cu-rtc-web.htm ). Bien que la part d'IE, et si petite, continue de se contracter, le nombre d'utilisateurs de Skype donne à Microsoft espoir d'appuyer sur Google et on peut supposer que cette norme particulière sera utilisée dans la version du navigateur de Skype. La norme Google est principalement orientée sur les communications entre les navigateurs; Dans le même temps, la partie principale du trafic vocal reste toujours dans le réseau téléphonique habituel et les passerelles entre les réseaux IT et IP sont nécessaires non seulement pour la facilité d'utilisation ou une distribution plus rapide, mais aussi comme moyen de monétisation, ce qui sera permettre à un grand nombre de joueurs de les développer. L'émergence d'une autre norme peut non seulement conduire à une nécessité désagréable de soutenir deux technologies incompatibles à la fois, mais à l'avenir, de donner à l'utilisateur une sélection plus large de fonctionnalités possibles et de solutions techniques abordables. Attend et regarde.

Allumer le flux local

Tags à l'intérieur Notre fichier HTML déclarera la variable globale pour le commutateur multimédia:

Varocalstream \u003d null;

Le premier paramètre de la méthode gettasermedia doit spécifier les paramètres du commutateur multimédia demandé - par exemple, il suffit d'inclure l'audio ou la vidéo:

Var streamconstraints \u003d ("audio": vrai, "vidéo": vrai); // demande accès et audio, et vidéo

Soit spécifier des paramètres supplémentaires:

Var streamconstraints \u003d ("audio": vrai, "vidéo": ("obligatoire": ("maxwidth": "320", "maxheight": "240", "maxframerate": "5"), "Facultatif" :) );

Le deuxième paramètre de la méthode GetTusermedia doit être transféré sur une fonction de rappel, qui sera causé s'il est exécuté avec succès:

Fonction getusermedia_success ("getTermedia_suxcess ():", flux); localvideo1.src \u003d url.createobjecturl (flux); // Connectez le support multimédia à l'élément HTML

Le troisième paramètre - gestionnaire d'erreur de fonction de rappel qui sera appelé en cas d'erreur

Fonction getusermedia_error (erreur) (console.log ("getTraseMedia_error ():", erreur);););););

Appelant en fait la méthode GetTusermedia - Demande d'accès au microphone et à la caméra lorsque vous cliquez sur le premier bouton.

Fonction getusermedia_click () (console.log ("getusermedia_click ()"); navigateur.webkittTretermedia (streamconstraints, gettasermedia_success, gettasermedia_error););

Accédez au fichier multimédia à partir du fichier ouvert localement, il est impossible. Si vous essayez de le faire, faites une erreur:

NAVIGATORUSERMEAREROR (CODE: 1, Permission_Dentié: 1) "

Nous publions le fichier résultant sur le serveur, ouvert dans le navigateur et en réponse à la demande apparue en permettant l'accès à la caméra et au microphone.

Sélectionnez les périphériques à laquelle Chrome recevra, vous pouvez les paramètres ("Paramètres"), afficher les paramètres avancés ("Afficher les paramètres avancés"), section Confidentialité ("Données personnelles"), Bouton de contenu ("Paramètres de contenu"). Dans les navigateurs Firefox et Opera, la sélection des périphériques est effectuée dans la liste déroulante directement lorsque l'accès est résolu.

Lors de l'utilisation du protocole HTTP, l'autorisation sera demandée chaque fois que vous recevrez l'accès au voyage multimédia après le chargement de la page. La transition vers HTTPS vous permettra d'afficher une requête une fois, uniquement avec le premier accès au commutateur multimédia.

Faites attention au cercle pulsant dans l'icône sur la languette et de l'icône de la caméra située à droite de la barre d'adresses:

Rtcmediaconnection.

RTCMediaconnection est un objet conçu pour établir et transmettre des supports sur des réseaux entre les participants. De plus, cet objet est responsable de la formation d'une description de la médiassia (SDP), d'obtenir des informations sur les candidats à la glace pour passer via des écrans NAT ou réseau (local et en utilisant étonnant) et interagir avec le serveur TURN. Chaque participant doit avoir une RTCMediaconnection pour chaque connexion. Les tirs de médias sont transmis via le protocole SRTP crypté.

Serveurs de virages

Les candidats à glace sont trois types: hôte, srsflx et relais. L'hôte contient des informations obtenues localement, SRFLX - Comment le nœud recherche un serveur externe (étourdissement) et des informations relatives pour le trafic proxant via le serveur TURN. Si notre nœud est derrière NAT, les candidats hôtes contiendront des adresses locales et seront inutiles, SRFLX candidats aidera uniquement avec certains types de NAT et de relais seront le dernier espoir de sauter le trafic via le serveur intermédiaire.

Exemple de glace candidat du type d'hôte, avec l'adresse 192.168.1.37 et le port UDP / 34022:

A \u003d candidat: 337499441 2 UDP 2113937151 192.168.1.37 34022 TYPE Génération hôte 0

Format général pour définir des serveurs étourdissants / tours:

Serveurs Var \u003d ("IXERVERS": [("URL": "Stun: Stun.StunProtocol.org: 3478"), ("URL": "Tourner:" [Email protégé]: port "," Critique ":" mot de passe ")]);

Serveurs d'étourdissement public sur Internet beaucoup. Une grande liste, par exemple, est. Malheureusement, ils résolvent trop de problèmes. Les serveurs de virages publics, contrairement à l'étourdissement, sont pratiquement non. Cela est dû au fait que le serveur TURN passe à travers elle-même des tirs multimédia pouvant être téléchargés de manière significative et le canal réseau et le serveur lui-même. Par conséquent, le moyen le plus simple de se connecter aux serveurs de tourisme est de la définir vous-même (il est clair que l'IP publique sera nécessaire). De tous les serveurs, à mon avis, le meilleur serveur RFC5766-TURN. Sous, il y a même une image prête pour Amazon EC2.

Avec le tour jusqu'à ce que tout soit si bon que je voudrais, mais il y a un développement actif, et je tiens à espérer, après un certain temps Webrtc, s'il ne se compare pas à Skype sur la qualité de la transmission de la diffusion des adresses (NAT) et des écrans de réseau, puis une approche au moins notable.

Pour RTCMediacNection, un mécanisme supplémentaire pour l'échange d'informations de contrôle est nécessaire pour établir une connexion - bien qu'elle forme ces données, mais ne les transmet pas, et le transfert à d'autres participants doit être mis en œuvre séparément.


Le choix d'une méthode de transmission est attribué au développeur - bien que manuellement. Dès que l'échange de données nécessaires aura lieu, RTCmediaconnection établira automatiquement des performances de média (s'il s'avère bien sûr).

Offre-Réponse Modèle

Pour établir et modifier des vues de médias, le modèle d'offre / réponses est utilisé. Décrit dans la RFC3264) et le protocole SDP (protocole de la description de la session). Ils sont utilisés et le protocole SIP. Ce modèle distingue deux agents: Offreer - Celui qui génère une description du SDP de la session afin de créer une nouvelle ou modification de la (offre SDP) existante (Offre SDP), et le répondeur est celui qui reçoit une description du SDP de la session d'un autre agent et la rencontre sa propre description de la session (réponse SDP). Dans le même temps, la spécification nécessite un protocole de niveau supérieur (par exemple, SIP ou ses propres sockets Web, comme dans notre cas) responsable de la transmission du SDP entre les agents.

Quelles données doivent être transférées entre deux RTCMediacNection de manière à pouvoir installer avec succès le trafic des médias:

  • Le premier participant initiant la connexion génère une offre dans laquelle il transmet la structure de données SDP (le même protocole au même but est utilisé dans SIP), qui décrit les caractéristiques possibles du commutateur de support, ce qui va commencer à transmettre. Ce bloc de données doit être transféré au deuxième participant. La deuxième réponse des participants répond à son SDP et la transmet au premier.
  • Et les premier et second participants effectuent la procédure de détermination des candidats à la glace possibles, avec l'aide de laquelle le second participant sera en mesure de leur transférer. Comme les candidats sont définis, des informations sur eux doivent être transmises à un autre participant.

Offre de formation.

Pour la formation d'offre, nous aurons besoin de deux fonctions. Le premier sera appelé dans le cas de sa formation réussie. Le deuxième paramètre de la méthode CreateOffer () est une fonction de rappel appelée si une erreur se produit (à condition que le flux local soit déjà disponible).

Vous aurez également besoin de deux gestionnaires d'événements: Onicecandidate Lors de la détermination du nouveau candidat à la glace et de l'Onadstream lors de la connexion du commutateur de média de l'autre côté. Revenons à notre dossier. Ajouter à HTML après des lignes avec des éléments

Et après une chaîne avec un élément


De plus, au début du code JavaScript déclarera la variable globale de RTCPEerconnection:

Var pc1;

Lorsque vous appelez le concepteur RTCPEerconnection, vous devez spécifier des serveurs Stun / Turn. En savoir plus sur eux, voir l'insert; Bien que tous les participants soient sur le même réseau, ils ne sont pas nécessaires.

Serveurs Var \u003d NULL;

Options pour la préparation de l'offre SDP

Var OffRetsRoints \u003d ();

Le premier paramètre de la méthode CreateOffer () est une fonction de rappel appelée lors du succès

Fonction PC1_CreateOffer_Success ("PC1_CreateOffer_Success (): \\ ndesc.sdp: \\ n" + desc.sdp + "desc:", descend); pc1.setlocaldescription (Desc); // Définit la RTCPeerconnection, formée par Offre SDP à l'aide de la méthode SetLocalDescription . // Lorsque le côté long-rond est envoyé à son SDP de réponse, il devra être défini par SetRemoteDescription // jusqu'à ce que le second côté ne soit pas implémenté, ne rien faire // 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 (erreur) (console.log ("PC1_CreateOffer_Success_error (): Erreur:", erreur);););

Et déclarer une fonction de rappel que les candidats à la glace seront transmis comme ils sont déterminés:

Fonction pc1_onicecandidate (événement) (console.log ("PC1_onicecandidate (): \\ n" + event.candidate.candidate.replace ("\\ r \\ n", ""), event.candidate); // tandis que le second côté est Non implémenté, ne rien faire // pc2.addicecandidate (nouveau rtcicecandidate (événement.candidate);))

Ainsi qu'une fonction de rappel pour ajouter un interrupteur de média de l'autre côté (pour l'avenir, car pendant que nous n'avons qu'une seule RTCPeerconnection):

Fonction pc1_onaddstream (console.log ("pc_onaddstream ()"); remotevideo1.src \u003d url.createobjecturl (event.stream);)

Lorsque vous cliquez sur le bouton Cateferoffer, vous créerez des méthodes d'onicecandidate et des méthodes OnAnStream et demandez la formation d'une offre SDP en appelant la méthode Catefer ():

Fonction CreateOffer_Cliquez sur () (ConsoleOffer_Clog () "); PC1 \u003d nouvelle webkitrtcpeercection (serveurs); // Créer RTCPEerconnection pc1.onicecandidate \u003d pc1_onicecandidate \u003d pc1_onicecandidate \u003d pc1_onicecandidate (// // fonction de rappel causé par l'apparition d'un commutateur de support de l'autre côté. Jusqu'ici, il n'a pas de pc1.Addstream (LocalStream); // Donnons des portions de média locales (nous supposons qu'il est déjà reçu) PC1.CreateOffer (// et demande réellement la formation d'une offre PC1_CreateOffer_Success, PC1_CreateOffer_Error, OffReToutes);)

Enregistrez le fichier comme RTCTEST2.HTML, postez-le sur le serveur, ouvrez-le dans le navigateur et examinez la console, quelles données sont formées au cours de son travail. La deuxième vidéo n'apparaîtra pas encore, car le participant n'est qu'un. Rappel de rappel, SDP - une description des paramètres de la médiresse, des codecs disponibles, des performances des médias et des candidats à la glace sont des options possibles pour se connecter à ce participant.

Former la réponse SDP et les candidats à la glace

Et l'offre SDP, et chacun des candidats à la glace doit être transféré de l'autre côté et là après avoir reçu la RTCPeerconnection pour appeler les méthodes SetRemoteDescription pour offrir SDP et addicecandidate pour chaque candidat de glace dérivé de l'autre côté. De même, dans la direction opposée pour répondre aux candidats SDP et de glace distants. Réponse SDP elle-même est formée de la même manière à offrir; La différence est que la méthode Createoffer est appelée, mais la méthode CreeenaNswer et avant que cette méthode RTcPeercronnection soit transmise par l'offre SETREMoteDescription SDP reçue de l'appelant.

Ajouter un autre élément vidéo dans HTML:

Et la variable globale pour la deuxième RTCPeerclection sous l'annonce de la première:

Var pc2;

Offre de traitement et réponse SDP

Réponse La formation SDP est très similaire à l'offre. Dans la fonction de rappel causée par la formation réussie de réponse, similaire à l'offre, donnez une description locale et donnez au premier participant reçu par le SDP de réponse:

Fonction PC2_CreateAnswer_successrip (desc); console.log ("PC2_Createanswer_success ()", desc.sdp); PC1.SetremotedSimtion (Desc););

La fonction de rappel appelée en cas d'erreur dans la formation de réponse est complètement similaire à celle de l'offre:

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

Réponse Options de formation SDP:

Var feedercressionRoints \u003d ("obligatoire": ("Offertoreceveidio": True, "OffertoreVideo": True));

Dès réception de l'offre, nous allons créer RTCPEerconnection et former une réponse de la même manière à offrir:

Fonction PC2_ReceiveDoffer (DESC) (Consoleofer (), Desc); // Créer un objet RTCPeercronnez pour le deuxième participant de la même manière que le premier PC2 \u003d nouvelle webkitrtcpeercection (serveurs); pc2.onicecandidate \u003d pc2_onicecandidate; // Définir le gestionnaire d'événements Lorsque l'événement semble candidat à glace pc2.onaddstream \u003d pc_onaddstream; // Lorsqu'un flux apparaît pour le connecter à HTML

Pour dans notre exemple, transmettez l'offre SDP du premier participant à la seconde, nous vous désabonnant dans la fonction PC1 createoFer.sUCCESS () String d'appel:

Pc2_receivefer (Desc);

Pour mettre en œuvre le traitement des candidats à glace, nous inconsponsons les événements de la volonté des candidats à la glace du premier participant PC1_onicecandidate () à son transfert à la seconde:

Pc2.addicecandidate (nouveau rtceccecandidate (événement.candidate));

Le gestionnaire d'événements de la préparation des candidats de la Seconde participante est en train de ressembler à un miroir:

Fonction pc2_icecandidate (événement) (console.log ("pc2_icecandidate ():", événement.candidate.candidate); pc1.addicecandidate (nouveau rtcicecandidate (événement.candidate));));

Fonction de rappel pour ajouter un interrupteur multimédia du premier participant:

Fonction pc2_onaddstream (console.log ("PC_ONADDSTREAM ()"); RemoteVideo2.src \u003d url.createObjecturl (event.stream);)

Achèvement de la connexion

Ajouter un autre bouton à HTML

Et fonction pour compléter la connexion

Fonction BTNHANGUPCLICK () (// Éteignez la vidéo locale des éléments HTML

Enregistrer comme RTCTEST3.HTML, posez sur le serveur et ouvrez-le dans le navigateur. Cet exemple implémente un transfert bilatéral de performances de média entre deux RTCPeerconnection dans un signet de navigateur. Pour organiser l'échange d'offres et répondre à SDP via le réseau, les candidats de la glace entre les participants et d'autres informations seront nécessaires au lieu d'une procédure de défi directe pour mettre en œuvre des échanges entre les participants à tout transport, dans nos prises de codes - Web.

Écran de diffusion

Fonctionnalité GetTusermedia Vous pouvez également capturer l'écran et diffuser comme MediaStream, en spécifiant les paramètres suivants:

Var MediaStreamconstraints \u003d (audio: false, vidéo: (obligatoire: (chromemediasource: "écran"), facultatif :));

Pour accéder à l'écran avec succès, plusieurs conditions doivent être effectuées:

  • activez le drapeau de la capture d'écran dans GetTusermedia () en chrome: // drapeaux /, chrome: // drapeaux /;
  • le fichier source doit être téléchargé par HTTPS (SSL Origin);
  • le flux audio ne doit pas être demandé;
  • il ne devrait pas y avoir plusieurs demandes dans un seul onglet Navigateur.

Bibliothèques pour WEBRTC.

Bien que la WEBRTC ne soit pas non plus terminée, il existe déjà plusieurs bibliothèques basées sur elle. JSSIP est conçu pour créer un navigateur SPLAS SPLAS fonctionnant avec des interrupteurs SIP, tels que Asterisk et Camalio. Peerjs simplifiera la création de réseaux P2P pour l'échange de données et la HOLLA réduira la portée du développement requis pour la communication P2P des navigateurs.

Nœud.js et socket.io.

Afin d'organiser l'échange de candidats SDP et de glace entre les deux RTCPeerconnection via le réseau, utilisez Node.js avec le module Socket.io.

Installation de la dernière version stable de Node.js (pour Debian / Ubuntu) décrite

$ sudo apt-get Installez python-logiciels-properties Python g ++ Make $ SUDO add-APT-Repository PPA: chris-lea / nœud.js $ sudo apt-get update $ sudo apt-get installer nodejs

L'installation pour d'autres systèmes d'exploitation est décrite

Vérifier:

$ Echo "sys \u003d nécessite" sys.s.uts ("message de test"); " \u003e NODETEST1.JS $ NODEJS NODETESTEST1.JS

Utilisation de NPM (gestionnaire de packages de nœud), installez Socket.IO et un module Express supplémentaire:

$ NPM Installation socket.io Express

Vérifiez en créant un fichier NODEST2.JS pour une partie du serveur:

$ Nano nodetest2.js var app \u003d exiger ("express") (), serveur \u003d nécessite ("http"). CreeEeserver (app), io \u003d nécessite ("Socket.io"). Écouter (serveur); Serveur.listen (80); // si le port 80 est libre d'app.get ("/", fonction (req, res) (// lors de l'accès à la page racine de res.SendFile (__ dirname + "/nodeTest2.html"); // abandonne un Fichier html)); io.sockets.on ("Connexion", fonction (socket) (// lors de la connexion de socket.emit ("Evénement de serveur", (Hello: "World")); // Envoyer le message Socket.on ("Evénement client" , Fonction (données) (// et déclarer un gestionnaire d'événements à la réception d'un message de la console client.log (données);)););));

Et NOETESTEST2.HTML pour la partie client:

$ nano nodetest2.html

Démarrez le serveur:

$ sudo nodejs nodeest2.js

et ouvrez le HTTP: // localhost: 80 page (Si elle fonctionne localement sur le 80e port) dans le navigateur. Si tout est réussi, dans la console JavaScript du navigateur, nous verrons l'échange d'événements entre le navigateur et le serveur lorsqu'il est connecté.

Échange d'informations entre RTCPeerconnection via des sockets Web

Partie client

Enregistrez notre exemple principal (RTCDEMO3.HTML) sous le nouveau nom RTCDEMO4.HTML. Connectez la bibliothèque de socket.io dans l'élément:

Et au début de la script JavaScript - Connectez-vous aux sockets Web:

Var socket \u003d io.connect ("http: // localhost");

Je remplacerai l'appel direct des fonctions d'un autre participant à l'envoyer via des sockets Web:

Fonction CreateOffer_Success (Desc) (Desc); Socket.emit ("Offre", Desc); ...) Fonction PC2_CreateAnswer_success (Desc) (... // PC1.SeRemoteDeription (Desc); Socket .emit ("Réponse", DESC);) Fonction PC1_onicecacAdidate (événement) (... // pc2.addicecandidate (nouveau rtceccecandidate (événement.candidate); socket.emit ("ice1", événement.candidate); ..) Fonction PC2_onicecandidate (événement) ( ... // pc1.addicecandidate (nouveau rtcicecandidate (événement.candidate); socket.emit ("ICE2", événement.candidate); ...); ...)

Dans la fonction Hangup (), au lieu d'un appel direct pour les fonctions du deuxième participant, donnons un message via des sockets Web:

Fonction BTNHANGUPCLICK () (... // REMOTEVIDEO2.SRC \u003d ""; PC2.Close (); PC2 \u003d null; socket.emit ("Hangup" ());)

Et ajouter des gestionnaires de reçu de message:

Socket.on ("offre", fonction (données) ("socket.on (" offre "):", données); pc2_receiveffer (données);)); Socket.on ("réponse", fonction (données) (console.log ("socket.on": ", données); pc1.setRemotedescription (données);)); Socket.on ("glace1", fonction ("socket.on" ("glace1"): ", données); pc2.addicecandidate (nouveau rtcicecandidate (données));)); Socket.on ("glace2", fonction ("socket.on" ("ice2"): ", données); pc1.addicecandidate (nouveau rtcicecandidate (données));)); Socket.on ("gangup", fonction ("console.log" ("socket.on (" gangup "):", données); remotevideo2.src \u003d ""; pc2.close (); PC2 \u003d NULL;)) ;

Partie serveur

Sur le côté du serveur, enregistrez le fichier NODEST2 sous le nouveau nom RTCEST4.JS et à l'intérieur de la fonction io.sockets.on ("Connexion", fonction (...) Ajouter une réception et envoi de messages clients:

Socket.on ("offre", fonction (données) (// à la réception du message "OFFRE", // Depuis la connexion client dans cet exemple n'est qu'un, // Envoyer un message à travers la même prise de socket.emit ("Offre", données); // s'il était nécessaire d'envoyer un message sur toutes les connexions, // en plus de l'expéditeur: // soket.broadcast.emit ("offre", données);); socket.on ("réponse", fonction (données) (socket.emit ("réponse", données);)); socket.on ("glace1", fonction (données) (socket.emit ("ICE1", données);)); socket.on ("glace2", fonction (données) (socket.emit ("ice2", données);)); socket.on ("gangup", fonction (données) (socket.emit ("Hangup", données);));

De plus, vous modifierez le nom du fichier HTML:

// res.Sendfile (__ dirname + "/nodeTest2.html"); // donne le fichier html res.SendFile (__ dirname + "/rrtctst4.html");

Server de départ:

$ sudo nodejs nodeest2.js

Malgré le fait que le code des deux clients est effectué dans le même signet du navigateur, toute l'interaction entre les participants de notre exemple est entièrement réalisée via le réseau et «diffuser» les participants ne nécessitent plus de difficultés particulières. Cependant, ce que nous avons fait était également très simple - ces technologies et sont bonnes pour leur simplicité d'utilisation. Laisser parfois trompeur. En particulier, nous n'oublierons pas que, sans serveurs d'étourdissement / tour, notre exemple ne sera pas en mesure de travailler en présence de traductions et d'écrans de réseau.

Conclusion

L'exemple résultant est très conditionnel, mais si vous avez un peu de gestionnaires d'événements universalisés de manière à ne pas différer de l'appelant et appelé Party, au lieu de deux objets PC1 et PC2 pour rendre le tableau RTCPEerconnection et mettre en œuvre la création et l'enlèvement dynamiques des éléments.

On peut supposer qu'il est très bientôt grâce à la WEBRTC, il y aura un coup d'État non seulement dans notre soumission de liens vocaux et vidéo, mais également dans la façon dont nous percevons Internet dans son ensemble. WEBRTC est positionné non seulement en tant que technologie pour les appels du navigateur au navigateur, mais également en tant que technologie de communication en temps réel. Appel vidéo, que nous avons démonté, seule une petite partie des options possibles à utiliser. Déjà, il existe des exemples de diffusion d'écran (écran d'accumulation) et de collaboration, et même le réseau P2P de la livraison de contenu basé sur des navigateurs utilisant RTCDatachannel.