What is WebRTC? What can I do with it?

Talk given at CodeHarbour meetup about WebRTC, what we can do with it. Aimed at the WebRTC basics.

Transcript

1. What is WebRTC? What can I do with it? Dan Jenkins Founder of Nimble Ape Ltd Developer at Respoke 1
2. Who am I? 2
3. / Who am I? Dan Jenkins Node.js Developer Love Lego & Technic General Geek Founder of Nimble Ape Ltd ❤️ open source 3
4. / Who am I? github.com/danjenkins 4
5. / Who am I? @dan_jenkins 5
6. / Who am I? nimblea.pe | @nimbleapeltd 6
7. / 7 Who am I?
8. / Who am I? Got into VoIP years ago VoIP is difficult Spent the past year working on a platform called Respoke Respoke makes WebRTC easier 8 WebRTC & I
9. WebRTC 9
10. / WebRTC 10 Who’s heard of WebRTC?
11. / WebRTC Who’s developed something with WebRTC? 11
12. / WebRTC 12 Who’s used WebRTC?
13. / WebRTC 13 Talky.io Appear.in Screenhero Hangouts
14. / WebRTC 14 Sharefest Amazon Mayday PeerCDN
15. / WebRTC 15 Enabled on over 6.2 Billion Devices By 2018
16. What is WebRTC? 16
17. / What is WebRTC? 17 Web Real Time Communication
18. / What is WebRTC? 18 Disrupt!
19. / What is WebRTC? 19 It’s a technology!
20. / What is WebRTC? 20 It’s classed as “Experimental”
21. / What is WebRTC? 21 It’s encrypted
22. / What is WebRTC? 22 Defined by W3C & IETF, just like HTTP
23. / What is WebRTC? “WebRTC (Web Real-Time Communication) is an API definition drafted by the World Wide Web Consortium (W3C) that supports browser-to-browser applications for voice calling, video chat, and P2P file sharing without the need of either internal or external plugins.” 23 According to wikipedia:
24. OK, but what is it? 24
25. / Ok, but what is it? 25 Enables Video, Audio and Data Sharing in your browser, peer to peer, with no plugins
26. / Ok, but what is it? 26 What?! Wait! Too many words!
27. / Ok, but what is it? 27 Video
28. / Ok, but what is it? / Video 28 A browser friendly camera…
29. / Ok, but what is it? / Video But you need a “plugin” for this… shhh! Don’t tell anyone… It’s for security 29 Your screen…
30. / Ok, but what is it? 30 Audio
31. / Ok, but what is it? / Audio 31 A Mic
32. / Ok, but what is it? / Audio Audio APIs 32 An audio stream from an in browser source
33. Data Sharing 33
34. / Ok, but what is it? / Data Sharing 34 This can be pretty much anything…
35. / Ok, but what is it? / Data Sharing 35 An image from canvas…
36. / Ok, but what is it? / Data Sharing 36 A file
37. / Ok, but what is it? / Data Sharing 37 Web-torrents
38. / Ok, but what is it? / Data Sharing 38 Anything!
39. Peer to Peer 39
40. / Peer to Peer 40 2 peers
41. / Peer to Peer 41 3 peers
42. / Peer to Peer 42 *n peers
43. / Peer to Peer 43 Peers don’t have to be browsers!
44. / Peer to Peer 44 But we’ve had peer to peer technology before, what’s different?
45. / Peer to Peer Direct in your modern browser/app! 45 No plugins!
46. Awesome! So it’s easy to implement? 46
47. / Awesome! It’s primarily a web technology aimed at web developers 47
48. / Awesome! But unfortunately it’s not simple to implement 48
49. / Awesome! You’ll need a signalling server 49
50. / Awesome! / Signalling And signalling isn’t a standard 50
51. / Awesome! / Signalling It might not be very real time though… 51 You could use carrier pigeons!
52. / Awesome! / Signalling But seriously, there are open source ones… 52
53. / Awesome! / Signalling And many providers! 53
54. / Awesome! They’re evolving all the time… and they’re all different… 54 Browser APIs
55. / Awesome! / Browser APIs There’s a few to choose from… 55 Adapter.js
56. / Awesome! / Browser APIs They normalise the browsers 56
57. / var RTCPeerConnection = null; var getUserMedia = null; var attachMediaStream = null; var reattachMediaStream = null; var webrtcDetectedBrowser = null; function trace(text) { // This function is used for logging. if (text[text.length - 1] == '\n') { text = text.substring(0, text.length - 1); } console.log((performance.now() / 1000).toFixed(3) + ": " + text); } if (navigator.mozGetUserMedia) { console.log("This appears to be Firefox"); webrtcDetectedBrowser = "firefox"; // The RTCPeerConnection object. RTCPeerConnection = mozRTCPeerConnection; // The RTCSessionDescription object. RTCSessionDescription = mozRTCSessionDescription; // The RTCIceCandidate object. RTCIceCandidate = mozRTCIceCandidate; // Get UserMedia (only difference is the prefix). // Code from Adam Barth. getUserMedia = navigator.mozGetUserMedia.bind(navigator); // Attach a media stream to an element. attachMediaStream = function(element, stream) { console.log("Attaching media stream"); element.mozSrcObject = stream; element.play(); }; reattachMediaStream = function(to, from) { console.log("Reattaching media stream"); to.mozSrcObject = from.mozSrcObject; to.play(); }; Awesome! / Browser APIs Google has one 57
58. / Awesome! / Browser APIs Plus many others… 58
59. / Awesome! / Browser APIs getUserMedia RTCPeerConnection RTCDataChannel 59
60. / Awesome! / Browser APIs Used to ask your user whether the website can use your media, among other things 60 getUserMedia
61. / Awesome! / Browser APIs Handles the underlying technology to stream media between 2 peers 61 RTCPeerConnection
62. / Awesome! / Browser APIs Transfer arbitrary data between peers. This is what’s really exciting about WebRTC. It makes WebRTC use cases expand infinitely 62 RTCDataChannel
63. / Awesome! / Browser APIs 63 (1) getUserMedia (2) send offer (3) receive Offer (4) getUserMedia (5) send answer (5) receive answer (6) media starts streaming A Simple Diagram…
64. But what about firewalls? 64
65. / Firewalls Built in mechanisms to help 65
66. / Firewalls A method to go off to a server and get your IP as seen by the world 66 STUN
67. / Firewalls A server to relay your media through, if a peer to peer connection can’t be established Generally, you need to run one (or more) of these yourself to get good quality 67 TURN
68. OK, I get it… Where can I use it? 68
69. / Where can I use it? 69
70. / Where can I use it? 70
71. / Where can I use it? PeerConnection API ✔ ✔ ✔ ✔ ✗ ✗ ✔ ORTC API ✗ ✗ ✗ ✗ ✗ ✗ getUserMedia ✔ ✔ ✔ ✔ ✗ ✔ simulcast ✔ ✗ ✗ ✗ ✗ ✗ mediaConstraints ✗ ✗ ✗ TURN support ✔ ✔ ✔ ✔ ✗ ✗ ✔ MediaStream API ✔ ✔ ✗ ✗ ✔ WebAudio Integration ✔ ✔ ✔ ✔ ✗ ✗ ✔ dataChannels ✔ ✔ ✔ ✔ ✗ ✗ ✔ Screen Sharing ✗ ✗ ✗ ✗ Stream re-broadcasting ✗ ✗ ✗ ✗ ✗ Multiple Streams ✔ ✔ ✗ ✗ ✗ ✗ ✔ Solid Interop ✗ ✗ Echo cancellation ✔ ✔ ✗ ✗ It’s complicated 71
72. / Where can I use it? With a plugin… 72 LOL…
73. What can I do with it? 73
74. / What can I do with it? Easy answer, use your imagination 74
75. / What can I do with it? Customer Support 75
76. / What can I do with it? Enable easier remote working in Contact Centres 76
77. / What can I do with it? Peer to Peer data transfers in games 77
78. / What can I do with it? Sales 78 Look at products in real time
79. / What can I do with it? And many, many more, you just need imagination 79
80. / What can I do with it? None of these ideas are new But they’re being enabled by the open standard They’ve also got a higher possibility of success as it’s now cheaper to run the service 80
81. Security Concerns? 81
82. / Security Concerns? Of course there are! 82
83. / https://www.browserleaks.com/webrtc Security Concerns? You can obtain a user’s real IP using WebRTC technology 83
84. / Security Concerns? Without the user ever knowing 84 You can transfer ∞ data
85. Things I haven’t even talked about… 85
86. / Not talked about ICE Candidates 86
87. / Not talked about Including Mesh, SFUs and MCUs 87 Network layouts
88. / Not talked about Encryption 88
89. / Not talked about using canvas for example 89 Playing with the streams in your browser
90. / Not talked about / Canvas 90
91. / Not talked about 91 Codecs Opus, G.711, G.722, iLBC, and iSAC VP8 and H264
92. / Not talked about And probably a whole lot more… 92
93. / Not talked about It’s a complex topic 93
94. / Not talked about But it’s not as complicated as VoIP Everyone can get into it 94
95. Want to get started with WebRTC without having to deal with signalling and browser differences? 95
96. / Getting started 96 Check out Respoke, it’s free! www.respoke.io
97. Thanks! Dan Jenkins @dan_jenkins 97