Tobias Uhlig, Solutions Engineer, Sencha
Rich Waters, Chief Software Architect, Extnd LLC
@tobiasuhlig
@rwaters
tobiu@senc...
Agenda
• Google+
• Facebook
• S-Circles
• WebRTC
Google+
Google+ Sign-In
<!-- Place this asynchronous JavaScript just before your </body>
tag -->
<script type="text/javascript">
(...
Web 2.0 Google+ Sign-In
loadGooglePlusApi : function() {
window.onSignInCallback = function(authResult) {
SCircles.app.fir...
Facebook
Facebook Query Language
• SQL-Style
• Provides for some advanced features not available in the
Graph API
• Supports subque...
FQL - Simple examples
SELECT name FROM user WHERE uid = me()
SELECT uid, name, pic_square FROM user WHERE uid = me()
OR ui...
FQL Multi-query
FB.api({
method : 'fql.multiquery',
queries : {
query1 : 'SELECT ' + streamFields + ' FROM stream WHERE fi...
FQL Multi-query
FB.api({
method : 'fql.multiquery',
queries : {
query1 : 'SELECT ' + streamFields + ' FROM stream WHERE fi...
Graph API Explorer
• Live Demo
• http://developers.facebook.com/tools/explorer
Open Graph - Simple examples
• 2 main starting points:
- me
- me/home
• http://developers.facebook.com/docs/reference/api/...
Open Graph VS FQL
• Different Focus:
- Open Graph easier to use
- FQL more powerful
• Be careful:
- different table struct...
WebRTC
Web RTC
• <video>
• MediaStream
• WebSockets (Signaling)
• PeerConnection
MediaStream - getUserMedia
video = document.createElement(‘video’);
...
n.getMedia = n.webkitGetUserMedia || n.mozGetUserM...
Signaling
• Only time your own server is
needed
• Exchange information using
Session Description Protocol
(SDP)
Signaling
• Implementation left to developers
• Websocket or Ajax
- Channel based communication
- ‘default-channel’
- uniq...
RTCPeerConnection
function createOffer() {
if (!options.onOfferSDP) return;
peerConnection.createOffer(function (sessionDe...
RTCPeerConnection
function createAnswer() {
if (!options.onAnswerSDP) return;
options.offerSDP = new SessionDescription(op...
ICE & STUN & TURN
• Interactive Connectivity Establishment
• Session Traversal Utilities for NAT (STUN)
- stun.l.google.co...
ICE Candidates
• Get automatically generated once SDP exchange
complete
• a=candidate:747209234 1 udp 1845501695 66.90.30....
PeerConnection.onaddstream
PeerConnection.onaddstream = function(event) {
var video = document.createElement(‘video’);
vid...
WebRTC Future
• Mobile!
- Chrome Android
- Opera Mobile (not mini)
- Bowser
- Firefox mobile (planned)
- Blackberry
• SIP ...
WebRTC Resources
• PeerJS - http://peerjs.com/
- simplified communication & provided signaling server
- only supports Data...
Take the Survey!
• Session Survey
- Available on the SenchaCon
mobile app
- http://app.senchacon.com
• Be Social!
- @Sench...
Pushing the Boundaries of Sencha and HTML5′s WebRTC
Pushing the Boundaries of Sencha and HTML5′s WebRTC
Upcoming SlideShare
Loading in …5
×

Pushing the Boundaries of Sencha and HTML5′s WebRTC

1,217 views

Published on

Rich Waters & Tobias Uhlig session slides from SenchaCon 2013

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,217
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • fires as soon as we have a clue about a remote stream, but data will not be immediately flowing
  • 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

    ×