Power-up your mobile & web App with WebRTC Francesca Tosi & Alberto Mancini JooinK Team - www.jooink.com Codemotion Tech Webinar

1. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
POWER-UP YOUR MOBILE & WEB APP
WITH WebRTC
FRANCESCA TOSI
francesca@jooink.com
Alberto Mancini
alberto@jooink.com

2. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
Francesca Tosi
Something 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
FRANCESCA@JOOINK.COM
@FRANCESCATOSI

3. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
Alberto Mancini
About Alberto!
FREELANCE
- SOFTWARE DEVELOPER
(WEB&MOBILE)
- LINUX SYSADMIN
- DEVOPS
#JOOINK TEAM
#GDG-FIRENZE
#INTEL SOFTWARE INNOVATOR
#GWTCON
ALBERTO@JOOINK.COM
+AlbertoMancini

4. Agenda!!
4

5. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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

6. WebRTC
6

7. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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
WebRTC
Cos’è WebRTC

8. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
WebRTC
Cos’è WebRTC
source: webrtc.
org

9. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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)
?

10. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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. 11
Once upon a time …

12. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
Once upon a time ...
Browsers
(js-)applications were
sandboxed and kept far
away from the hosting
computer’s resources.

13. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
Once upon a time ...
Browsers
(js-)applications were
sandboxed and kept far
away from the hosting
computer’s resources.

14. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
aka HTML5
Browser Piercing
a Javascript Application cannot
➔ access the filesystem
➔ open full-duplex socket connections
➔ use graphics accelerator
➔ span multiple threads

15. Nowadays … HTML5
15

16. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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

17. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
aka HTML5
Browser Piercing
a Javascript Application cannot
➔ acquire audio and video
➔ communicate P2P

18. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
aka HTML5
Browser Piercing
a Javascript Application can
➔ acquire audio and video
➔ communicate P2P

19. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
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.”

20. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
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.”

21. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
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

22. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
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

23. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
WebRTC across platform
● Chrome
● Firefox
● Opera
● Native Java and Obj-C

24. HTML5 ha cambiato
il modo di pensare
il web e le applicazioni
24

25. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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

26. Is WebRTC a disruptive API!!
26

27. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
PRIMASERVER

28. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
WebRTC
DOPO

29. WebRTC Anatomy
29

30. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ANATOMIA WEBRTC
WebRTC JS-API
Some Code
&
Structure

31. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
WebRTC JS-API
● Acquisizione Audio-Video
● Trasmissione (RTC)

32. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints,
successCallback,
errorCallback);

33. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints,
successCallback,
errorCallback);

34. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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 [{... }]
}

35. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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 [{... }]
}

36. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints,
successCallback,
errorCallback);

37. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - errorCallback
function errorCallback(error) {
console.log("error: ", error);
}
;-)

38. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia
navigator.getUserMedia(constraints,
successCallback,
errorCallback);

39. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - successCallback
function successCallback(stream) {
...
}
stream: MediaStream; a flux of audio- or video-
related data.

40. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
getUserMedia - successCallback
function successCallback(stream) {
var video = ...
video.src =
window.URL.createObjectURL(stream);
}
(W3C File API)

41. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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);

42. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RtcPEERCONNECTION
WebRTC JS-API
RTCPeerConnection
→
getUserMedia
+
RTCPeerConnection
←

43. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCDataChannel
WebRTC JS-API
RTCDataChannel
Bidirectional communication of arbitrary data
var position = {x: 3.0, y: -2.0};
...
var message = {txt: ‘...’, timestamp: ...};

44. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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);
}

45. WebRTC nel mondo reale
45

46. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCPeerConnection
Schema di una comunicazione P2P Serverless

47. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCPeerConnection
Comunicazione P2P Serverless

48. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCPeerConnection
Comunicazione P2P Serverless

49. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCPeerConnection
Comunicazione P2P Serverless

50. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCPeerConnection
Comunicazione P2P Serverless

51. Project-P
51

52. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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”

53. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
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

54. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
UN ESEMPIO
Project-P

55. 55
WebRTC - Applications Examples

56. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
Application Sample
Comunicazione P2P Serverless
...
● Video chat:
○ SimpleWebRTC
○ easyRTC
○ webRTC.io
● Peer-to-peer data:
○ PeerJS
○ Sharefes
○ GlirUp

57. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
JooinK VideoCall
Our sample
http://jooinkvideocall.appspot.com
GWT WebRTC

58. Hands-on
58

59. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
ACQUIRING VIDEO AND AUDIO
WebRTC JS-API
Live Demo
http://goo.gl/7X91Ie

60. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
RTCPeerConnection
WebRTC JS-API
Live Demo - 2
https://apprtc.appspot.com
https://github.com/webrtc/apprtc

61. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
-
That’s all folks!
Francesca Tosi
francesca@jooink.com
Alberto Mancini
alberto@jooink.com

62. www.JooinK.com
FRANCESCA TOSI
francesca@jooink.com
Website: training.codemotion.it
E-mail: training@codemotion.it
Tw: @codemotionTR
Mobile: 349 4400619
Adress: 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