WebRTC - Architecture

L'architecture globale du WebRTC présente un niveau de complexité élevé.

Ici vous pouvez trouver trois couches différentes -

  • API for web developers - cette couche contient tous les développeurs Web API nécessaires, y compris les objets RTCPeerConnection, RTCDataChannel et MediaStrean.

  • API pour les fabricants de navigateurs

  • API remplaçable, que les fabricants de navigateurs peuvent accrocher.

Les composants de transport permettent d'établir des connexions entre différents types de réseaux, tandis que les moteurs vocaux et vidéo sont des cadres responsables du transfert des flux audio et vidéo d'une carte son et d'une caméra vers le réseau. Pour les développeurs Web, la partie la plus importante est l'API WebRTC.

Si nous regardons l'architecture WebRTC du côté client-serveur, nous pouvons voir que l'un des modèles les plus couramment utilisés est inspiré du trapèze SIP (Session Initiation Protocol).

Dans ce modèle, les deux appareils exécutent une application Web à partir de différents serveurs. L'objet RTCPeerConnection configure les flux afin qu'ils puissent se connecter les uns aux autres, d'égal à égal. Cette signalisation se fait via HTTP ou WebSockets.

Mais le modèle le plus couramment utilisé est Triangle -

Dans ce modèle, les deux appareils utilisent la même application Web. Il donne aux développeurs Web plus de flexibilité lors de la gestion des connexions des utilisateurs.

L'API WebRTC

Il se compose de quelques objets javascript principaux -

  • RTCPeerConnection
  • MediaStream
  • RTCDataChannel

L'objet RTCPeerConnection

Cet objet est le principal point d'entrée de l'API WebRTC. Cela nous aide à nous connecter à des pairs, à initialiser les connexions et à attacher des flux multimédias. Il gère également une connexion UDP avec un autre utilisateur.

La tâche principale de l'objet RTCPeerConnection est de configurer et de créer une connexion homologue. On peut facilement accrocher des points clés de la connexion car cet objet déclenche un ensemble d'événements lorsqu'ils apparaissent. Ces événements vous donnent accès à la configuration de notre connexion -

Le RTCPeerConnection est un simple objet javascript, que vous pouvez simplement créer de cette façon -

[code] 
var conn = new RTCPeerConnection(conf); 

conn.onaddstream = function(stream) { 
   // use stream here 
}; 

[/code]

L'objet RTCPeerConnection accepte un paramètre conf , que nous aborderons plus loin dans ces tutoriels. L' événement onaddstream est déclenché lorsque l'utilisateur distant ajoute un flux vidéo ou audio à sa connexion homologue.

API MediaStream

Les navigateurs modernes permettent aux développeurs d'accéder à l' API getUserMedia , également appelée API MediaStream . Il y a trois points clés de fonctionnalité -

  • Il donne à un développeur l'accès à un objet de flux qui représente des flux vidéo et audio

  • Il gère la sélection des appareils utilisateur d'entrée au cas où un utilisateur aurait plusieurs caméras ou microphones sur son appareil

  • Il fournit un niveau de sécurité demandant à l'utilisateur tout le temps qu'il souhaite récupérer le flux s

Pour tester cette API, créons une simple page HTML. Il affichera un seul élément <video>, demandera la permission à l'utilisateur d'utiliser la caméra et affichera un flux en direct de la caméra sur la page. Créez un fichier index.html et ajoutez -

[code] 
<html>
 
   <head> 
      <meta charset = "utf-8"> 
   </head>
	
   <body> 
      <video autoplay></video> 
      <script src = "client.js"></script> 
   </body> 
	 
</html> 
[/code]

Ajoutez ensuite un fichier client.js -

[code] 
//checks if the browser supports WebRTC 

function hasUserMedia() { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia 
      || navigator.mozGetUserMedia || navigator.msGetUserMedia; 
   return !!navigator.getUserMedia; 
}
 
if (hasUserMedia()) { 
   navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia
      || navigator.mozGetUserMedia || navigator.msGetUserMedia;
		
   //get both video and audio streams from user's camera 
   navigator.getUserMedia({ video: true, audio: true }, function (stream) { 
      var video = document.querySelector('video'); 
		
      //insert stream into the video tag 
      video.src = window.URL.createObjectURL(stream); 
   }, function (err) {}); 
	
}else {
   alert("Error. WebRTC is not supported!"); 
}
[/code]

Ouvrez maintenant le fichier index.html et vous devriez voir le flux vidéo affichant votre visage.

Mais attention, car WebRTC ne fonctionne que côté serveur. Si vous ouvrez simplement cette page avec le navigateur, cela ne fonctionnera pas. Vous devez héberger ces fichiers sur les serveurs Apache ou Node, ou celui que vous préférez.

L'objet RTCDataChannel

En plus d'envoyer des flux multimédias entre pairs, vous pouvez également envoyer des données supplémentaires à l'aide de l' API DataChannel . Cette API est aussi simple que l'API MediaStream. Le travail principal est de créer un canal provenant d'un objet RTCPeerConnection existant -

[code] 
var peerConn = new RTCPeerConnection(); 

//establishing peer connection 
//... 
//end of establishing peer connection 
var dataChannel = peerConnection.createDataChannel("myChannel", dataChannelOptions); 

// here we can start sending direct messages to another peer 
[/code]

C'est tout ce dont vous avez besoin, juste deux lignes de code. Tout le reste se fait sur la couche interne du navigateur. Vous pouvez créer un canal sur n'importe quelle connexion homologue jusqu'à ce que l'objet RTCPeerConnection soit fermé.

Sommaire

Vous devriez maintenant avoir une bonne maîtrise de l'architecture WebRTC. Nous avons également couvert les API MediaStream, RTCPeerConnection et RTCDataChannel. L'API WebRTC est une cible mouvante, alors restez toujours au fait des dernières spécifications.