What is WebRTC? What can I do with it?

1,473 views

Published on

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

Published in: Internet
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,473
On SlideShare
0
From Embeds
0
Number of Embeds
459
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

What is WebRTC? What can I do with it?

  1. 1. What is WebRTC? What can I do with it? Dan Jenkins Founder of Nimble Ape Ltd Developer at Respoke 1
  2. 2. Who am I? 2
  3. 3. / Who am I? Dan Jenkins Node.js Developer Love Lego & Technic General Geek Founder of Nimble Ape Ltd ❤️ open source 3
  4. 4. / Who am I? github.com/danjenkins 4
  5. 5. / Who am I? @dan_jenkins 5
  6. 6. / Who am I? nimblea.pe | @nimbleapeltd 6
  7. 7. / 7 Who am I?
  8. 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. 9. WebRTC 9
  10. 10. / WebRTC 10 Who’s heard of WebRTC?
  11. 11. / WebRTC Who’s developed something with WebRTC? 11
  12. 12. / WebRTC 12 Who’s used WebRTC?
  13. 13. / WebRTC 13 Talky.io Appear.inScreenhero Hangouts
  14. 14. / WebRTC 14 Sharefest Amazon Mayday PeerCDN
  15. 15. / WebRTC 15 Enabled on over 6.2 Billion Devices By 2018
  16. 16. What is WebRTC? 16
  17. 17. / What is WebRTC? 17 Web Real Time Communication
  18. 18. / What is WebRTC? 18 Disrupt!
  19. 19. / What is WebRTC? 19 It’s a technology!
  20. 20. / What is WebRTC? 20 It’s classed as “Experimental”
  21. 21. / What is WebRTC? 21 It’s encrypted
  22. 22. / What is WebRTC? 22 Defined by W3C & IETF, just like HTTP
  23. 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. 24. OK, but what is it? 24
  25. 25. / Ok, but what is it? 25 Enables Video, Audio and Data Sharing in your browser, peer to peer, with no plugins
  26. 26. / Ok, but what is it? 26 What?! Wait! Too many words!
  27. 27. / Ok, but what is it? 27 Video
  28. 28. / Ok, but what is it? / Video 28 A browser friendly camera…
  29. 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. 30. / Ok, but what is it? 30 Audio
  31. 31. / Ok, but what is it? / Audio 31 A Mic
  32. 32. / Ok, but what is it? / Audio Audio APIs 32 An audio stream from an in browser source
  33. 33. Data Sharing 33
  34. 34. / Ok, but what is it? / Data Sharing 34 This can be pretty much anything…
  35. 35. / Ok, but what is it? / Data Sharing 35 An image from canvas…
  36. 36. / Ok, but what is it? / Data Sharing 36 A file
  37. 37. / Ok, but what is it? / Data Sharing 37 Web-torrents
  38. 38. / Ok, but what is it? / Data Sharing 38 Anything!
  39. 39. Peer to Peer 39
  40. 40. / Peer to Peer 40 2 peers
  41. 41. / Peer to Peer 41 3 peers
  42. 42. / Peer to Peer 42 *n peers
  43. 43. / Peer to Peer 43 Peers don’t have to be browsers!
  44. 44. / Peer to Peer 44 But we’ve had peer to peer technology before, what’s different?
  45. 45. / Peer to Peer Direct in your modern browser/app! 45 No plugins!
  46. 46. Awesome! So it’s easy to implement? 46
  47. 47. / Awesome! It’s primarily a web technology aimed at web developers 47
  48. 48. / Awesome! But unfortunately it’s not simple to implement 48
  49. 49. / Awesome! You’ll need a signalling server 49
  50. 50. / Awesome! / Signalling And signalling isn’t a standard 50
  51. 51. / Awesome! / Signalling It might not be very real time though… 51 You could use carrier pigeons!
  52. 52. / Awesome! / Signalling But seriously, there are open source ones… 52
  53. 53. / Awesome! / Signalling And many providers! 53
  54. 54. / Awesome! They’re evolving all the time… and they’re all different… 54 Browser APIs
  55. 55. / Awesome! / Browser APIs There’s a few to choose from… 55 Adapter.js
  56. 56. / Awesome! / Browser APIs They normalise the browsers 56
  57. 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. 58. / Awesome! / Browser APIs Plus many others… 58
  59. 59. / Awesome! / Browser APIs getUserMedia RTCPeerConnection RTCDataChannel 59
  60. 60. / Awesome! / Browser APIs Used to ask your user whether the website can use your media, among other things 60 getUserMedia
  61. 61. / Awesome! / Browser APIs Handles the underlying technology to stream media between 2 peers 61 RTCPeerConnection
  62. 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. 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. 64. But what about firewalls? 64
  65. 65. / Firewalls Built in mechanisms to help 65
  66. 66. / Firewalls A method to go off to a server and get your IP as seen by the world 66 STUN
  67. 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. 68. OK, I get it… Where can I use it? 68
  69. 69. / Where can I use it? 69
  70. 70. / Where can I use it? 70
  71. 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. 72. / Where can I use it? With a plugin… 72 LOL…
  73. 73. What can I do with it? 73
  74. 74. / What can I do with it? Easy answer, use your imagination 74
  75. 75. / What can I do with it? Customer Support 75
  76. 76. / What can I do with it? Enable easier remote working in Contact Centres 76
  77. 77. / What can I do with it? Peer to Peer data transfers in games 77
  78. 78. / What can I do with it? Sales 78 Look at products in real time
  79. 79. / What can I do with it? And many, many more, you just need imagination 79
  80. 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. 81. Security Concerns? 81
  82. 82. / Security Concerns? Of course there are! 82
  83. 83. / https://www.browserleaks.com/webrtc Security Concerns? You can obtain a user’s real IP using WebRTC technology 83
  84. 84. / Security Concerns? Without the user ever knowing 84 You can transfer ∞ data
  85. 85. Things I haven’t even talked about… 85
  86. 86. / Not talked about ICE Candidates 86
  87. 87. / Not talked about Including Mesh, SFUs and MCUs 87 Network layouts
  88. 88. / Not talked about Encryption 88
  89. 89. / Not talked about using canvas for example 89 Playing with the streams in your browser
  90. 90. / Not talked about / Canvas 90
  91. 91. / Not talked about 91 Codecs Opus, G.711, G.722, iLBC, and iSAC VP8 and H264
  92. 92. / Not talked about And probably a whole lot more… 92
  93. 93. / Not talked about It’s a complex topic 93
  94. 94. / Not talked about But it’s not as complicated as VoIP Everyone can get into it 94
  95. 95. Want to get started with WebRTC without having to deal with signalling and browser differences? 95
  96. 96. / Getting started 96 Check out Respoke, it’s free! www.respoke.io
  97. 97. Thanks! Dan Jenkins @dan_jenkins 97

×