gwt videocall: power-up your mobile & web app with webrtc

GWT videocall:

power-up your mobile & web

app with WebRTC

Francesca Tosi Alberto Mancini

francesca@jooink.com alberto@jooink.com

Francesca

Web and mobile developer

software engineer and architect

with a passion for clean code

and fine tuned detailsfrancesca@jooink.com@francescatosi+FrancescaTosi

Alberto

Software Developer (Web &

Mobile);

Linux Sysadmin

DevOpsalberto@jooink.com+AlbertoMancini

POV

WEB

GWT

mGWT

Web is good

Web in js with GWT is better

Web in GWT running on mobile (mGWT) is even better

POV

HTML5:

WebRTC

WebRTC

Plug-in free real-time communication

WebRTC is a free, open project that enables web browsers with Real-Time Communications (RTC) capabilities via simple Javascript APIs.

source: webrtc.org

WebRTC

JS API ?

or

The future of the Web ?

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)

WebRTC

get Audio/Video

p2p communication

Acquiring Audio/Video stream

navigator.getUserMedia(constraints,successCallback,errorCallback);

Browser based computation

Augmented Reality browser based

Picshare

NyARToolkit + GWT-nyartoolkit

Why GWT is needed!

Picshare

NyARToolkit + GWT-nyartoolkit

Browser Based

Computation

<video/>

<canvas/>

Ny

HTTP

Browser based computation

Why GWT is needed!

Computer vision

Boofcv

WebRTC

get Audio/Video

p2p communication

Peer-to-Peercommunication

between browsers

RTCPeerConnectionRTCDataChannel

WebRTC

disruptiveJS api

Serverless web ?

WebRTC

Signaling

WebRTC

STUN

WebRTC

TURN

Ora tocca ad Alberto

RPCPeerConnection

WebRTC

Signaling

WebRTC, signaling

Signal - WHAT ?

WebRTC, signaling

needs a communication channel (push-like)

signaling

~ 15 object types

~ 4 event types (just for RTCPc)

~ 6 async methods

void createOffer(OfferHandler callback … ) /*-{

void createAnswer(AnswerHandler callback … ) /*-{

void setLocalDescription(..., DescriptionHandler callback) /*-{

void setRemoteDescription(..., DescriptionHandler cb) /*-{

void addIceCandidate(..., CandidateHandler callback) /*-{

+Mediastreams handling

IMPLMENT, Channel

Channel GAE Channel -> EventBUS

onMessage() {//decodebus.fire(new MessageEvent(...));

}

IMPLMENT

JSNI/JSinterop public final native void

createOffer(OfferHandler callback , OfferConstraints constraints) /*-{this.createOffer(

function(s) { $entry(callback.@...OfferHandler::onCreateOfferSuccess(*)(s));

}, function(e) {

$entry(callback.@....adapterjs.OfferHandler::onCreateOfferError(*)(e.toString()));

}, constraints );

}-*/;

ADAPTER.JS

Cancel API incompatibilities between browsers

Part of the Chrome/Firefox interoperability sample app

...@Source("adapter.js")TextResource adapterjs();

...ScriptInjector.fromString(

AdapterjsResources.INSTANCE.adapterjs().getText() )

.setWindow(ScriptInjector.TOP_WINDOW)

.inject();

Why WebRTC ?

FreeOpenwidely-supported

native on AndoidiOS

avail. impl.C++/Java/...

Why WebRTC ?

Plugins for IE

e.g.

Temasysprovides ad ad hoc craftedreplacement ofadapter.js

mGWT 2.0

GWT Widgets & morefor mobile

well, Daniel afterwards will explain better:he is the author

FirefoxOS

Web developerspreferredmobile OS ?

B2G

That’s All !!

Francesca TosiR&D at Jooink Teamfrancesca@jooink.com

Alberto ManciniDev at Jooink Teamalberto@jooink.com