Web RTC: Nato per comunicare
3 likes2,157 views
WebRTC è una tecnologia che consente comunicazioni in tempo reale tra browser tramite API standard e HTML5, sviluppata da organizzazioni come W3C e IETF. Attualmente è in fase pre-standard, con caratteristiche come la trasmissione sicura di voce e video, l'interoperabilità con sistemi VoIP, e supporto per codec audio e video vari. I protocolli STUN, TURN e ICE vengono utilizzati per superare le limitazioni del NAT e garantire connessioni peer-to-peer affidabili.
![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](https://image.slidesharecdn.com/webrtc-131116094430-phpapp01/85/Web-RTC-Nato-per-comunicare-8-320.jpg)
![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](https://image.slidesharecdn.com/webrtc-131116094430-phpapp01/85/Web-RTC-Nato-per-comunicare-15-320.jpg)
![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](https://image.slidesharecdn.com/webrtc-131116094430-phpapp01/85/Web-RTC-Nato-per-comunicare-27-320.jpg)
Web RTC: Nato per comunicare
- 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
- 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
- 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
- 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
- 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