Tech Webinar: Power up your mobile & Web App con WebRTC

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

www.JooinK.com
FRANCESCA TOSI
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

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

www.JooinK.com
FRANCESCA 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

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

www.JooinK.com
FRANCESCA TOSI
WebRTC
Cos’è WebRTC
source: webrtc.
org

www.JooinK.com
FRANCESCA 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.com
FRANCESCA 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)
?

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

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

www.JooinK.com
FRANCESCA 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.com
FRANCESCA TOSI
aka HTML5
Browser Piercing
a Javascript Application cannot
➔ acquire audio and video
➔ communicate P2P

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

www.JooinK.com
FRANCESCA 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.com
FRANCESCA TOSI
-
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.com
FRANCESCA TOSI
-
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.com
FRANCESCA TOSI
-
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.com
FRANCESCA 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.com
FRANCESCA 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.com
FRANCESCA TOSI
WEBRTC E’ UNA DISRUPTIVE API
Connessione fra browser
PRIMASERVER

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

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

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

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

www.JooinK.com
FRANCESCA TOSI
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.com
FRANCESCA TOSI
WebRTC JS-API
getUserMedia - constraints
● Controls the contents of the MediaStream
● Media type, resolution, frame rate
video: {
mandatory: { chromeMediaSource: ‘screen’ },
optional [{... }]
}

www.JooinK.com
FRANCESCA TOSI
WebRTC JS-API
getUserMedia - errorCallback
function errorCallback(error) {
console.log("error: ", error);
}
;-)

www.JooinK.com
FRANCESCA TOSI
WebRTC JS-API
getUserMedia - successCallback
function successCallback(stream) {
...
}
stream: MediaStream; a flux of audio- or video-
related data.

www.JooinK.com
FRANCESCA TOSI
WebRTC JS-API
getUserMedia - successCallback
var video = ...
video.src =
window.URL.createObjectURL(stream);
}
(W3C File API)

www.JooinK.com
FRANCESCA TOSI
WebRTC JS-API
full sample
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.com
FRANCESCA TOSI
RtcPEERCONNECTION
WebRTC JS-API
RTCPeerConnection
→
getUserMedia
+
RTCPeerConnection
←

www.JooinK.com
FRANCESCA 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.com
FRANCESCA 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);
}

www.JooinK.com
FRANCESCA TOSI
RTCPeerConnection
Schema di una comunicazione P2P Serverless

www.JooinK.com
FRANCESCA TOSI
RTCPeerConnection
Comunicazione P2P Serverless

www.JooinK.com
FRANCESCA 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.com
FRANCESCA 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

www.JooinK.com
FRANCESCA TOSI
UN ESEMPIO
Project-P

55
WebRTC - Applications Examples

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

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

www.JooinK.com
FRANCESCA TOSI
WebRTC JS-API
Live Demo
http://goo.gl/7X91Ie

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

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

www.JooinK.com
FRANCESCA TOSI
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

Tech Webinar: Power up your mobile & Web App con WebRTC

Recommandé

Recommandé

Contenu connexe

Similaire à Tech Webinar: Power up your mobile & Web App con WebRTC

Similaire à Tech Webinar: Power up your mobile & Web App con WebRTC (20)

Plus de Codemotion

Plus de Codemotion (20)

Dernier

Dernier (20)

Tech Webinar: Power up your mobile & Web App con WebRTC