Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Pushing the Boundaries of Sencha and HTML5′s WebRTC

1,446 views

Published on

Rich Waters & Tobias Uhlig session slides from SenchaCon 2013

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Pushing the Boundaries of Sencha and HTML5′s WebRTC

  1. 1. Tobias Uhlig, Solutions Engineer, Sencha Rich Waters, Chief Software Architect, Extnd LLC @tobiasuhlig @rwaters tobiu@sencha.com senchacon@rich-waters.com Pushing the Boundaries of Sencha and HTML5’s WebRTC
  2. 2. Agenda • Google+ • Facebook • S-Circles • WebRTC
  3. 3. Google+
  4. 4. Google+ 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>
  5. 5. Web 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); }
  6. 6. Facebook
  7. 7. Facebook Query Language • SQL-Style • Provides for some advanced features not available in the Graph API • Supports subqueries • Does not support (left) joining tables
  8. 8. FQL - Simple examples SELECT 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())
  9. 9. FQL 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) { });
  10. 10. FQL 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) { });
  11. 11. Graph API Explorer • Live Demo • http://developers.facebook.com/tools/explorer
  12. 12. Open Graph - Simple examples • 2 main starting points: - me - me/home • http://developers.facebook.com/docs/reference/api/field_expa
  13. 13. Open 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
  14. 14. WebRTC
  15. 15. Web RTC • <video> • MediaStream • WebSockets (Signaling) • PeerConnection
  16. 16. MediaStream - getUserMedia video = 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); });
  17. 17. Signaling • Only time your own server is needed • Exchange information using Session Description Protocol (SDP)
  18. 18. Signaling • Implementation left to developers • Websocket or Ajax - Channel based communication - ‘default-channel’ - unique user token channel
  19. 19. RTCPeerConnection function createOffer() { if (!options.onOfferSDP) return; peerConnection.createOffer(function (sessionDescription) { sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); peerConnection.setLocalDescription(sessionDescription); options.onOfferSDP(sessionDescription); }, null, constraints); }
  20. 20. RTCPeerConnection function 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); }
  21. 21. ICE & 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/
  22. 22. ICE 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
  23. 23. PeerConnection.onaddstream PeerConnection.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)
  24. 24. WebRTC Future • Mobile! - Chrome Android - Opera Mobile (not mini) - Bowser - Firefox mobile (planned) - Blackberry • SIP interop
  25. 25. WebRTC 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/samp - Chrome/Firefox polyfill
  26. 26. Take the Survey! • Session Survey - Available on the SenchaCon mobile app - http://app.senchacon.com • Be Social! - @SenchaCon - #SenchaCon - @tobiasuhlig - @rwaters

×