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.
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);
}
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) {
});
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
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
Editor's Notes
fires as soon as we have a clue about a remote stream, but data will not be immediately flowing