Web RTC: Nato per comunicare

13 Novembre 2013 Giuseppe Dongu - Smyrtle Cyber Security 1

WebRTC

Nato per Comunicare


Cosa è WebRTC

● Web Real-Time Communications

– Standard e API per permettere la comunicazione real-time direttamente fra browser

– Lavoro comune di W3C, IETF, Google, Mozilla, Opera e (forse) Microsoft. Apple ??

– Tutte le caratteristiche accessibili via tag HTML5 standard e API Javascript

● “Our mission: To enable rich, high quality, RTC applications to be developed in the browser via simple Javascript APIs and HTML5.” (webrtc.org)


Lo stato

● Pre-Standard, per cui tutto quello che si trova sul browser è ancora sperimentale.

● Si sta lavorando e si sta evolvendo molto velocemente: settimane e mesi, non anni.

● Ci sono ancora tante dispute, che riguardano codec (google contro mozilla contro cisco contro …)

● Microsoft nicchia e Apple è “non pervenuta”.

● Ha risvegliato l'interesse di molte Telco, per la possibilità di integrazione con i prodotti già esistenti e di crearne di nuovi.


Features

Feature Realizzata tramite Importante perchéIndipendente dalla piattaforma

API definite da W3C e protocolli da IETF

Nessuna preoccupazione per device, codec, browser

Trasmissione sicura di voce e video

DTLS-SRTP Garantisce comunicazioni sicure, anche in WiFi o ambienti “ostili”

Elevata qualità delle immagini e dell'audio

Opus, G711, VP8, H264, etc.. Nessuna necessità di download codec, garantisce interoperabilità

Sessioni con bassa latenza e alta affidabilità

Hole-Punching Peer-to-Peer più affidabile, meno latenza, meno carico sui server, meno infrastrutture

Adattativo Multiplexed Real Time Control Protocol (RTCP) e Secure Audio Video Profile with Feedback (SAVPF)

Essere in grado di avere stime sulle condizioni della rete è fondamentale per il video in Real Time

Interoperabilità con i sistemi VoIP

SRTP, SDP Possibilità di connettere sistemi VoIP esistenti tramite protocolli standard


Senza WebRTC


Con WebRTC


Protocolli

Protocollo Uso Layer

HTTP Hyper-Text Transfer Protocol Application

WebSocket Comunicazione Browser - Server Application

SRTP Secure Realtime Transfer Protocol Application

SDP Session Description Protocol Application

STUN Session Traversal Utilities for NAT Application

TURN Traversal Using Relay around NAT Application

ICE Interactive Connectivity Establishement Application

TLS Transport Layer Security Transport

TCP Transmission Control Protocol Transport

DTLS Datagram Transport Layer Security Transport

UDP User Datagram Protocol Transport

SCTP Stream Control Transport Protocol Transport

IP Internet Protocol Network


SDP: Session Description Protocol

● Session Description Protocol (SDP) [RFC4566] descrive le caratteristiche multimediali delle connessioni fra i peer.

● Fornisce una lista complessa di caratteristiche che descrivono le capacità del peer, indirizzi IP, metadati, in modo agnostico rispetto al trasporto.

● I peer devono scambiarsi fra loro queste informazioni per realizzare la connessione multimediale. Il meccanismo utilizzato è quello Offer-Answer

● In JavaScript è encodato tramite l'oggetto RTCSessionDescription

● SDP_Track


SDP

● Ce ne preoccupiamo:

– quando creiamo un'offerta ed una risposta tra i peer affinché comunichino quali sono le loro capacità:

● RTCPeerConnection.createOffer● RTCPeerConnection.createAnswer● RTCPeerConnection.setLocalDescription(SDP)● RTCPeerConnection.setRemoteDescription(SDP)

– RTCSessionDescription è l'oggetto che rappresenta SDP


STUN – TURN – ICE

● Protocolli necessari per aggirare il limite imposto dal Network Address Translation (NAT)

● STUN: Session Traversal Utilities for NAT

● TURN: Traversal Using Relays around NAT

● ICE: Interactive Connectivity Establishment


STUN

● Restituisce il “punto di vista” esterno sull'indirizzo di un Peer.

● Alla richiesta da parte del Peer, risponde con l'indirizzo IP dell'ultimo NAT attraversato dal Peer e con la porta dalla quale la richiesta è arrivata.

● stun:stun.services.mozilla.com● stun:stun.l.google.com:19302


TURN

● E' un' estensione di STUN, praticamente implementato sullo stesso server che implementa STUN

