Pushing the Boundaries of Sencha and HTML5′s WebRTC
-
Upload
rich-waters -
Category
Technology
-
view
819 -
download
0
description
Transcript of 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
[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