gwt videocall: power-up your mobile & web app with webrtc
DESCRIPTION
Talk di Alberto Mancini e Francesca Tosi a alla GWTcon 2014.TRANSCRIPT
![Page 1: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/1.jpg)
GWT videocall:
power-up your mobile & web
app with WebRTC
Francesca Tosi Alberto Mancini
![Page 2: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/2.jpg)
Francesca
Web and mobile developer
software engineer and architect
with a passion for clean code
and fine tuned [email protected]@francescatosi+FrancescaTosi
![Page 4: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/4.jpg)
POV
WEB
GWT
mGWT
Web is good
Web in js with GWT is better
Web in GWT running on mobile (mGWT) is even better
![Page 5: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/5.jpg)
POV
HTML5:
WebRTC
![Page 6: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/6.jpg)
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
![Page 7: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/7.jpg)
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)
![Page 8: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/8.jpg)
WebRTC
get Audio/Video
p2p communication
Acquiring Audio/Video stream
navigator.getUserMedia(constraints,successCallback,errorCallback);
![Page 9: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/9.jpg)
Browser based computation
Augmented Reality browser based
Picshare
NyARToolkit + GWT-nyartoolkit
![Page 10: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/10.jpg)
Why GWT is needed!
Picshare
NyARToolkit + GWT-nyartoolkit
Browser Based
Computation
<video/>
<canvas/>
Ny
HTTP
![Page 11: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/11.jpg)
Browser based computation
Why GWT is needed!
Computer vision
Boofcv
![Page 12: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/12.jpg)
WebRTC
get Audio/Video
p2p communication
Peer-to-Peercommunication
between browsers
RTCPeerConnectionRTCDataChannel
![Page 13: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/13.jpg)
WebRTC
disruptiveJS api
Serverless web ?
![Page 14: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/14.jpg)
WebRTC
Signaling
![Page 15: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/15.jpg)
WebRTC
STUN
![Page 16: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/16.jpg)
WebRTC
TURN
![Page 17: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/17.jpg)
Ora tocca ad Alberto
RPCPeerConnection
![Page 18: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/18.jpg)
WebRTC
Signaling
![Page 19: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/19.jpg)
WebRTC, signaling
Signal - WHAT ?
![Page 20: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/20.jpg)
WebRTC, signaling
needs a communication channel (push-like)
![Page 21: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/21.jpg)
![Page 22: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/22.jpg)
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
![Page 23: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/23.jpg)
IMPLMENT, Channel
Channel GAE Channel -> EventBUS
onMessage() {//decodebus.fire(new MessageEvent(...));
}
![Page 24: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/24.jpg)
IMPLMENT
JSNI/JSinterop public final native void
createOffer(OfferHandler callback , OfferConstraints constraints) /*-{this.createOffer(
function(s) { $entry([email protected]::onCreateOfferSuccess(*)(s));
}, function(e) {
$entry([email protected]::onCreateOfferError(*)(e.toString()));
}, constraints );
}-*/;
![Page 25: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/25.jpg)
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();
![Page 26: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/26.jpg)
Why WebRTC ?
FreeOpenwidely-supported
native on AndoidiOS
avail. impl.C++/Java/...
![Page 27: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/27.jpg)
Why WebRTC ?
Plugins for IE
e.g.
Temasysprovides ad ad hoc craftedreplacement ofadapter.js
![Page 28: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/28.jpg)
mGWT 2.0
GWT Widgets & morefor mobile
well, Daniel afterwards will explain better:he is the author
![Page 29: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/29.jpg)
FirefoxOS
Web developerspreferredmobile OS ?
B2G
![Page 30: GWT videocall: power-up your mobile & web app with WebRTC](https://reader033.vdocuments.us/reader033/viewer/2022042607/559d199e1a28ab64558b4728/html5/thumbnails/30.jpg)
That’s All !!
Francesca TosiR&D at Jooink [email protected]
Alberto ManciniDev at Jooink [email protected]