● Fornisce un “relay” di last resort verso il quale converge il flusso multimediale dei Peer , quando ogni altro tentativo di stabilire una connessione diretta fallisce.


ICE

● Permette di stabilire connessioni dirette fra Peer.

● Fornisce la verifica che la comunicazione tra i Peer sia effettivamente voluta (no DOS flooding).

● Raccoglie un elenco di Candidates, ossia di transport address (IP + porta)

● Usa hole-punching per fare il candidates gathering


ICE

● Classifica i candidati in 4 tipi:

– Host: local transport address via NIC

– Server Reflexive: transport address via STUN server

– Peer Reflexive: public transport address via STUN check

– Relayed: TURN transport address


ICE

● Ce ne preoccupiamo:

– la RTCPeerConnection ha come parametro un array di iceServers:

● {"iceServers":[{"url":"stun:stun.services.mozilla.com"}, {"url":"stun:stun.l.google.com:19302"}]};

– dovremo gestire cosa succede quando un Peer troverà dei candidati:

● peerConn.onicecandidate = function(){...};

– dovremo gestire quando un Peer riceverà dei candidati:● peerConn.addIceCandidate(new

RTCIceCandidate({sdpMLineIndex:msg.mlineindex, candidate:msg.candidate}));


SRTP: Secure Real Time Protocol

● Protocollo utilizzato per il trasporto dell'audio e del video fra i client.

● L'esito positivo della fase di Offer – Answer porta alla connessione SRTP

● WebRTC prevede che venga usato soltanto il profilo sicuro di RTP con (preferibilmente) DTLS-SRTP per lo scambio delle chiavi.


Segnalazione e Trasporto

● La segnalazione viene utilizzata solitamente per la negoziazione, la gestione degli stati, autenticazione e autorizzazione

● In WebRTC la segnalazione non è standardizzata

● Perché ?

– Perché non serve che lo sia

– Possiamo decidere di propagare SDP, ICE e gli stati sul canale che meglio crediamo.

● Canali utilizzati:

– HTTP

– WebSocket

– dataChannel


Ricapitolando


Polyfill adapter.js: APIs

http://code.google.com/p/webrtc/source/browse/trunk/samples/js/base/adapter.js

Polyfill Moz Version Google Version

RTCPeerConnection mozRTCPeerConnection webkitRTCPeerConnection

RTCSessionDescription mozRTCSessionDescription RTCSessionDescription

RTCIceCandidate mozRTCIceCandidate RTCIceCandidate

getUserMedia navigator.mozGetUserMedia.bind(navigator)

navigator.webkitGetUserMedia.bind(navigator);


Polyfill adapter.js: attachMediaStream

attachMediaStream = function(element, stream) { element.mozSrcObject = stream; element.play(); };

attachMediaStream = function(element, stream) { if (typeof element.srcObject !== 'undefined') { element.srcObject = stream; } else if (typeof element.mozSrcObject !== 'undefined') { element.mozSrcObject = stream; } else if (typeof element.src !== 'undefined') { element.src = URL.createObjectURL(stream); } else { console.log('Error attaching stream to element.'); } };

Mozilla

Google


Canale

● Il canale è necessario per lo scambio dei messaggi fra i peer

● Massima libertà nella scelta implementativa tra Http, WebSocket, dataChannel

● Per la cronaca, quello utilizzato nel seguito è implementato via Xml Http Request (XHR), con polling.

● E' totalmente trasparente...


Canale

handleMsg = function (msg) {…………

};scHandlers = {

onWaiting' : function () {setStatus("Waiting");weWaited = true;

},'onConnected': function () {

setStatus("Connected");document.getElementById("call").disabled = false;createPeerConnection();

},'onMessage': handleMsg

};signalingChannel = createSignalingChannel(key, scHandlers);SignalingChannel.connect();


Mettendo tutto insieme


HTML

L'unica cosa di cui abbiamo bisogno, sono i tag video:

<video id="localVideo" autoplay="autoplay" controls muted="true"></video>

<video id="remoteVideo" autoplay="autoplay" controls muted="true"></video>


getUserMedia

window.onload = function(){

var constraints = {audio:true,video:true};successCallback =

function(stream){localStream = stream;attachMediaStream(document.getElementById('localVideo'),stream);mediaAttached = true;

}errorCallback =

function(error){trace("error: "+error.message);

}getUserMedia ( constraints, successCallback, errorCallback );

}


RTCPeerConnection

● Il cuore di WebRTC è RTCPeerConnection

