pushing the boundaries of sencha and html5′s webrtc
DESCRIPTION
Rich Waters & Tobias Uhlig session slides from SenchaCon 2013TRANSCRIPT
![Page 1: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/1.jpg)
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
![Page 2: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/2.jpg)
AgendaAgenda• Google+• Facebook• S-Circles• WebRTC
![Page 3: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/3.jpg)
Google+
![Page 4: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/4.jpg)
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>
![Page 5: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/5.jpg)
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); }
![Page 6: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/6.jpg)
![Page 7: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/7.jpg)
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
![Page 8: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/8.jpg)
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())
![Page 9: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/9.jpg)
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) {
});
![Page 10: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/10.jpg)
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) {
});
![Page 11: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/11.jpg)
Graph API ExplorerGraph API Explorer• Live Demo• http://developers.facebook.com/tools/explorer
![Page 12: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/12.jpg)
Open Graph - Simple examplesOpen Graph - Simple examples• 2 main starting points:
- me- me/home
• http://developers.facebook.com/docs/reference/api/field_expansion/
![Page 13: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/13.jpg)
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
![Page 14: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/14.jpg)
![Page 15: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/15.jpg)
WebRTC
![Page 16: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/16.jpg)
![Page 17: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/17.jpg)
Web RTCWeb RTC• <video>• MediaStream• WebSockets (Signaling)• PeerConnection
![Page 18: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/18.jpg)
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);});
![Page 19: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/19.jpg)
SignalingSignaling• Only time your own
server is needed• Exchange information
using Session Description Protocol (SDP)
![Page 20: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/20.jpg)
SignalingSignaling• Implementation left to developers• Websocket or Ajax
- Channel based communication- ‘default-channel’- unique user token channel
![Page 21: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/21.jpg)
RTCPeerConnectionRTCPeerConnectionfunction createOffer() { if (!options.onOfferSDP) return;
peerConnection.createOffer(function (sessionDescription) { sessionDescription.sdp = getInteropSDP(sessionDescription.sdp); peerConnection.setLocalDescription(sessionDescription); options.onOfferSDP(sessionDescription); }, null, constraints);}
![Page 22: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/22.jpg)
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);}
![Page 23: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/23.jpg)
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/
![Page 24: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/24.jpg)
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
![Page 25: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/25.jpg)
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)
![Page 26: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/26.jpg)
WebRTC FutureWebRTC Future• Mobile!
- Chrome Android- Opera Mobile (not
mini)- Bowser- Firefox mobile
(planned)- Blackberry
• SIP interop
![Page 27: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/27.jpg)
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
![Page 28: Pushing the Boundaries of Sencha and HTML5′s WebRTC](https://reader037.vdocuments.us/reader037/viewer/2022103016/554b9d4cb4c905b3618b46ca/html5/thumbnails/28.jpg)
Take the Survey!Take the Survey!• Session Survey
- Available on the SenchaCon
mobile app- http://app.senchacon.com
• Be Social!- @SenchaCon- #SenchaCon- @tobiasuhlig- @rwaters