WebRTC vous permet de mettre en œuvre une communication audio/vidéo en temps réel via un navigateur

Dans cette rubrique, je vais vous expliquer comment implémenter l'application WebRTC la plus simple.

1. getUserMedia - accès aux appareils multimédias (microphone / webcam)

Rien de compliqué, avec 10 lignes de code javascript vous pouvez vous voir et vous entendre dans le navigateur (démo).

Créer index.html :

Vous pouvez appliquer des filtres CSS3 à l'élément vidéo.

La chose frustrante ici est qu'à ce stade du développement WebRTC, je ne peux pas dire au navigateur "Je fais confiance à ce site, donnez-lui toujours accès à ma caméra et à mon microphone" et vous devez cliquer sur Autoriser après chaque ouverture/actualisation de page.

Eh bien, il ne serait pas superflu de rappeler que si vous avez donné accès à la caméra dans un navigateur, l'autre recevra PERMISSION_DENIED en essayant d'y accéder.

2. Serveur de signalisation (serveur de signal)

Ici, je romps la séquence de la plupart des instructions de "webrtc pour démarrer" car elles démontrent les capacités de webRTC sur un client dans un deuxième temps, ce qui personnellement n'a fait qu'ajouter de la confusion à l'explication pour moi.

Le serveur de signalisation est le centre de coordination WebRTC qui assure la communication entre les clients, l'initialisation et la fermeture de la connexion et le rapport d'erreurs.

Le serveur de signalisation dans notre cas est Node.js + socket.io + node-static, il écoutera sur le port 1234.
De plus, node-static peut donner index.html, ce qui rendra notre application aussi simple que possible.

Dans le dossier de l'application, installez le nécessaire :

npm install socket.io npm install node-static

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

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

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

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

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

Installation du serveur multimédia et de diffusion WebRTC

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

Il s'agissait d'un Centos x86_64 version 6.5 sans aucun logiciel préinstallé dans un centre de données d'Amsterdam. Ainsi, tout ce que nous avons à notre disposition est un serveur et un accès ssh à celui-ci. Pour ceux qui sont familiers avec les commandes de la console Linux, l'installation d'un serveur WebRTC promet d'être simple et indolore. Alors ce qu'on a fait :

1. Télécharger l'archive :

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

2. Déballer:

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

3. Installer:

$cd FlashphonerWebCallServer

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

4. Activer la licence :

$cd /usr/local/FlashphonerWebCallServer/bin

$./activation.sh

5. Démarrez le serveur WCS :

$service webcallserver start

6. Vérifier le journal :

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

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

$ps aux | grep Flashphone

Le processus d'installation est terminé.

Tester les flux en direct WebRTC

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Qu'est-ce que le WebRTC ?

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

Que devez-vous savoir sur le WebRTC ?

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

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

Comment fonctionne WebRTC

Côté client

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

Côté serveur WebRTC

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

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

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

Avantages de la norme

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

Inconvénients de la norme

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

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

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

WebRTC pour le marché de la visioconférence

Augmentation du nombre de terminaux de visioconférence

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

Utilisation dans des solutions spécialisées

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

Ex-utilisateurs de Skype pour Linux

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

Concurrence avec Flash

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

Présentations vidéo WebRTC

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

Codecs dans WebRTC

Codecs audio

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

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

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

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

Codecs vidéo

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

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

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

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

API WebRTC

La technologie WebRTC repose sur trois principales API :

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

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

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

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

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

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

Connexion WebRTC

Navigateurs de bureau pris en charge

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

Navigateurs mobiles pris en charge pour Android

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

WebRTC, Microsoft et Internet Explorer

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

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