WebRTC: Real-time Communication for Everyone! - Web Unleashed 2014

WebRTC is a powerful open-source project that seamlessly enables real-time communication (RTC), baked right into modern web browsers. This means that web developers can now incorporate video, voice and data sharing using peer-to-peer connectivity via JavaScript APIs, with no plugins or additional installs required.

In this session, Lisa Larson-Kelley introduces the fundamentals of WebRTC, explaining its elements and capabilities in easy-to-understand terms, and demonstrates a simple ‘hello world’ application using the WebRTC API and open source libraries. With over 10 years of experience building real-time communication apps using Flash Media Server, Lisa brings her perspective and enthusiasm for RTC to this rapidly emerging open source technology that is poised to revolutionize how we communicate on the web.

Presented at Web Unleashed 2014 in Toronto.

Transcript

1. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Real-time Communication –
 for Everyone! Web Unleashed Toronto 2014 Sept 17, 2014 ! Lisa Larson-Kelley LearnFromLisa.com @lisamarienyc
2. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 What is WebRTC? WebRTC
3. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Communication.
4. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014
5. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Photo: @trevorcummings
6. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Photo: @taylorherring
7. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Photo: @NASA
8. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Enter, WebRTC. WebRTC
9. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 It’s going to be 
 “in” all the things.
10. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 What is WebRTC?
11. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Amazon Kindle Mayday Button
12. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Google ChromeCast Google ChromeCast
13. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Cystic Fibrosis e-Health & Telemonitoring Program
14. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 appear.in/lisa
15. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 chromeexperiments.com/detail/face-substitution/
16. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 WebRTC, all the parts
17. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 The full WebRTC environment Web Servers PSTN Gateway Jingle Client Tablet Mobile Phone Phone PSTN Laptop PC SIP Client Other Servers WebRTC
18. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 MediaStream RTCDataChannel RTCPeerConnection WebRTC
19. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Get connected using WebRTC signaling server ! HTTP, Websockets, or ?? webpage [HTML / JS] 1) Initialize
20. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Get connected using WebRTC webpage [HTML / JS] webpage [HTML / JS] signaling server ! HTTP, Websockets, or ?? 1) Initialize 2) Exchange 
 client info
21. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 webpage [HTML / JS] webpage [HTML / JS] Get connected using WebRTC signaling server ! HTTP, Websockets, or ?? 1) Initialize 2) Exchange client info 3) Communicate!
22. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Signaling options + +
23. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Get connected using WebRTC webpage [HTML / JS] webpage [HTML / JS] Trying to…
24. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 1) Initialize and introduce (signaling) 2) Exchange client info 3) NAT traversal via STUN / TURN servers 4) Communicate!
25. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Why do we need servers with WebRTC? I was promised peer-to-peer!
26. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 STUN Introducing STUN, TURN and ICE ICE TURN
27. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Establishing Peer Connections: An Overview 192.168.0.3 225.35.6.2.188 192.168.0.3 = 225.35.6.2.188 192.168.0.4 = 225.35.6.2.189 192.168.0.5 = 225.35.6.2.190 192.168.0.6 = 225.35.6.2.191 Respond to 192.168.0.3
28. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How STUN servers work “Hey, what’s my external IP address?” “My IP address is 41.19.4.1.255” STUN Your external IP Address is 225.35.6.2.188 “My IP address is 225.35.6.2.188 Peer-to-Peer
29. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How STUN servers work (sometimes…) Peer-to-Peer
30. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How TURN works TURN Jane’s data Jane’s data John’s data John’s data
31. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Interactive Connectivity Establishment (ICE) STUN TURN ICE
32. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Interactive Connectivity Establishment (ICE) STUN TURN ICE STUN SUCCESS!
33. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Al…most… there…. MYTHs BUSTED! @lisamarienyc | LearnFromLisa.com
34. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Opaque (unless you’re a telecom engineer) BUSTED!
35. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Not well documented BUSTED!
36. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Doesn’t work in IE or Safari, 
 so why bother? (No video on the iPad, revisited) (sorta) BUSTED!
37. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Browser support today… DESKTOP MOBILE IsWebRTCReadyYet.com
38. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 What about this competing
 ORTC thing? BUSTED!
39. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 The SDP debate… http://www.w3.org/community/ortc/
40. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 is 
 object-oriented.
41. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 @lisamarienyc | LearnFromLisa.com
42. "It's kind of fun 
 to do the impossible." - Walt Disney @lisamarienyc | LearnFromLisa.com WebRTC
43. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 How to get started
44. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 What do you need? ✓ Core programming skills ✓ HTML, CSS and JavaScript ✓ Your preferred HTML editor ✓ Webcam and microphone ✓ Latest build of 
 Chrome or 
 Firefox
45. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Use services / libraries STUN TURN
46. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 §Instant free video conferencing ๏ apprtc.appspot.com ๏ AddLive.com ๏ Vline.com ๏ Vsee.com (free and premium) ๏ Appear.in ๏ (and more every day!) Some ready-to-use services
47. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 §WebRTC services and platforms ๏ Tokbox.com Open Tok platform ๏ Vidyo.com ๏ rtc.io ๏ Xirsys.com hosted server 
 infrastructure Some ready-to-use services
48. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 The DIY approach STUN TURN
49. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Prebuilt frameworks – Telephony ‣Phono - Open source JavaScript phone API ‣sipML5 - Open source JavaScript SIP client ‣FreeSWITCH - Scalable open source cross-platform service
50. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 ‣PeerJS ‣SimpleWebRTC ‣easyRTC ‣webRTC.io ‣RTC.io (node toolbox) Prebuilt frameworks – Web
51. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 SimpleWebRTC is simple.
52. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 SimpleWebRTC is simple.
53. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 § Simplest possible API demos § HTML5Rocks tutorials § Video chat: apprtc.appspot.com 
 (with source code) § webrtc-experiment.com - Muaz Khan § http://webrtcbook.com - Alan Johnston and Daniel Burnett § And more! Resources http://bit.ly/lisa-rtc
54. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Potential of WebRTC 6.2 billion by 2018 Financial Services Healthcare Insurance
55. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Speaking Exchange
 Created by FCB BRASIL Powered by WebRTC
56. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Communication
57. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 Communication Connection = Photo: @Popicinio
58. @lisamarienyc | LearnFromLisa.com Web Unleashed 2014 @lisamarienyc | LearnFromLisa.com bit.ly/learnwebrtc Thank you. Welcome to the new frontier of real-time communication on the web!