Aujourd'hui, WEBRTC est une technologie chaude pour la diffusion audio et vidéo dans les navigateurs. Les technologies conservatrices, telles que le streaming et le flash HTTP, sont plus appropriées pour la distribution de contenu enregistré (vidéo sur demande) et significativement inférieur à la WEBRTC en termes de diffusion en temps réel et en ligne, c'est-à-dire Lorsque le délai de vidéo minimum est requis, permettant au public de voir ce qui se passe "en direct".

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

Le délai de communication est important dans les systèmes de radiodiffusion en ligne, les webinaires et autres applications dans lesquels une communication interactive avec la source de vidéo, des utilisateurs finaux est requise et nécessite une solution.

Une autre raison importante pour essayer WEBRTC est définitivement une tendance. Aujourd'hui, chaque navigateur Android Chrome prend en charge cette technologie, qui garantit des millions d'appareils prêts à visualiser la diffusion sans installer de logiciels et de configurations supplémentaires.

Afin de vérifier la technologie WEBRTC dans le boîtier et exécutez une simple diffusion en ligne, nous avons utilisé le serveur sur Flashphoner WebrtC Media & Broadcasting Server. Dans les caractéristiques, la possibilité de diffuser des flux WEBRTC en un mode à plusieurs modes "(une à maany), ainsi que la prise en charge des caméras IP et des systèmes de vidéosurveillance via le protocole du RTSP; Dans cet examen, nous nous concentrons sur les émissions Web Web et leurs fonctionnalités.

Installation de WEBRTC Media & Broadcasting Server

Étant donné que le système de version du serveur n'a pas été destiné à Windows, il ne souhaitait pas installer de type virtuel VMware + Linux, tester des émissions en ligne sur l'ordinateur Home Windows n'a pas fonctionné. Afin de gagner du temps décidé de prendre des instances sur un hébergement nuagé comme celui-ci:

C'était CENTOS X86_64 version 6.5 sans aucun logiciel pré-installé dans le centre de données d'Amsterdam. Ainsi, tout ce que nous avons reçu est disponible est le serveur et l'accès SSH à celui-ci. Pour ceux qui connaissent les commandes de la console Linux, l'installation du serveur WEBRTC promet d'aller facilement et sans douleur. Alors, qu'est-ce que nous avons fait:

1. Télécharger Archive:

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

2. Déballer

$ taud -xzf télécharger-wcs5-server.tar.gz

3. Installer:

$ CD flashphonerwebcallServer.

Lors de l'installation de la saisie de l'adresse IP du serveur: xxx.xxx.xxx.xxx

4. Activez la licence:

CD / USR / USR / local / FlashphonerWebCallServer / bin

$. / Activation.sh

5. Exécutez WCS Server:

$ Service webcallServer start

6. Vérifiez le journal:

$ queue - f /usr/local/flashphonerwebcallServer/logs/flashphoner_manager.log

7. Vérifiez que deux processus en place:

$ PS AUX | Grep flashphoner.

Le processus d'installation est terminé.

Tester des émissions de WEBRTC en ligne

Les émissions de test avaient été non accomplis. En plus du serveur, il existe un client Web composé d'une douzaine de fichiers JavaScript, HTML et CSS et a été déployé sur le dossier / var / www / html à la phase d'installation. La seule chose à faire est d'entrer l'adresse IP du serveur pour configurer FlashPhoner.xml de sorte que le client Web puisse se connecter au serveur HTML5 WebSockets. Nous décrivons le processus de test.

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

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

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

3. L'interface est une diffusion réussie du flux vidéo de l'appareil photo sur le serveur WEBRTC. Dans le coin supérieur droit, l'indicateur indique que le flux va sur le serveur, dans le coin inférieur, le bouton d'arrêt pour arrêter d'envoyer une vidéo.

Faites attention au lien dans le champ inférieur. Il contient l'identifiant unique de ce fil, de sorte que tout le monde puisse rejoindre la visualisation. Il suffit d'ouvrir ce lien dans le navigateur. Pour le copier dans le Presse-papiers, vous devez cliquer sur le bouton "Copier".

