power-up your mobile & web app with webrtc
TRANSCRIPT
![Page 1: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/1.jpg)
www.JooinK.comFRANCESCA TOSI
POWER-UP YOUR MOBILE & WEB APP WITH WebRTC
FRANCESCA [email protected]
Alberto [email protected]
![Page 2: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/2.jpg)
www.JooinK.comFRANCESCA TOSI
Francesca TosiSomething about me!!!
FREELANCE- WEB & MOBILE DEVELOPER- SOFTWARE ENGINEER - SOFTWARE ARCHITECT WITH A
PASSION FOR CLEAN CODE AND FINE TUNED DETAILS.
#JOOINK TEAM #GDG-FIRENZE #GDG-ANCONA#INTEL SOFTWARE INNOVATOR#GWTCON
[email protected]@FRANCESCATOSI
![Page 3: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/3.jpg)
www.JooinK.comFRANCESCA TOSI
Alberto ManciniAbout Alberto!
FREELANCE - SOFTWARE DEVELOPER
(WEB&MOBILE)- LINUX SYSADMIN- DEVOPS
#JOOINK TEAM #GDG-FIRENZE #INTEL SOFTWARE INNOVATOR#GWTCON
[email protected]+AlbertoMancini
![Page 4: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/4.jpg)
Agenda!!
4
![Page 5: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/5.jpg)
www.JooinK.comFRANCESCA TOSI
Power-up your mobile & web app with WebRTC
Agenda
• COME HTML5 HA CAMBIATO IL MODO DI PENSARE IL WEB E LE APPLICAZIONI
• PERCHE’ WEBRTC E’ UNA DISRUPTIVE API
• ANATOMIA DI WEBRTC
• SCHEMA DI UNA COMUNICAZIONE P2P SERVERLESS
• WEBRTC NEL MONDO REALE: INFRASTRUTTURA E NAT TRAVERSAL
• PROJECT-P: WEB-BASED MESH LIKE NETWORK
• WEBRTC: HANDS ON
![Page 6: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/6.jpg)
WebRTC
6
![Page 7: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/7.jpg)
www.JooinK.comFRANCESCA TOSI
Plug-in free real-time communication …
WebRTC is a free, open project that enables web browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple Javascript APIs.
source: webrtc.org
WebRTCCos’è WebRTC
![Page 9: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/9.jpg)
www.JooinK.comFRANCESCA TOSI
What’s ?!?!?
WebRTC
Just another JS API
or
WebRTC is a new front in the long war for an open and unencumbered web
Brendan Eich (Mozilla CTO and inventor of JavaScript)
?
![Page 10: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/10.jpg)
www.JooinK.comFRANCESCA TOSI
Disruptive API
WebRTC
Just another JS API
or
WebRTC is a new front in the long war for an open and unencumbered web
Brendan Eich (Mozilla CTO and inventor of JavaScript)
?
![Page 11: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/11.jpg)
11
Once upon a time …
![Page 12: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/12.jpg)
www.JooinK.comFRANCESCA TOSI
Once upon a time ...
Browsers
(js-)applications were sandboxed and kept far away from the hosting computer’s resources.
![Page 13: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/13.jpg)
www.JooinK.comFRANCESCA TOSI
Once upon a time ...
Browsers
(js-)applications were sandboxed and kept far away from the hosting computer’s resources.
![Page 14: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/14.jpg)
www.JooinK.comFRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application cannot
➔ access the filesystem
➔ open full-duplex socket connections
➔ use graphics accelerator
➔ span multiple threads
![Page 15: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/15.jpg)
Nowadays … HTML5
15
![Page 16: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/16.jpg)
www.JooinK.comFRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application can
➔ access the filesystem → FileAPI
➔ open f/d socket connections → WebSockets
➔ use graphics accelerator → WebGL
➔ span multiple threads → WebWorkers
![Page 17: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/17.jpg)
www.JooinK.comFRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application cannot
➔ acquire audio and video
➔ communicate P2P
![Page 18: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/18.jpg)
www.JooinK.comFRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application can
➔ acquire audio and video
➔ communicate P2P
![Page 19: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/19.jpg)
www.JooinK.comFRANCESCA TOSI
-
WebRTC … secure enough?
“… WebRTC has encryption baked right into it; there's actually no way to send unencrypted media using a WebRTC implementation … both Chrome and Firefox implement.”
![Page 20: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/20.jpg)
www.JooinK.comFRANCESCA TOSI
-
WebRTC … secure enough?
But ...
“If the developers fail to carefully consider the security implications of their choices, the safeguards mandated by the specification will not be enough to guarantee the security of their WebRTC-based applications and the users.”
![Page 21: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/21.jpg)
www.JooinK.comFRANCESCA TOSI
-
WebRTC … secure enough?
Do not ...
“... it would be very easy to inadvertently click on something that gave camera or microphone control to someone I don't know and don't care to know.”
Courtney Sato - nerd queen @ConstellationRG
![Page 22: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/22.jpg)
www.JooinK.comFRANCESCA TOSI
-
WebRTC … secure enough?
See also:
WebRTC: APIs, Protocols and Security Considerations - Part 1 / Part 2
WebRTC Security and Confidentiality
Security Considerations for WebRTC
WebRTC Security Architecture
![Page 23: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/23.jpg)
www.JooinK.comFRANCESCA TOSI
-
WebRTC across platform
● Chrome ● Firefox ● Opera● Native Java and Obj-C
![Page 24: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/24.jpg)
HTML5 ha cambiato il modo di pensare
il web e le applicazioni
24
![Page 25: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/25.jpg)
www.JooinK.comFRANCESCA TOSI
HTML5 ha cambiato il modo di pensare il web e le applicazioni
HTML5 API
Le api html5 ci aiutano ad avere delle applicazioni web
- interattive - ricche di features- performanti
senza
… senza flash… senza applets… senza plugins
![Page 26: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/26.jpg)
Is WebRTC a disruptive API!!
26
![Page 27: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/27.jpg)
www.JooinK.comFRANCESCA TOSI
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
PRIMASERVER
![Page 28: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/28.jpg)
www.JooinK.comFRANCESCA TOSI
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
WebRTC
DOPO
![Page 29: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/29.jpg)
WebRTC Anatomy
29
![Page 31: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/31.jpg)
www.JooinK.comFRANCESCA TOSI
-
WebRTC JS-API
● Acquisizione Audio-Video
● Trasmissione (RTC)
![Page 32: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/32.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
![Page 33: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/33.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
![Page 34: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/34.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - constraints
● Controls the contents of the MediaStream● Media type, resolution, frame rate
var constraints = {video: true};
video: { mandatory: { ... }, optional [{... }]}
![Page 35: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/35.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - constraints
● Controls the contents of the MediaStream● Media type, resolution, frame rate
var constraints = {video: true};
video: { mandatory: { chromeMediaSource: ‘screen’ }, optional [{... }]}
![Page 36: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/36.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
![Page 37: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/37.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - errorCallback
function errorCallback(error) { console.log("error: ", error);}
;-)
![Page 38: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/38.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
![Page 39: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/39.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - successCallback
function successCallback(stream) { ...}
stream: MediaStream; a flux of audio- or video-related data.
![Page 40: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/40.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - successCallback
function successCallback(stream) { var video = ... video.src =
window.URL.createObjectURL(stream);
}
(W3C File API)
![Page 41: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/41.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
full sample
var constraints = {video: true};
function successCallback(stream) { var video = document.querySelector("video"); video.src = window.URL.createObjectURL(stream);}
function errorCallback(error) { console.log("navigator.getUserMedia error: ", error);}
navigator.getUserMedia(constraints, successCallback, errorCallback);
![Page 42: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/42.jpg)
www.JooinK.comFRANCESCA TOSI
RtcPEERCONNECTION
WebRTC JS-API
RTCPeerConnection
→getUserMedia
+RTCPeerConnection
←
![Page 43: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/43.jpg)
www.JooinK.comFRANCESCA TOSI
RTCDataChannel
WebRTC JS-API
RTCDataChannel
Bidirectional communication of arbitrary data
var position = {x: 3.0, y: -2.0};
...var message = {txt: ‘...’, timestamp: ...};
![Page 44: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/44.jpg)
www.JooinK.comFRANCESCA TOSI
RTCPeerConnection sample
WebRTC JS-API
pc = new RTCPeerConnection(null);pc.onaddstream = gotRemoteStream;pc.addStream(localStream);pc.createOffer(gotOffer);
function gotOffer(desc) { pc.setLocalDescription(desc); sendOffer(desc);}
function gotAnswer(desc) { pc.setRemoteDescription(desc);}
function gotRemoteStream(e) { attachMediaStream(remoteVideo, e.stream);}
![Page 45: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/45.jpg)
WebRTC nel mondo reale
45
![Page 46: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/46.jpg)
www.JooinK.comFRANCESCA TOSI
RTCPeerConnection
Schema di una comunicazione P2P Serverless
![Page 51: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/51.jpg)
Project-P
51
![Page 52: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/52.jpg)
www.JooinK.comFRANCESCA TOSI
SHORT DESCRIPTION
Project-P
Project-P (http://ozan.io/p/)
P è un framework utilizzato per creare P2P network (non solo delle semplici connessioni)
Con P è possibile:
- connettersi con un altro browser con un semplice “WebSocket server”
![Page 53: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/53.jpg)
www.JooinK.comFRANCESCA TOSI
SHORT DESCRIPTION
Project-P
Project-P (http://ozan.io/p/)
P è un framework utilizzato per creare P2P network (non solo delle semplici connessioni)
Con P è possibile:
- connettersi con un altro browser utilizzando delle delle connessioni esistenti con altri browser. Questo è quello che rende P unico → abilita connessioni transitive attraverso peers, consentendo la creazione in modo semplice di mesh networks
Tutto attraverso WebRTC
![Page 55: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/55.jpg)
55
WebRTC - Applications Examples
![Page 56: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/56.jpg)
www.JooinK.comFRANCESCA TOSI
Application Sample
Comunicazione P2P Serverless
...● Video chat:
○ SimpleWebRTC○ easyRTC○ webRTC.io
● Peer-to-peer data:○ PeerJS○ Sharefes○ GlirUp
![Page 57: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/57.jpg)
www.JooinK.comFRANCESCA TOSI
JooinK VideoCall
Our sample
http://jooinkvideocall.appspot.com
GWT WebRTC
![Page 58: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/58.jpg)
Hands-on
58
![Page 59: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/59.jpg)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
Live Demo
http://goo.gl/7X91Ie
![Page 60: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/60.jpg)
www.JooinK.comFRANCESCA TOSI
RTCPeerConnection
WebRTC JS-API
Live Demo - 2
https://apprtc.appspot.com
https://github.com/webrtc/apprtc
![Page 61: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/61.jpg)
www.JooinK.comFRANCESCA TOSI
-
That’s all folks!
Francesca [email protected]
Alberto [email protected]
![Page 62: Power-up your mobile & web App with WebRTC](https://reader034.vdocuments.net/reader034/viewer/2022042716/55a776a71a28ab530a8b459f/html5/thumbnails/62.jpg)
www.JooinK.comFRANCESCA TOSI
Website: training.codemotion.itE-mail: [email protected]: @codemotionTRMobile: 349 4400619Adress: Via G. Giolitti, 34, 00185 Roma
“L’istruzione è l’arma più potente che puoi usare per cambiare il mondo”
Nelson Mandela
Continuos Innovative Learning for Geeks