This document summarizes features and examples of Google+, Facebook, and WebRTC technologies for real-time communication. It discusses using Google+ and Facebook sign-in, querying user data via FQL and the Graph API, and establishing real-time connections between browsers using WebRTC standards like getUserMedia, PeerConnection, signaling, and ICE candidates. Resources for using these technologies like PeerJS and WebRTC experiments are also listed.

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. Agenda
• Google+
• Facebook
• S-Circles
• WebRTC

3. Google+

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. 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. Facebook

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. 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. 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. 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. Graph API Explorer
• Live Demo
• http://developers.facebook.com/tools/explorer

12. Open Graph - Simple examples
• 2 main starting points:
- me
- me/home
• http://developers.facebook.com/docs/reference/api/field_expa

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

15. WebRTC

17. Web RTC
• <video>
• MediaStream
• WebSockets (Signaling)
• PeerConnection

18. 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);
});

19. Signaling
• Only time your own server is
needed
• Exchange information using
Session Description Protocol
(SDP)

20. Signaling
• Implementation left to developers
• Websocket or Ajax
- Channel based communication
- ‘default-channel’
- unique user token channel

21. RTCPeerConnection
function createOffer() {
if (!options.onOfferSDP) return;
peerConnection.createOffer(function (sessionDescription) {
sessionDescription.sdp =
getInteropSDP(sessionDescription.sdp);
peerConnection.setLocalDescription(sessionDescription);
options.onOfferSDP(sessionDescription);
}, null, constraints);
}

22. 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);
}

23. 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/

24. 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

25. 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)

26. WebRTC Future
• Mobile!
- Chrome Android
- Opera Mobile (not mini)
- Bowser
- Firefox mobile (planned)
- Blackberry
• SIP interop

27. 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

28. Take the Survey!
• Session Survey
- Available on the SenchaCon
mobile app
- http://app.senchacon.com
• Be Social!
- @SenchaCon
- #SenchaCon
- @tobiasuhlig
- @rwaters