The document discusses using WebRTC to add real-time communication capabilities to web and mobile apps. It describes how WebRTC allows peer-to-peer audio and video calls between browsers using JavaScript APIs. It also discusses how GWT can help build WebRTC functionality and the need for signaling to coordinate communication between peers.

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