Web RTC: Nato per comunicare

1,385 views
1,282 views

Published on

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.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,385
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web RTC: Nato per comunicare

  1. 1. WebRTC Nato per Comunicare 13 Novembre 2013 Giuseppe Dongu - Smyrtle Cyber Security 1
  2. 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. 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. 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. 5. Senza WebRTC 13 Novembre 2013 Giuseppe Dongu - Smyrtle Cyber Security 5
  6. 6. Con WebRTC 13 Novembre 2013 Giuseppe Dongu - Smyrtle Cyber Security 6
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 18. Ricapitolando 13 Novembre 2013 Giuseppe Dongu - Smyrtle Cyber Security 18
  19. 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. 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. 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. 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. 23. Mettendo tutto insieme 13 Novembre 2013 Giuseppe Dongu - Smyrtle Cyber Security 23
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×