WebRTC: Comunicazioni Real Time per il Web

19 marzo 2013

Le specifiche WebRTC (ad oggi in fase di sperimentazione), nascono con l’intento di offrire agli sviluppatori web uno strumento per gestire l’interscambio di flussi di dati tra due device in collegamento diretto (peer-to-peer).

Con il termine flussi di dati si vuole indicare in primo luogo tutta la comunicazione di carattere multimediale, come ad esempio video e audio; ma non solo, come vedremo più avanti, le specifiche contemplano anche la trasmissione di dati di tipo diverso, come potrebbero essere quelli derivanti dall’oscilloscopio presente sui moderni smartphone, o dati progettati per una particolare applicazione.

La ricetta per ottenere un risultato come questo è sicuramente complessa e coinvolge molte componenti e tematiche, che spaziano dal networking fino alla gestione appropriata dei codec audio e video per la gestione dei segnali e la cancellazione dell’eco del microfono; fortunatamente le API che stiamo per scoprire nascondono e gestiscono una parte, ma non tutta, di questa complessità.

WebRTC si compone, ad oggi, di 3 API:

APIDescrizione
MediaStreamConsente di ottenere un flusso audio/video proveniente dalla telecamera e dal microfono installato sul device dell’utente
RTCPeerConnectionGestisce la connessione e la comunicazione di flussi di dati tra due device in connessione peer-to-peer
RTCDataChannelConsente l’interscambio di flussi di dati arbitrari tra due device in connessione peer-to-peer

Prima di proseguire è importante ricordare che stiamo parlando di feature sperimentali, le cui specifiche potrebbero cambiare nel corso dei prossimi mesi ed il cui supporto ad oggi non è esteso a tutti i browser.

Per essere precisi a dicembre 2012 le MediaStream API sono implementate da Chrome, Opera e Firefox Nightly (anche se previa attivazione di un flag), le RTCPeerConnection API funzionano invece soltanto su Chrome e Firefox Nightly e, per finire le RTCDataChannel API sono operative solamente su Firefox Nightly.

Bene, detto questo possiamo iniziare la nostra sperimentazione partendo dalle MediaStream API.

MediaStream API

Le Media Stream API (dette anche getUserMedia) danno la possibilità, previo consenso dell’utente, di accedere al flusso video proveniente dalla webcam ed al flusso audio proveniente dal microfono situati sul device che l’utente sta utilizzando in quel momento.

La sintassi è semplicissima e si riassume in questo piccolo esempio funzionante, leggerissima variazione del codice di questo post di riferimento pubblicato su html5rocks.com:

// uniformo la chiamata a getUserMedia rispetto ai vari prefissi sperimentali
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;

// uniformo la chiamata a window.URL sempre rispetto ai prefissi sperimentali
window.URL = window.URL || window.webkitURL;

// invoco la richiesta di accedere sia al flusso video che quello audio, la funzione
// passata come secondo parametro viene lanciata in caso di successo, quella come 
// parametro in caso di errore o di negata autorizzazione
navigator.getUserMedia({video: true}, function(localMediaStream) {

  // creo un elemento HTML5 video ed imposto come sorgente lo stream 
  // proveniente dalla telecamera.
  var video = document.createElement("video");
  video.autoplay = true;
  video.src = window.URL ? window.URL.createObjectURL(localMediaStream) : localMediaStream;

  // aggancio l'elemento video al body della pagina HTML.
  document.body.appendChild(video);
  }, 
  
  function(error) {
	console.log(error);
  });

Se possedete un browser compatibile con il supporto alle Media Stream API potete testare lo script appena visto.

Figura 1. Risultato

Risultato

Se vuoi aggiornamenti su WebRTC: Comunicazioni Real Time per il Web inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su WebRTC: Comunicazioni Real Time per il Web

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy