Aujourd'hui, WebRTC est la technologie « chaude » 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 contenus enregistrés (vidéo à la demande) et sont nettement inférieures au WebRTC en termes de diffusion en temps réel et en ligne, c'est-à-dire où une latence vidéo minimale est requise pour permettre aux téléspectateurs de voir ce qui se passe « en direct ».

La possibilité d'une communication en temps réel de haute qualité vient de l'architecture WebRTC elle-même, où le protocole UDP est utilisé pour transporter les flux vidéo, qui constitue la base standard pour la transmission de vidéo avec des délais minimes 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 ligne, les webinaires et autres applications qui nécessitent une communication interactive avec la source vidéo, les utilisateurs finaux et nécessitent une solution.

Une autre bonne raison d’essayer WebRTC est qu’il s’agit définitivement d’une tendance. Aujourd'hui, tous les navigateurs Android Chrome prennent en charge cette technologie, qui garantit que des millions d'appareils sont prêts à regarder la diffusion sans installer de logiciel ou de configuration supplémentaire.

Afin de tester la technologie WebRTC en action et de lancer une simple diffusion en ligne sur celle-ci, nous avons utilisé le logiciel serveur Flashphoner WebRTC Media & Broadcasting Server. Les fonctionnalités indiquent 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 de médias et de diffusion WebRTC

Comme il n’existait pas de version du serveur pour le système Windows et que je ne souhaitais 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 de Centos x86_64 version 6.5 sans aucun logiciel préinstallé dans le centre de données d'Amsterdam. Ainsi, tout ce dont nous disposons est le serveur et l'accès ssh à celui-ci. Pour ceux qui connaissent les commandes de la console Linux, l'installation d'un serveur WebRTC promet d'être simple et indolore. Alors ce que nous avons fait :

1. Télécharger les archives :

$wget https://site/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 démarrage du serveur d'appels Web

6. Journal de vérification :

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

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

$ps aux | grep Flashphoner

Le processus d'installation est terminé.

Test des diffusions en ligne WebRTC

Tester les émissions s’est avéré simple. En plus du serveur, il existe un client Web composé d'une douzaine de fichiers Javascript, HTML et CSS et que nous avons déployé dans le dossier /var/www/html lors de la phase d'installation. La seule chose à faire était de saisir l'adresse IP du serveur dans la configuration flashphoner.xml afin que le client Web puisse établir une connexion avec le serveur via des Websockets HTML5. Décrivons le processus de test.

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

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

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 l'autorise.

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, un indicateur indique que le flux va vers le serveur ; dans le coin inférieur se trouve un bouton « Stop » pour arrêter l'envoi de la vidéo.

Veuillez noter le lien dans la case ci-dessous. Il contient un identifiant unique pour ce flux, afin que tout le monde puisse participer au visionnage. Ouvrez simplement ce lien dans votre navigateur. Pour le copier dans le presse-papiers, cliquez sur le bouton « Copier ».

Dans des 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 mettre en œuvre la distribution de cet identifiant à certains groupes de téléspectateurs afin qu'ils puissent se connecter aux flux souhaités, mais c'est déjà la logique de l'application. . Serveur de médias et de diffusion WebRTC ne l'affecte pas, mais distribue uniquement des vidéos.

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

Résultats des tests du serveur de diffusion en ligne WebRTC

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

Concernant la qualité, on note que les cubes peuvent parfois se distinguer par des mouvements. Ceci est cohérent avec la nature du codec VP8 et son objectif principal : fournir une communication vidéo en temps réel avec une qualité acceptable et sans retards de communication.

Le serveur est assez simple à installer et à configurer, son fonctionnement ne nécessite aucune compétence sérieuse autre que la 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 navigateurs. La connexion de téléspectateurs supplémentaires au flux n’a également posé aucun problème.

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 soulevé quelques questions était la résolution vidéo. La caméra prend en charge 1280x800, mais la résolution de l'image de test est très similaire à 640x480. Apparemment, cette question doit être clarifiée avec les développeurs.

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

WebRTC 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 une application WebRTC simple.

1. getUserMedia - accéder 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.

Ce qui est triste ici, c'est qu'à ce stade du développement de WebRTC, je ne peux pas dire au navigateur « Je fais confiance à ce site, je lui donne toujours accès à ma caméra et à mon microphone » et je dois cliquer sur Autoriser après chaque ouverture/actualisation de page.

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

2. Serveur de signalisation

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

Le serveur de signalisation est le centre de coordination de 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 le port 1234.
De plus, node-static peut servir index.html, ce qui rendra notre application aussi simple que possible.

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

Npm installer socket.io npm installer noeud-statique