2013 Portland jQuery - Using jQuery to build a federated, real-time video chat app

Slides from "Using jQuery to build a federated, real-time video chat app" as presented by Robin Raymond in jQuery 2013 Portland.

Transcript

1. 2013%06%13' Using&jQuery&to&build&a&federated,& real56me&video&chat&app& Presented&by&Robin&Raymond& Chief&Architect,& Hookflash&/&OpenPeer.org&
2. Agenda& Using'jQuery'to'build'a'federated'real%:me'video'chat'app' Media&Example& Key&Concepts& Offer/Answer&Example& Video&Chat& Applica6on&Makeup& Iden66es&Example& Gotchas!&
3. Tradi6onal&Makeup&of&Video&Chat& •  Record/render&audio&+&video& •  Input/display&text& •  Media&engine& •  Real5Time&Communica6on&(RTC)&stack& •  Find&contacts& •  Contacts&signal&their&desire&to&communicate& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
4. Tradi6onal&Role&of&Browsers& Render&Output&with&Limited&User&Input& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
5. Can’t&we&do&video&chat&in&the& browser?& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
6. Can’t&we&do&video&chat&in&the& browser?& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
7. Can’t&we&do&video&chat&in&the& browser?& WebRTC' Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
8. Web&+'Real5Time&Communica6ons&(RTC)&=' WebRTC& What&is&WebRTC?& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
9. Add&a&RTC&Stack!& RTP/RTCP& Codec& Mixer& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
10. Ask&the&user&for&permission&and…& Voila&–&AUDIO/VIDEO!& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup'
11. & Phase&2:& & ?' ' Phase&1:& & Add'RTC'Stack'to' Browser' Phase&3:& & Video'Chat' inside'Browser!' Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup' Wait!&Aren’t&you&missing&something?&
12. Yes,&video&chat&isn’t&done&by&magic…& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup' Where?' When?' What?' Who?' How?'
13. & Phase&2:& & ?' ' Phase&1:& & Add'RTC'Stack'to' Browser' Phase&3:& & Video'Chat' inside'Browser!' Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Video'Chat'Applica:on'Makeup' Phase&2:& & JavaScript'Logic' and'Signaling'
14. Key&Concepts& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Key'Concepts' SDP& (Session& Descrip6on& Protocol)& Offer&/&Answer& Peer& Connec6on& (and&streams)& ICE/STUN/TURN& Data&Channel&
15. Peer&Connec6on& Point&A&to&Point&B&Connec6on& & & Media&Types&/&Streams& & & Codecs& & & State& & & Network&Informa6on& & & Data&/&Channel& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Key'Concepts'
16. Session&Descrip6on&Protocol& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Key'Concepts' Each'Peer'Describes' & & Media&Types&/&Streams& & & Codecs& & & State& & & Network&Informa6on& & & Data&/&Channel&
17. Offer&/&Answer&SDP&Exchanged& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Key'Concepts'
18. Simple&Network&Scenario& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Key'Concepts' TURN&Server&(relay)& IP=90.3.4.5& Signaling& Server& Firewall& IP=72.14.16.18& Firewall& IP=64.6.7.8& Browser&A& IP=192.168.1.17& Browser&B& IP=10.0.0.14& ICE'Candidates' (STUN/ICE/TURN)'
19. Data&Channel& <5&send&whatever&informa6on&you&want&5>& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Key'Concepts'
20. Offer/Answer&Example& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Simple'Example'
21. Media&Example& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Signaling'Example'
22. Iden66es&Example& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Iden::es'Example'
23. Gotchas!& Keeping&up5to5date& SDP&+&Legacy&Systems& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!' Security& Mobile& Living&in&a&Silo&
24. Federa6on&is&important!& (Your&website&is&not&a&silo)& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!' Why'can’t'they'talk'together?' foo.com& bar.com&
25. SDP&+&Legacy&Systems& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!'
26. Keeping&up5to5date& (when&using&custom&signaling/protocol)& Scaling&/&Growth& Mobile&Market&Changes& Browser&Versioning&/&Differences& Signaling& Protocols& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!'
27. Compe6ng&Standards& WebRTC& CU5RTC5Web&?& ?' Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!'
28. Mobile&–&What&is&your&plan?& Na6ve& Hybrid& HTML5/WebRTC& SDK&Op6ons&to&interface&to&your&website?& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!'
29. Security& Are&you&doing&it&right?& Are&your&servers&secure?& Who&is&listening&to& your&conversa6ons?& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!'
30. Your&Signaling& Op6ons:& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Gotchas!' 3rd&Party&Supported&SDK& & X5Domain&Federa6on& & Social&Iden66es& & Easy&scalability& & Mobile&op6ons& & PSTN&/&Legacy&Connec6vity& & Security&/&Privacy& Open&Peer*& Custom& Other&JS& *&Coming&soon&
31. Resources& hqp://openpeer.org/& & hqp://about.me/robinraymond& Using'jQuery'to'build'a'federated'real%:me'video'chat'app'/'Resources'