● Una RTCPeerConnection permette a due utenti di comunicare direttamente, browser-to-browser. Le comunicazioni sono coordinate dal canale di segnalazione.


RTCPeerConnection

var iceServer = {"iceServers":[{"url":"stun:stun.services.mozilla.com"},{"url":"stun:stun.l.google.com:19302"}{ url:"turn:numb.viagenie.ca",

credential: "webrtcdemo", username:"louis%40mozilla.com"}]};var options = {optional: [ {DtlsSrtpKeyAgreement: true}, /* Per garantire IterOP tra FF e Chrome */ {RtpDataChannels: true}]};

function createPeerConnection(){peerConn = peerConn || new RTCPeerConnection(iceServer,options);peerConn.onicecandidate = onIceCandidate;peerConn.onaddstream = onRemoteStreamAdded;

}

function onIceCandidate(ev){...};function onRemoteStreamAdded(ev){...};


SDP Offer - Answer

function connect() {var errorCB, scHandlers, handleMsg;key = document.getElementById("key").value;

handleMsg = function (msg) {if (msg.type === "offer") {

peerConn.setRemoteDescription(new RTCSessionDescription(msg));remoteOfferReceived = true;createAnswer();

} else if (msg.type === "answer") {peerConn.setRemoteDescription(new RTCSessionDescription(msg));

} else if (msg.type === "candidate") {peerConn.addIceCandidate(

new RTCIceCandidate({sdpMLineIndex:msg.mlineindex,candidate:msg.candidate}));

}};scHandlers = {'onWaiting' : ...,'onConnected': ...,

'onMessage': handleMsg};signalingChannel = createSignalingChannel(key, scHandlers);

}


SDP Offer - Answer

function call(){if(peerConn){

peerConn.addStream(localStream);createOffer();

}}function createOffer(stream){

peerConn.createOffer(gotSDP,errorHandler,{'mandatory':{'OfferToReceiveAudio': true,'OfferToReceiveVideo':true}});

}function createAnswer(){

peerConn.addStream(localStream);peerConn.createAnswer(

gotSDP,errorHandler,{'mandatory':{'OfferToReceiveAudio': true,'OfferToReceiveVideo':true}});

}function gotSDP(sdp){

peerConn.setLocalDescription(sdp);signalingChannel.send(sdp,function(msg){trace(msg)});

}


ICE Candidates

function onIceCandidate(ev){if(!peerConn || !ev || ! ev.candidate)

return;else{

var candidate = event.candidatesignalingChannel.send({

type:'candidate',mlineindex: candidate.sdpMLineIndex,candidate:candidate.candidate},function(msg){trace("sendHandler: "+msg)});

}}

handleMsg = function (msg) {if (msg.type === "offer") {…}else if (msg.type === "answer") {…}else if (msg.type === "candidate") {

peerConn.addIceCandidate(new RTCIceCandidate({

sdpMLineIndex:msg.mlineindex,candidate:msg.candidate}));

}};


RTCPeerConnection.onaddstream

function createPeerConnection(){peerConn = peerConn || new RTCPeerConnection(defaultIceServer);peerConn.onicecandidate = onIceCandidate;peerConn.onaddstream = onRemoteStreamAdded;

}function onRemoteStreamAdded(ev){

attachMediaStream(remoteVideo,ev.stream);}


dataChannel

● Creazione del canale (offerer):– var channel = peerConn.createDataChannel(channelName, channelOptions);

● channelName: stringa che identifica il canale

● channelOptions: non utilizzata {};

– channel.onopen = function(ev){...}

– channel.onerror = function(err){track(err)}

– channel.onmessage = function(ev){track(ev.data)}

– channel.onclose = function(ev){...}

● Acquisizione del Canale (answerer)– peerConn.ondatachannel = function (e) {

e.channel.onmessage = function () { … };}

● Spedizione del Messaggio– channel.send(msg);


Cose Interessanti

● http://www.webrtc.org/

● http://dev.w3.org/2011/webrtc/editor/webrtc.html

● https://www.sharefest.me/

● http://peerjs.com/

● www.html5rocks.com

● https://www.webrtc-experiment.com/

● https://developer.mozilla.org/en-US/docs/WebRTC

http://www.webrtc.org/

http://dev.w3.org/2011/webrtc/editor/webrtc.html

https://www.sharefest.me/

http://peerjs.com/

http://www.html5rocks.com/

https://www.webrtc-experiment.com/

https://developer.mozilla.org/en-US/docs/WebRTC

Web RTC: Nato per comunicare

Documents

Transcript of Web RTC: Nato per comunicare