WebRTC - Architettura

L'architettura WebRTC complessiva ha un grande livello di complessità.

Qui puoi trovare tre diversi livelli:

  • API for web developers - questo livello contiene tutte le API necessarie per gli sviluppatori web, inclusi gli oggetti RTCPeerConnection, RTCDataChannel e MediaStrean.

  • API per i produttori di browser

  • API sostituibile, che i produttori di browser possono collegare.

I componenti di trasporto consentono di stabilire connessioni tra vari tipi di reti, mentre i motori voce e video sono framework responsabili del trasferimento di flussi audio e video da una scheda audio e una telecamera alla rete. Per gli sviluppatori Web, la parte più importante è l'API WebRTC.

Se guardiamo l'architettura WebRTC dal lato client-server possiamo notare che uno dei modelli più comunemente utilizzati è ispirato al Trapezoid SIP (Session Initiation Protocol).

In questo modello, entrambi i dispositivi eseguono un'applicazione Web da server diversi. L'oggetto RTCPeerConnection configura i flussi in modo che possano connettersi tra loro, peer-to-peer. Questa segnalazione viene eseguita tramite HTTP o WebSocket.

Ma il modello più comunemente usato è Triangle -

In questo modello entrambi i dispositivi utilizzano la stessa applicazione web. Offre agli sviluppatori web una maggiore flessibilità nella gestione delle connessioni degli utenti.

L'API WebRTC

Consiste di alcuni oggetti javascript principali:

  • RTCPeerConnection
  • MediaStream
  • RTCDataChannel

L'oggetto RTCPeerConnection

Questo oggetto è il punto di ingresso principale per l'API WebRTC. Ci aiuta a connetterci ai peer, inizializzare le connessioni e allegare flussi multimediali. Gestisce anche una connessione UDP con un altro utente.

Il compito principale dell'oggetto RTCPeerConnection è impostare e creare una connessione peer. Possiamo facilmente agganciare i punti chiave della connessione perché questo oggetto attiva una serie di eventi quando compaiono. Questi eventi ti danno accesso alla configurazione della nostra connessione -

RTCPeerConnection è un semplice oggetto javascript, che puoi creare semplicemente in questo modo:

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

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

[/code]

L'oggetto RTCPeerConnection accetta un parametro conf , di cui parleremo più avanti in queste esercitazioni. L' evento onaddstream viene generato quando l'utente remoto aggiunge un flusso video o audio alla propria connessione peer.

API MediaStream

I browser moderni consentono a uno sviluppatore di accedere all'API getUserMedia , nota anche come API MediaStream . Ci sono tre punti chiave di funzionalità:

  • Fornisce a uno sviluppatore l'accesso a un oggetto flusso che rappresenta flussi video e audio

  • Gestisce la selezione dei dispositivi di input dell'utente nel caso in cui un utente abbia più telecamere o microfoni sul proprio dispositivo

  • Fornisce un livello di sicurezza che chiede all'utente tutto il tempo che desidera recuperare il flusso

Per testare questa API creiamo una semplice pagina HTML. Mostrerà un singolo elemento <video>, chiederà il permesso all'utente di utilizzare la videocamera e mostrerà un live streaming dalla videocamera sulla pagina. Crea un file index.html e aggiungi -

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

Quindi aggiungi un file 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]

Ora apri index.html e dovresti vedere il flusso video che mostra il tuo viso.

Ma attenzione, perché WebRTC funziona solo sul lato server. Se apri semplicemente questa pagina con il browser, non funzionerà. È necessario ospitare questi file sui server Apache o Node o su quale si preferisce.

L'oggetto RTCDataChannel

Oltre a inviare flussi multimediali tra peer, puoi anche inviare dati aggiuntivi utilizzando DataChannel API. Questa API è semplice come l'API MediaStream. Il compito principale è creare un canale proveniente da un oggetto RTCPeerConnection esistente -

[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]

Questo è tutto ciò di cui hai bisogno, solo due righe di codice. Tutto il resto viene eseguito sul livello interno del browser. È possibile creare un canale in qualsiasi connessione peer fino alla chiusura dell'oggetto RTCPeerConnection .

Sommario

Ora dovresti avere una solida conoscenza dell'architettura WebRTC. Abbiamo anche trattato le API MediaStream, RTCPeerConnection e RTCDataChannel. L'API WebRTC è un obiettivo mobile, quindi tieniti sempre aggiornato con le ultime specifiche.