webrtc Tutoriel
Démarrer avec webrtc

Remarques

Configuration d'un système de communication basé sur WebRTC

Pour configurer un système de communication WebRTC, vous devez disposer de trois composants principaux:

1. Un serveur de signalisation WebRTC

   Pour établir une connexion WebRTC, les homologues doivent contacter un serveur de signalisation, qui fournit ensuite les informations d'adresse dont les homologues ont besoin pour configurer une connexion entre homologues. Les serveurs de signalisation sont par exemple:

   • signalmaster : serveur de signalisation léger basé sur JavaScript
   • NextRTC : serveur de signalisation basé sur Java
   • Kurento : framework WebRTC complet
   • Janus : Passerelle WebRTC à usage général

2. Une application client WebRTC

   Le client accède à l'implémentation WebRTC d'un navigateur via une API JavaScript ou utilise une bibliothèque WebRTC (par exemple, dans le cadre d'une application de bureau ou d'une application mobile). Pour établir la connexion avec un homologue, le client doit d'abord se connecter au serveur de signalisation. Exemples de clients WebRTC:

   • Plusieurs projets Kurento

   • OpenWebRTC , un client multi-plateforme avec focus mobile

   • Peer.js Un client basé sur un navigateur (Peer.js fournit également un serveur léger)

   • Exemples de démos Janus

3. Un serveur STUN / TURN

   Session Traversal Utilities pour NAT (STUN) permet aux homologues d’échanger des informations d’adresse même s’ils sont derrière des routeurs utilisant la traduction d' adresses réseau (NAT) . Si des restrictions de réseau empêchent les homologues de communiquer directement, le trafic est acheminé via un serveur Traversal Using Relays Around NAT (TURN) . Vous trouverez une explication graphique et détaillée de STUN et TURN à l' adresse http://www.avaya.com/blogs/archives/2014/08/understanding-webrtc-media-connections-ice-stun-and-turn.html . Les exemples de serveurs WebRTC STUN / TURN sont les suivants:

   • Coturn combine STUN et TURN et fait généralement partie d'une infrastructure WebRTC à part entière.
   • La passerelle WebRTC de Janus est fournie avec un serveur STUN / TURN intégré.

Introduction au WebRTC

WebRTC est un framework ouvert pour le Web qui active les communications en temps réel dans le navigateur. Il comprend les éléments fondamentaux pour des communications de haute qualité sur le Web, tels que les composants réseau, audio et vidéo utilisés dans les applications de conversation vocale et vidéo.

Ces composants, lorsqu'ils sont implémentés dans un navigateur, sont accessibles via une API JavaScript, permettant aux développeurs d'implémenter facilement leur propre application Web RTC.

L'effort WebRTC est en cours de normalisation au niveau de l'API au niveau du W3C et au niveau du protocole à l' IETF .

• Un facteur clé du succès du Web est que ses technologies de base, telles que HTML, HTTP et TCP / IP, sont ouvertes et librement implémentables. Actuellement, il n’existe pas de solution complète, gratuite et de haute qualité permettant la communication dans le navigateur. WebRTC permet cela.
• Déjà intégré aux meilleurs moteurs vocaux et vidéo déployés sur des millions de terminaux au cours des 8 dernières années. Google ne facture pas de redevances pour WebRTC.
• Inclut et résume la technologie de traversée de NAT et de pare-feu, en utilisant STUN, ICE, TURN, RTP-over-TCP et la prise en charge de proxy.
• S'appuie sur la force du navigateur Web: WebRTC extrait la signalisation en offrant une machine à états de signalisation qui mappe directement à PeerConnection. Les développeurs Web peuvent donc choisir le protocole choisi pour leur scénario d'utilisation (par exemple, mais sans s'y limiter, SIP, XMPP / Jingle, etc.).

En savoir plus sur WebRTC d' ici

Accédez à vos fichiers audio et vidéo en utilisant l'API getUserMedia (), Bonjour WebRTC!

navigator.mediaDevices est la méthode courante adaptée dans Chrome et FF pour getUserMedia dès maintenant.

Un rappel basé sur les promesses qui renvoie le flux local en cas de succès

navigator.mediaDevices.getUserMedia({ audio: true, video: true })
    .then(stream => {
        // attach this stream to window object so you can reuse it later
        window.localStream = stream;
        // Your code to use the stream
    })
    .catch((err) =>{
        console.log(err);
    });

Vous pouvez transmettre des contraintes audio et vidéo à getUserMedia pour contrôler les paramètres de capture tels que la résolution, la fréquence d'images, les préférences de périphérique, etc.

Joindre le flux à un élément vidéo

// Set the video element to autoplay to ensure the video appears live
videoElement.autoplay = true;
// Mute the local video so the audio output doesn't feedback into the input
videoElement.muted = true;
// attach the stream to the video element

arrêter à la fois vidéo et audio

localStream.getTracks().forEach((track) => {
    track.stop();
});

arrêter uniquement l'audio

localStream.getAudioTracks()[0].stop();

arrête seulement la vidéo

localStream.getVideoTracks()[0].stop();

Démo en direct