Beyond Tellerrand Berlin 2014 - WebRTC: Real-time Communication for Everyone!

An introduction to WebRTC - what it is and why you should care. Use technology for good!

Presented at the first Beyond Tellerrand Berlin; a conference I was honored to be a part of, featuring world-class speakers and tons of inspiration.

Watch a video of this talk here: https://vimeo.com/113475929

Transcript

1. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Beyond Tellerrand Berlin 2014 Nov 5, 2014 ! Lisa Larson-Kelley LearnFromLisa.com @lisamarienyc Real-time Communication –
 for Everyone! bit.ly/btwebrtc
2. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Photo: Martin Terber, flickr
3. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Beyond Tellerrand Berlin 2014 Nov 5, 2014 ! Lisa Larson-Kelley LearnFromLisa.com @lisamarienyc Real-time Communication –
 for Everyone! bit.ly/btwebrtc
4. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 What is WebRTC? WebRTC
5. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Communication.
6. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014
7. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Photo: @trevorcummings
8. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Photo: @taylorherring
9. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Photo: @NASA
10. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Enter, WebRTC. WebRTC
11. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 It’s going to be 
 “in” all the things.
12. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 What is WebRTC?
13. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Amazon Kindle Mayday Button
14. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Google ChromeCast Google ChromeCast
15. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Cystic Fibrosis e-Health & Telemonitoring Program
16. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 appear.in/lisa
17. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 chromeexperiments.com/detail/face-substitution/ CMD-F1
18. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 WebRTC, all the parts
19. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 The full WebRTC environment Web Servers PSTN Gateway Jingle Client Tablet Mobile Phone Phone PSTN Laptop PC SIP Client Other Servers WebRTC
20. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 MediaStream RTCDataChannel RTCPeerConnection WebRTC
21. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Get connected using WebRTC signaling server ! HTTP, Websockets, or ?? webpage [HTML / JS] 1) Initialize
22. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Get connected using WebRTC webpage [HTML / JS] webpage [HTML / JS] signaling server ! HTTP, Websockets, or ?? 1) Initialize 2) Exchange 
 client info
23. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 webpage [HTML / JS] webpage [HTML / JS] Get connected using WebRTC signaling server ! HTTP, Websockets, or ?? 1) Initialize 2) Exchange client info 3) Communicate!
24. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Signaling options + +
25. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Get connected using WebRTC webpage [HTML / JS] webpage [HTML / JS] Trying to…
26. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 1) Initialize and introduce (signaling) 2) Exchange client info 3) NAT traversal via STUN / TURN servers 4) Communicate!
27. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Why do we need servers with WebRTC? I was promised peer-to-peer!
28. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 STUN Introducing STUN, TURN and ICE ICE TURN
29. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 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
30. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 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 Connection
31. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 How STUN servers work (sometimes…) Peer-to-Peer
32. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 How TURN works TURN Jane’s data Jane’s data John’s data John’s data
33. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Interactive Connectivity Establishment (ICE) STUN TURN ICE
34. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Interactive Connectivity Establishment (ICE) STUN TURN ICE STUN SUCCESS!
35. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Al…most… there…. MYTHs BUSTED! @lisamarienyc | LearnFromLisa.com
36. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Opaque (unless you’re a telecom engineer) BUSTED!
37. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Not well documented BUSTED!
38. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Doesn’t work in IE or Safari, 
 so why bother? (No video on the iPad, revisited) (sorta) BUSTED!
39. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Browser support today… DESKTOP MOBILE IsWebRTCReadyYet.com + Skype team announcement 10/27/14 – 
 it’s coming!
40. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 What about this competing
 ORTC thing? BUSTED!
41. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 It’s not secure (is it?) BUSTED!
42. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 The SDP debate… http://www.w3.org/community/ortc/
43. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 is 
 object-oriented.
44. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 @lisamarienyc | LearnFromLisa.com
45. "It's kind of fun 
 to do the impossible." - Walt Disney @lisamarienyc | LearnFromLisa.com WebRTC
46. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 How to get started
47. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 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
48. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Use services / libraries STUN TURN
49. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 §Instant free video conferencing ๏ apprtc.appspot.com ๏ AddLive.com ๏ Vline.com ๏ Vsee.com (free and premium) ๏ (and more every day!) Some ready-to-use services http://bit.ly/btwebrtc
50. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 §WebRTC services and platforms ๏ Tokbox.com Open Tok platform ๏ Appear.in ๏ Vidyo.com ๏ rtc.io ๏ Xirsys.com hosted server 
 infrastructure Some ready-to-use services
51. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 The DIY approach STUN TURN
52. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Prebuilt frameworks – Telephony ‣Phono - Open source JavaScript phone API ‣sipML5 - Open source JavaScript SIP client ‣FreeSWITCH - Scalable open source cross-platform service
53. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 ‣PeerJS ‣SimpleWebRTC ‣easyRTC ‣webRTC.io ‣RTC.io (node toolbox) Prebuilt frameworks – Web
54. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 SimpleWebRTC is simple.
55. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 SimpleWebRTC is simple.
56. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 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
57. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Potential of WebRTC 6.2 billion by 2018 Financial Services Healthcare Insurance Source: Disruptive Analysis Sept 2014
58. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Speaking Exchange
 Created by FCB BRASIL Powered by WebRTC
59. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Communication
60. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 Communication Connection = Photo: @Popicinio
61. @lisamarienyc | LearnFromLisa.com Beyond Tellerrand Berlin 2014 bit.ly/learnwebrtc Thank you. bit.ly/btwebrtc