Dans de vraies applications, telles que des webinaires, des conférences, des émissions en ligne ou des développeurs de télévision interactifs devront mettre en œuvre la distribution de cet identifiant à certains groupes de téléspectateurs afin qu'ils se connectent aux flux souhaités, mais c'est la logique de l'application. WEBRTC Media & Broadcasting Server cela n'affecte pas, mais seulement la distribution de la vidéo.

5. La connexion est établie et le spectateur voit le flux sur l'écran. Maintenant, il peut envoyer un lien à quelqu'un d'autre, arrêtez de reproduire le flux ou d'allumer le mode plein écran en utilisant des commandes dans le coin inférieur droit.

Résultats du test WEBRTC Server de traduction en ligne

Pendant les tests, le retard était parfait. Ping au centre de données s'élevait à environ 100 millisecondes et le retard n'a pas été distingué par l'œil. À partir de là, on peut supposer que le délai réel est le même de 100 plus plusieurs dizaines de millisecondes pour la mise en mémoire tampon. Si vous comparez avec Flash Video: Dans de tels tests, Flash ne se comporte pas aussi bien que BEBTC. Donc, si sur un réseau similaire pour déplacer votre main, le mouvement de l'écran ne peut être vu que par une / deux secondes.

En ce qui concerne la qualité, nous notons que sur les mouvements, vous pouvez parfois distinguer les cubes. Cela correspond à la nature du codec VP8 et de sa tâche principale - de fournir une connexion vidéo en temps réel avec une qualité acceptable et sans délai de communication.

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

La qualité de la diffusion s'est avérée tout à fait acceptable pour les webinaires et les émissions en ligne. La seule chose qui a provoqué certaines questions est la résolution vidéo. La caméra prend en charge 1280 × 800, mais la résolution sur la photo de test est très similaire à 640 × 480. Apparemment, cette question doit être clarifiée par les développeurs.

Test de vidéo diffusé de la caméra Web
via webrtc serveur

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.

WEBRTC est une API fournie par un navigateur et vous permet d'organiser la connexion P2P et le transfert de données directement entre les navigateurs. Sur Internet, il y a plusieurs manuels pour écrire votre propre chat vidéo à l'aide de WEBRTC. Par exemple, voici un article sur Habré. Cependant, tous sont limités à la connexion de deux clients. Dans cet article, je vais essayer de dire comment organiser la connexion et la messagerie entre trois et plus d'utilisateurs à l'aide de WEBRTC.

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

1. Lors de l'ouverture d'une page, vérifiez la présence de l'ID de la pièce dans lieu.Hash.
2. Si l'identifiant de la pièce n'est pas spécifié, nous générons un nouveau
3. Nous envoyons un serveur de signalisation "le message sur ce que nous voulons rejoindre la salle spécifiée
4. Signaling Server compose le reste des clients dans cette pièce une nouvelle alerte utilisateur
5. Les clients qui sont déjà à la chambre envoient une nouvelle offre SDP
6. Newbie répond pour offrir "s

0. Signaling Server

Comme vous le savez, au moins WEBRTC et fournit la possibilité de connexions P2P entre les navigateurs, elle nécessite toujours un moyen de transport supplémentaire pour échanger des messages de service. Dans cet exemple, le serveur WebSocket écrit sur Node.js à l'aide de Socket.IO agit comme un tel transport.

