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.inScreenhero
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