Power-up your mobile & web App with WebRTC

www.JooinK.comFRANCESCA TOSI

francesca@jooink.com

POWER-UP YOUR MOBILE & WEB APP WITH WebRTC

FRANCESCA TOSIfrancesca@jooink.com

Alberto Mancinialberto@jooink.com

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

FRANCESCA@JOOINK.COM@FRANCESCATOSI

Alberto ManciniAbout Alberto!

FREELANCE - SOFTWARE DEVELOPER

(WEB&MOBILE)- LINUX SYSADMIN- DEVOPS

#JOOINK TEAM #GDG-FIRENZE #INTEL SOFTWARE INNOVATOR#GWTCON

ALBERTO@JOOINK.COM+AlbertoMancini

Agenda!!

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

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

source: webrtc.org

What’s ?!?!?

WebRTC

Just another JS API

WebRTC is a new front in the long war for an open and unencumbered web

Brendan Eich (Mozilla CTO and inventor of JavaScript)

Disruptive API

WebRTC

Just another JS API

WebRTC is a new front in the long war for an open and unencumbered web

Brendan Eich (Mozilla CTO and inventor of JavaScript)

Once upon a time …

Once upon a time ...

Browsers

(js-)applications were sandboxed and kept far away from the hosting computer’s resources.

Once upon a time ...

Browsers

(js-)applications were sandboxed and kept far away from the hosting computer’s resources.

aka HTML5

Browser Piercing

a Javascript Application cannot

➔ access the filesystem

➔ open full-duplex socket connections

➔ use graphics accelerator

➔ span multiple threads

Nowadays … HTML5

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

aka HTML5

Browser Piercing

a Javascript Application cannot

➔ acquire audio and video

➔ communicate P2P

aka HTML5

Browser Piercing

a Javascript Application can

➔ acquire audio and video

➔ communicate P2P

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.”

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.”

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

See also:

WebRTC: APIs, Protocols and Security Considerations - Part 1 / Part 2

WebRTC Security and Confidentiality

Security Considerations for WebRTC

WebRTC Security Architecture

WebRTC across platform

● Chrome ● Firefox ● Opera● Native Java and Obj-C

HTML5 ha cambiato il modo di pensare

il web e le applicazioni

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 flash… senza applets… senza plugins

Is WebRTC a disruptive API!!

WEBRTC E’ UNA DISRUPTIVE API

Connessione fra browser

PRIMASERVER

WEBRTC E’ UNA DISRUPTIVE API

Connessione fra browser

WebRTC

WebRTC Anatomy

ANATOMIA WEBRTC

WebRTC JS-API

Some Code & Structure

WebRTC JS-API

● Acquisizione Audio-Video

● Trasmissione (RTC)

ACQUIRING VIDEO AND AUDIO

WebRTC JS-API

getUserMedia

navigator.getUserMedia(constraints, successCallback,errorCallback);

WebRTC JS-API

getUserMedia

WebRTC JS-API

getUserMedia - constraints

● Controls the contents of the MediaStream● Media type, resolution, frame rate

var constraints = {video: true};

video: { mandatory: { ... }, optional [{... }]}

WebRTC JS-API

getUserMedia - constraints

● Controls the contents of the MediaStream● Media type, resolution, frame rate

video: { mandatory: { chromeMediaSource: ‘screen’ }, optional [{... }]}

WebRTC JS-API

getUserMedia

WebRTC JS-API

getUserMedia - errorCallback

function errorCallback(error) { console.log("error: ", error);}

WebRTC JS-API

getUserMedia

WebRTC JS-API

getUserMedia - successCallback

function successCallback(stream) { ...}

stream: MediaStream; a flux of audio- or video-related data.

WebRTC JS-API

getUserMedia - successCallback

function successCallback(stream) { var video = ... video.src =

window.URL.createObjectURL(stream);

(W3C File API)

WebRTC JS-API

full sample

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);

RtcPEERCONNECTION

WebRTC JS-API

RTCPeerConnection

→getUserMedia

+RTCPeerConnection

RTCDataChannel

WebRTC JS-API

RTCDataChannel

Bidirectional communication of arbitrary data

var position = {x: 3.0, y: -2.0};

...var message = {txt: ‘...’, timestamp: ...};

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

RTCPeerConnection

Schema di una comunicazione P2P Serverless

RTCPeerConnection

Comunicazione P2P Serverless

RTCPeerConnection

Project-P

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”

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

UN ESEMPIO

Project-P

WebRTC - Applications Examples

Application Sample

...● Video chat:

○ SimpleWebRTC○ easyRTC○ webRTC.io

● Peer-to-peer data:○ PeerJS○ Sharefes○ GlirUp

JooinK VideoCall

Our sample

http://jooinkvideocall.appspot.com

GWT WebRTC

Hands-on

WebRTC JS-API

Live Demo

http://goo.gl/7X91Ie

RTCPeerConnection

WebRTC JS-API

Live Demo - 2

https://apprtc.appspot.com

https://github.com/webrtc/apprtc

That’s all folks!

Francesca Tosifrancesca@jooink.com

Alberto Mancinialberto@jooink.com

Website: training.codemotion.itE-mail: training@codemotion.itTw: @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

Power-up your mobile & web App with WebRTC

Technology

Pros of mobile app marketing, mobile app development

How to Monetize WebRTC Mobile Services (Paris, Dec 2014)

Mobile app Description characteristics · mobile app and mobile app developers have increasing opportunities to monetize such an app. Mobile phones, and thus mobile apps, are becoming

Cisco Meeting Server...Cisco Meeting App WebRTC Important information guide. All of the information relevant to the WebRTC app has been combined into one document, and is no longer

Cisco Meeting App Troubleshooter · Troubleshooterfordesktopandmobileapps,WebRTC,andSIPendpoints :Troubleshooter 3 7.3Participantisreceivingcorruptedaudio 16 7.4Echoonthecall 17 7.5Backgroundnoise

Mobile App Development Company - Mobile App Developers

Mobile Performance from Radio Up WebRTC

IMS Value in a World of WebRTC and Mobile -- WebRTC Expo, Santa Clara, CA (Nov 2013)

Yo pet - building a webRTC app in 20 mins

How WebRTC is Altering the Landscape for Mobile UC & BYOD

Mobile app development services | Mobile App

Friday, 6th October 2017 WebRTC · WebRTC Developing of a low-latency, high-scalable and real-time video App for social media ... Each user can utilize the App to showcase their talents

Blacc Spot Media - Press Kit - WebRTC Development for Mobile & Web

Page 1 of 12 · Firefox Os App Dev And Hackathon Android Mobile App Development Android Mobile App Development Android Mobile App Development Android Mobile App Development ... Uniface

GWT videocall: power-up your mobile & web app with WebRTC

Building Faster Mobile Websites WebRTC - Ilya Grigorik

Proposed WebRTC Security Architecture - ietf. · PDF fileProposed WebRTC Security Architecture IETF 82 Eric Rescorla ... Server Bob o Calling App Calling ... IETF 82 WebRTC Security

WebRTC Building Faster Mobile Websites

Refine Interactive | Mobile App Development | Mobile App Design

Table of Contentsimages.tmcnet.com/expo/webrtc/pdf/WebRTC_WhitePaperEco.pdfpre-loading an app from an app store, an “app” can come as part of a HTML5/WebRTC JavaScript page and