Var socket_io \u003d nécessite ("socket.io"); module.exports \u003d (serveur) (var utilisateurs \u003d (); var io \u003d socket_io (serveur); io.on ("raccordement", fonction (// désire d'un nouvel utilisateur rejoindre la socket.on salle (" Chambre ", fonction (message) (var json \u003d json.parse (message); // Ajouter une prise à la liste des utilisateurs utilisateurs \u003d Prise; Si (socket.room! \u003d\u003d Undefined) (// Si la prise est déjà dans une certaine pièce, sortez-en-t-il (socket.room);) // Entrez la prise de la pièce demandée.Rouse \u003d Json.room / Envoyer au reste des clients de cette pièce, un message sur rejoindre une nouvelle prise de membre.Broadcast.to (socket.room) .emit ("Nouveau", json.id);)); // Message lié à webrtc ( Offre SDP, réponse SDP ou candidat à glace) socket.on ("webrtc", fonction (message) (message); si (json.to! \u003d\u003d indéfini && utilisateurs! \u003d\u003d Undefined) (// Si le message est spécifié par Le destinataire et ce destinataire connu du serveur, envoyez un message seulement pour lui ... des utilisateurs.emit ("webrtc", message); ) Sinon (// ... sinon nous considérons le message en diffusant la socket.Broadcast.to (socket.room) .emit ("WEBRTC", message);)));)); // quelqu'un a déconnecté socket.on ("déconnecter", fonction () (// Lorsque vous déconnectez le client, nous en informons sur cette autre socket.Broadcast.to (socket.room) .emit ("laisser", socket.user_id); Supprimer les utilisateurs;)); )); );

1. index.html

Le code source de la page elle-même est assez simple. Je n'ai consciemment pas prêté attention à la mise en page et à une autre belle, car cet article n'est pas à ce sujet. Si quelqu'un veut, faites-le bien, ne fonctionnera pas beaucoup de difficulté.

2. Main.js.

2.0. Recevoir des liens vers des éléments de page et des interfaces WEBRTC

var chatlog \u003d document.getElementyID ("chatlog"); var message \u003d document.getelementyID ("message"); Var Connection_num \u003d Document.getElementByID ("Connection_num"); var room_link \u003d document.getelementByID ("room_link");

Nous devons toujours utiliser des préfixes de navigateur pour accéder aux interfaces WEBRTC.

Var peerconnection \u003d fenêtre.mozrtcpeercection || Fenêtre.webkitrtcpeercection; Var sessiondescription \u003d fenêtre.mozrtcsessionDescription || Window.rtcsessionDescription; var opecandidate \u003d fenêtre.mozrtcicecandidate || Window.rtcicecandidate;

2.1. Définition id de la pièce

Ici, nous aurons besoin d'une fonction pour générer un identifiant unique de la pièce et de l'utilisateur. Nous utiliserons UUID à ces fins.

Fonction uuid () (retour math.floor () (math.random () * 0x10000) .Tostring (16);); retour S4 () + S4 () + "-" + S4 () + "-" + S4 () + "-" + S4 () + "-" + S4 () + "-" + S4 () + "-" + S4 () + S4 () + S4 (););

Essayons maintenant de tirer l'identifiant de la pièce de l'adresse. Si tel n'est pas spécifié, nous allons générer une nouvelle. Apportons le lien vers la pièce actuelle à la page et, pour une, générera l'identifiant de l'utilisateur actuel.

Var Room \u003d Emplacement.Hash.Substr (1); Si (! Chambre) (chambre \u003d uuid ();) room_link.innerhtml \u003d "lien vers la pièce"; var moi \u003d uuid ();

2.2. Websocket.

Immédiatement lors de l'ouverture de la page, vous vous connectez à notre serveur de signalisation "Y, envoyez une demande d'entrée dans la salle et de spécifier les gestionnaires de messages.

// Nous spécifions que lorsque vous fermez le message, vous devez envoyer le serveur à la prise Var \u003d io.connect ("", ("Synchroniser la déconnexion sur le déchargement": true)); socket.on ("webrtc", sockétreceed); socket.on ("Nouveau", SocketNewPeer); // Envoie immédiatement une demande d'entrer dans la salle Socket.emit room ("salle", json.stringify ((id: moi, salle: chambre)); // Fonction auxiliaire Pour envoyer des messages d'adresse associés à la fonction WEBRTC SendVIASCocket (type, message, à) (socket.emit ("webrtc", json.stringify ((ID: ME, TO: to, Tapez: Type, Données: Message) )));)

2.3. Paramètres Peerconnection

La plupart des fournisseurs fournissent une connexion Internet via NAT. Pour cette raison, la connexion directe ne devient pas une affaire si triviale. Lors de la création d'une connexion, nous devons spécifier la liste des serveurs d'étourdissement et de tournant que le navigateur essaiera d'utiliser pour contourner NAT. Nous spécifions également une paire d'options supplémentaires pour la connexion.

Var Server \u003d (URL: [URL: "Stun: 23.21.150.121"), (URL: "Stun:" Stun.l.google.com: 19302 "), (URL:" Turn: numb.viagenie.ca ", Cidéologie : "Votre mot de passe va ici", nom d'utilisateur: " [Email protégé]")])] Options de var \u003d (facultatif: [(DTLSSRTPKeyGreement: true), // requis pour se connecter entre chrome et firefox (RTPDataChalnels: true) // requis dans Firefox à utiliser API de DataChaneLels])

2.4. Connecter un nouvel utilisateur

Lorsqu'un nouveau festin est ajouté à la pièce, le serveur nous envoie un message. nouveau. Selon les gestionnaires de messages spécifiés ci-dessus, une fonction appellera une fonction. socketNewPeer..

Var pairs \u003d (); Fonction SocketNewPeer (Data); // Créer une nouvelle connexion Var PC \u003d Nouvelle Peerconnection (serveur, options); // Initialisation IT initConnection (PC, données, "OFFRE"); // Gardez le PIR dans la liste des peers.Connection \u003d PC; // Créez DataChannel pour lequel var canal \u003d pc.createdatachlanneau ("myChannel", ()); canal.owner \u003d données; peers.channel \u003d canal; // Installation des liants d'événements Bindervents de canal (canal); // Créer le SDP; Offre pc.crereeoffer (fonction (offre));) Fonction initconnection (PC, ID, SDPType) (PC.Onicecandidate \u003d Fonction (Event) (if (Event.candidate) (// Quand la nouvelle glace d'un candidat est détectée, ajoutez-la à La liste pour envoyer d'autres peers.candidatecache.push (Event.candidate);) Sinon (// Lorsque la détection du candidat est terminée, le gestionnaire sera appelé à nouveau, mais sans candidat // dans ce cas, nous envoyons une première offre de SDP de peur ou alors Réponse SDP (selon le paramètre de fonction) ... SendVIASCocket (sdptype, pc.localdescription, ID); // ... puis tous ont déjà trouvé de glace candidats pour (var i \u003d 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 de glace

Dès réception de l'un de ces messages, appelez le gestionnaire du message correspondant.

Fonction Socketreceiveed (données) (données); commutateur (json.type) (candidat) (json.id, json.data); casse; cas "Offre": remoteoFFERReceived (JSON. Id, json.data); casse; cas " Réponse ": RemoteanswErreceived (json.id, json.data); pause;))

2.5.0 offre SDP.

Fonction RemoteFerrececeived (ID, données) (CréationConnection (ID); Var PC \u003d peers.Connection; PC.SeRemoteDeption (Données); PC.Createnswe (Fonction) (réponse););) Fonction CreateConnection (ID) (Paiers \u003d\u003d\u003d indéfini) (pairs \u003d (candidatecache :); var pc \u003d nouvelle peerconnection (serveur, options); initconnection (PC, ID, "Réponse"); peers.connection \u003d PC; PC.ONDAtaCharnel \u003d Fonction (E ) (peers.channel \u003d e.channel; peers.channel.owner \u003d id; Bindantales (peers.channel);))))

2.5.1 réponse SDP.

Fonction RemoteanswErreceived (ID, données) (Var PC \u003d peers.Connection; PC.SetremoteDesription (Nouvelle SessionDescription (Données));)

2.5.2 Candidat de glace.

Fonction RemoteCandidateCed (ID, données) (CréationConnection (ID); Var PC \u003d peers.Connection; pc.addicecandidate (nouveau ICECANDIDATE (données);)

2.6. Envoi d'un message

En appuyant sur le bouton Envoyer. La fonction est appelée envoyer le message.. Tout ce qu'elle fait est transmis sur la liste des pairs et tente d'envoyer le message spécifié à tous.

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

getTusermedia.

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 un de plus:

createoFer.

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

Raccrocher.

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.