Pushing the Boundaries of Sencha and HTML5′s WebRTC

Tobias Uhlig, Solutions Engineer, SenchaRich Waters, Chief Software Architect, Extnd LLC

Tobias Uhlig, Solutions Engineer, SenchaRich Waters, Chief Software Architect, Extnd LLC

@tobiasuhlig@rwaters@tobiasuhlig@rwaters

tobiu@sencha.comsenchacon@rich-waters.comtobiu@sencha.comsenchacon@rich-waters.com

Pushing the Boundaries of Sencha and HTML5’s WebRTC

Pushing the Boundaries of Sencha and HTML5’s WebRTC

AgendaAgenda• Google+• Facebook• S-Circles• WebRTC

Google+

Google+ Sign-InGoogle+ Sign-In<!-- Place this asynchronous JavaScript just before your </body> tag --><script type="text/javascript"> (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client:plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>

<span id="signinButton">...</span>

Web 2.0 Google+ Sign-InWeb 2.0 Google+ Sign-In loadGooglePlusApi : function() { window.onSignInCallback = function(authResult) { SCircles.app.fireEvent('googlePlusSignInCallback', authResult); };

var api = document.createElement('script');

Ext.apply(api, { async : true, type : 'text/javascript', src : 'https://plus.google.com/js/client:plusone.js' });

var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(api, s); }

Facebook

Facebook Query LanguageFacebook Query Language• SQL-Style• Provides for some advanced features not

available in the Graph API• Supports subqueries• Does not support (left) joining tables

FQL - Simple examplesFQL - Simple examplesSELECT name FROM user WHERE uid = me()

SELECT uid, name, pic_square FROM user WHERE uid = me()OR uid IN (SELECT uid2 FROM friend WHERE uid1 = me())

FQL Multi-queryFQL Multi-query FB.api({ method : 'fql.multiquery', queries : { query1 : 'SELECT ' + streamFields + ' FROM stream WHERE filter_key IN (SELECT filter_key FROM stream_filter WHERE uid = me()) AND actor_id IN (SELECT uid2 FROM friend WHERE uid1 = me()) ORDER BY updated_time DESC LIMIT 50',

query2 : 'SELECT uid, first_name, last_name FROM user WHERE uid IN (SELECT actor_id FROM #query1)' } }, function (response) {

});

FQL Multi-queryFQL Multi-query FB.api({ method : 'fql.multiquery', queries : { query1 : 'SELECT ' + streamFields + ' FROM stream WHERE filter_key IN (SELECT filter_key FROM stream_filter WHERE uid = me()

AND type="friendlist"

) AND actor_id IN (SELECT uid2 FROM friend WHERE uid1 = me()) ORDER BY updated_time DESC LIMIT 50',

query2 : 'SELECT uid, first_name, last_name FROM user WHERE uid IN (SELECT actor_id FROM #query1)' } }, function (response) {

});

Graph API ExplorerGraph API Explorer• Live Demo• http://developers.facebook.com/tools/explorer

Open Graph - Simple examplesOpen Graph - Simple examples• 2 main starting points:

- me- me/home

• http://developers.facebook.com/docs/reference/api/field_expansion/

Open Graph VS FQLOpen Graph VS FQL• Different Focus:

- Open Graph easier to use- FQL more powerful

• Be careful:- different table structures- different field names and types (even for

“same” fields)- different output JSON

WebRTC

Web RTCWeb RTC• <video>• MediaStream• WebSockets (Signaling)• PeerConnection

MediaStream - getUserMediaMediaStream - getUserMediavideo = document.createElement(‘video’);...n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia;n.getMedia({ audio: true, video: { mandatory: {}, optional: [] }}, function() { video[moz ? 'mozSrcObject' : 'src'] = moz ? stream : window.webkitURL.createObjectURL(stream); video.play();}, function (e) { console.error(e);});

SignalingSignaling• Only time your own

server is needed• Exchange information

using Session Description Protocol (SDP)

SignalingSignaling• Implementation left to developers• Websocket or Ajax

- Channel based communication- ‘default-channel’- unique user token channel

RTCPeerConnectionRTCPeerConnectionfunction createOffer() { if (!options.onOfferSDP) return;

peerConnection.createOffer(function (sessionDescription) { sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); peerConnection.setLocalDescription(sessionDescription); options.onOfferSDP(sessionDescription); }, null, constraints);}

RTCPeerConnectionRTCPeerConnectionfunction createAnswer() { if (!options.onAnswerSDP) return;

options.offerSDP = new SessionDescription(options.offerSDP); peerConnection.setRemoteDescription(options.offerSDP);

peerConnection.createAnswer(function (sessionDescription) { sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); peerConnection.setLocalDescription(sessionDescription); options.onAnswerSDP(sessionDescription); }, null, constraints);}

ICE & STUN & TURNICE & STUN & TURN• Interactive Connectivity Establishment• Session Traversal Utilities for NAT (STUN)

- stun.l.google.com:19302• Traversal Using Relays around NAT (TURN)

• Run your own server- https://code.google.com/p/rfc5766-turn-server/- http://www.pjsip.org/pjnath/docs/html/

ICE CandidatesICE Candidates• Get automatically generated once SDP exchange

complete

• a=candidate:747209234 1 udp 1845501695 66.90.30.120 61920 typ srflx raddr 172.19.8.196 rport 61920 generation 0

• ICE Candidates must be sent through signaling server as connection is not yet established until all candidates received

PeerConnection.onaddstreamPeerConnection.onaddstreamPeerConnection.onaddstream = function(event) { var video = document.createElement(‘video’);

video[moz ? 'mozSrcObject' : 'src'] = moz ? stream : webkitURL.createObjectURL(stream); video.play();...};

Ensure video is flowing:(video.readyState <= HTMLMediaElement.HAVE_CURRENT_DATA

|| video.paused

|| video.currentTime <= 0)

WebRTC FutureWebRTC Future• Mobile!

- Chrome Android- Opera Mobile (not

mini)- Bowser- Firefox mobile

(planned)- Blackberry

• SIP interop

WebRTC ResourcesWebRTC Resources• PeerJS - http://peerjs.com/

- simplified communication & provided signaling server- only supports DataChannel (no streaming)

• WebRTC Experiments & Demos - https://www.webrtc-experiment.com/- much lower level- examples of video chat, screen sharing &

DataChannels• Adapter.js -

https://code.google.com/p/webrtc/source/browse/trunk/samples/js/base/adapter.js- Chrome/Firefox polyfill

Take the Survey!Take the Survey!• Session Survey

- Available on the SenchaCon

mobile app- http://app.senchacon.com

• Be Social!- @SenchaCon- #SenchaCon- @tobiasuhlig- @rwaters