power-up your mobile & web app with webrtc
TRANSCRIPT
www.JooinK.comFRANCESCA TOSI
POWER-UP YOUR MOBILE & WEB APP WITH WebRTC
FRANCESCA [email protected]
Alberto [email protected]
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
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
Agenda!!
4
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
WebRTC
6
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
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)
?
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)
?
11
Once upon a time …
www.JooinK.comFRANCESCA TOSI
Once upon a time ...
Browsers
(js-)applications were sandboxed and kept far away from the hosting computer’s resources.
www.JooinK.comFRANCESCA TOSI
Once upon a time ...
Browsers
(js-)applications were sandboxed and kept far away from the hosting computer’s resources.
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
Nowadays … HTML5
15
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
www.JooinK.comFRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application cannot
➔ acquire audio and video
➔ communicate P2P
www.JooinK.comFRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application can
➔ acquire audio and video
➔ communicate P2P
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.”
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.”
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
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
www.JooinK.comFRANCESCA TOSI
-
WebRTC across platform
● Chrome ● Firefox ● Opera● Native Java and Obj-C
HTML5 ha cambiato il modo di pensare
il web e le applicazioni
24
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
Is WebRTC a disruptive API!!
26
www.JooinK.comFRANCESCA TOSI
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
PRIMASERVER
www.JooinK.comFRANCESCA TOSI
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
WebRTC
DOPO
WebRTC Anatomy
29
www.JooinK.comFRANCESCA TOSI
-
WebRTC JS-API
● Acquisizione Audio-Video
● Trasmissione (RTC)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
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 [{... }]}
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 [{... }]}
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - errorCallback
function errorCallback(error) { console.log("error: ", error);}
;-)
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints, successCallback,errorCallback);
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.
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)
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);
www.JooinK.comFRANCESCA TOSI
RtcPEERCONNECTION
WebRTC JS-API
RTCPeerConnection
→getUserMedia
+RTCPeerConnection
←
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: ...};
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);}
WebRTC nel mondo reale
45
www.JooinK.comFRANCESCA TOSI
RTCPeerConnection
Schema di una comunicazione P2P Serverless
Project-P
51
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”
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
55
WebRTC - Applications Examples
www.JooinK.comFRANCESCA TOSI
Application Sample
Comunicazione P2P Serverless
...● Video chat:
○ SimpleWebRTC○ easyRTC○ webRTC.io
● Peer-to-peer data:○ PeerJS○ Sharefes○ GlirUp
www.JooinK.comFRANCESCA TOSI
JooinK VideoCall
Our sample
http://jooinkvideocall.appspot.com
GWT WebRTC
Hands-on
58
www.JooinK.comFRANCESCA TOSI
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
Live Demo
http://goo.gl/7X91Ie
www.JooinK.comFRANCESCA TOSI
RTCPeerConnection
WebRTC JS-API
Live Demo - 2
https://apprtc.appspot.com
https://github.com/webrtc/apprtc
www.JooinK.comFRANCESCA TOSI
-
That’s all folks!
Francesca [email protected]
Alberto [email protected]
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