Slides of the talk Giuseppe Dongu gave at the HTML5 Frontend Development @L'Aquila (Italy). 13th November 2013. Speaker: Giuseppe Dongu (Smyrtle Cyber Security) Abstract: WebRTC si sta imponendo come una delle più interessanti novità degli ultimi anni, giocando il ruolo di ponte tra due mondi fino a poco tempo fa considerati separati: il web e l'ip communication. In questa chiacchierata, daremo un'occhiata a come questo ponte esista, implementato ed integrato in HTML5.

1. WebRTC
Nato per Comunicare
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
1

2. Cosa è WebRTC
●
Web Real-Time Communications
–
–
Lavoro comune di W3C, IETF, Google, Mozilla, Opera
e (forse) Microsoft. Apple ??
–
●
Standard e API per permettere la comunicazione realtime direttamente fra browser
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)
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
2

3. 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.
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
3

4. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
4

5. Senza WebRTC
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
5

6. Con WebRTC
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
6

7. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
7

8. 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 OfferAnswer
In JavaScript è encodato tramite l'oggetto
RTCSessionDescription
SDP_Track
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
8

9. 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
●
–
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
9

10. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
10

11. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
11

12. 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.
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
12

13. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
13

14. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
14

15. ICE
●
Ce ne preoccupiamo:
–
la RTCPeerConnection ha come parametro un array di
iceServers:
●
–
dovremo gestire cosa succede quando un Peer troverà
dei candidati:
●
–
{"iceServers":[{"url":"stun:stun.services.mozilla.com"},
{"url":"stun:stun.l.google.com:19302"}]};
peerConn.onicecandidate = function(){...};
dovremo gestire quando un Peer riceverà dei candidati:
●
peerConn.addIceCandidate(new
RTCIceCandidate({sdpMLineIndex:msg.mlineindex,
candidate:msg.candidate}));
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
15

16. 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.
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
16

17. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
17

18. Ricapitolando
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
18

19. Polyfill adapter.js: APIs
http://code.google.com/p/webrtc/source/browse/trunk/sa
mples/js/base/adapter.js
Polyfill
Moz Version
Google Version
RTCPeerConnection
mozRTCPeerConnection
webkitRTCPeerConnection
RTCSessionDescription
mozRTCSessionDescription
RTCSessionDescription
RTCIceCandidate
mozRTCIceCandidate
RTCIceCandidate
getUserMedia
navigator.mozGetUserMedia
.bind(navigator)
navigator.webkitGetUserMe
dia.bind(navigator);
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
19

20. Polyfill adapter.js: attachMediaStream
Mozilla
attachMediaStream = function(element, stream) {
element.mozSrcObject = stream;
element.play();
};
Google
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.');
}
};
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
20

21. 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...
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
21

22. 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();
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
22

23. Mettendo tutto insieme
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
23

24. 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>
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
24

25. 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 );
}
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
25

26. 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.
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
26

27. 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){...};
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
27

28. 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);
}
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
28

29. 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)});
}
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
29

30. ICE Candidates
function onIceCandidate(ev){
if(!peerConn || !ev || ! ev.candidate)
return;
else{
var candidate = event.candidate
signalingChannel.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}));
}
};
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
30

31. RTCPeerConnection.onaddstream
function createPeerConnection(){
peerConn = peerConn || new RTCPeerConnection(defaultIceServer);
peerConn.onicecandidate = onIceCandidate;
peerConn.onaddstream = onRemoteStreamAdded;
}
function onRemoteStreamAdded(ev){
attachMediaStream(remoteVideo,ev.stream);
}
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
31

32. dataChannel
●
Creazione del canale (offerer):
–
var channel = peerConn.createDataChannel(channelName, channelOptions);
●
channelName: stringa che identifica il canale
●
channelOptions: non utilizzata {};
–
–
channel.onerror = function(err){track(err)}
–
channel.onmessage = function(ev){track(ev.data)}
–
●
channel.onopen = function(ev){...}
channel.onclose = function(ev){...}
Acquisizione del Canale (answerer)
–
●
peerConn.ondatachannel = function (e) {
e.channel.onmessage = function () { … };
}
Spedizione del Messaggio
–
channel.send(msg);
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
32

33. 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
13 Novembre 2013
Giuseppe Dongu - Smyrtle Cyber Security
33