Talk di Alberto Mancini e Francesca Tosi a alla GWTcon 2014.

1. GWT videocall:
power-up your mobile & web
app with WebRTC
Francesca Tosi Alberto Mancini
francesca@jooink.com alberto@jooink.com

2. Francesca
Web and mobile developer
software engineer and architect
with a passion for clean code
and fine tuned details
francesca@jooink.com
@francescatosi
+FrancescaTosi

3. Alberto
Software Developer (Web &
Mobile);
Linux Sysadmin
DevOps
alberto@jooink.com
+AlbertoMancini

4. POV
WEB
GWT
mGWT
Web is good
Web in js with GWT is better
Web in GWT running on mobile
(mGWT) is even better

5. POV
HTML5:
WebRTC

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

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

8. WebRTC
get
Audio/Video
p2p
communication
Acquiring Audio/Video stream
navigator.getUserMedia(constraints,
successCallback,
errorCallback);

9. Browser based computation
Augmented
Reality browser
based
Picshare
NyARToolkit +
GWT-nyartoolkit

10. Browser Based
Computation
Why GWT is
needed!
Picshare
NyARToolkit +
GWT-nyartoolkit
<video/>
<canvas/>
Ny
HTTP

11. Browser based computation
Why GWT is
needed!
Computer vision
Boofcv

12. WebRTC
get
Audio/Video
p2p
communication
Peer-to-Peer
communication
between browsers
RTCPeerConnection
RTCDataChannel

13. WebRTC
disruptive
JS api
Serverless
web ?

14. WebRTC
Signaling

15. WebRTC
STUN

16. WebRTC
TURN

17. Ora tocca ad Alberto
RPCPeerConnection

18. WebRTC
Signaling

19. WebRTC, signaling
Signal - WHAT ?

20. WebRTC, signaling
needs a
communication
channel (push-like)

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

23. IMPLMENT, Channel
Channel GAE Channel -> EventBUS
onMessage() {
//decode
bus.fire(new MessageEvent(...));
}

24. 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 );
}-*/;

25. 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();

26. Why WebRTC ?
Free
Open
widely-supported
native on
Andoid
iOS
avail. impl.
C++/Java/...

27. Why WebRTC ?
Plugins for IE
e.g.
Temasys
provides ad
ad hoc crafted
replacement of
adapter.js

28. mGWT 2.0
GWT
Widgets & more
for mobile
well, Daniel
afterwards will
explain better:
he is the author

29. FirefoxOS
Web developers
preferred
mobile OS ?
B2G

30. That’s All !!
Francesca Tosi
R&D at Jooink Team
francesca@jooink.com
Alberto Mancini
Dev at Jooink Team
alberto@jooink.com