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
[email protected]@[email protected]@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 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
Top Related