What is WebRTC? What can I do with it?

What is WebRTC?What can I do with it?

Dan JenkinsFounder of Nimble Ape Ltd Developer at Respoke

1

Who am I?

2

/ Who am I?

Dan JenkinsNode.js Developer

Love Lego & TechnicGeneral Geek

Founder of Nimble Ape Ltd

❤️ open source

3

/ Who am I?

github.com/danjenkins4

/ Who am I?

@dan_jenkins5

/ Who am I?

nimblea.pe | @nimbleapeltd6

/

7

Who am I?

/ Who am I?

Got into VoIP years agoVoIP is difficult

Spent the past year working on a platform called RespokeRespoke makes WebRTC easier

8

WebRTC & I

WebRTC

9

/ WebRTC

10

Who’s heard of WebRTC?

/ WebRTC

Who’s developed something with WebRTC?

11

/ WebRTC

12

Who’s used WebRTC?

/ WebRTC

13

Talky.io

Appear.inScreenhero

Hangouts

/ WebRTC

14

Sharefest Amazon Mayday PeerCDN

/ WebRTC

15

Enabled on over 6.2 Billion Devices By 2018

What is WebRTC?

16

/ What is WebRTC?

17

Web Real Time Communication

/ What is WebRTC?

18

Disrupt!

/ What is WebRTC?

19

It’s a technology!

/ What is WebRTC?

20

It’s classed as “Experimental”

/ What is WebRTC?

21

It’s encrypted

/ What is WebRTC?

22

Defined by W3C & IETF, just like HTTP

/ 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:

OK, but what is it?

24

/ Ok, but what is it?

25

Enables Video, Audio and Data Sharing in your browser, peer to peer, with no plugins

/ Ok, but what is it?

26

What?! Wait! Too many words!

/ Ok, but what is it?

27

Video

/ Ok, but what is it? / Video

28

A browser friendly camera…

/ 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…

/ Ok, but what is it?

30

Audio

/ Ok, but what is it? / Audio

31

A Mic

/ Ok, but what is it? / Audio

Audio APIs

32

An audio stream from an in browser source

Data Sharing

33

/ Ok, but what is it? / Data Sharing

34

This can be pretty much anything…

/ Ok, but what is it? / Data Sharing

35

An image from canvas…

/ Ok, but what is it? / Data Sharing

36

A file

/ Ok, but what is it? / Data Sharing

37

Web-torrents

/ Ok, but what is it? / Data Sharing

38

Anything!

Peer to Peer

39

/ Peer to Peer

40

2 peers

/ Peer to Peer

41

3 peers

/ Peer to Peer

42

*n peers

/ Peer to Peer

43

Peers don’t have to be browsers!

/ Peer to Peer

44

But we’ve had peer to peer technology before,

what’s different?

/ Peer to Peer

Direct in your modern browser/app!

45

No plugins!

Awesome! So it’s easy to implement?

46

/ Awesome!

It’s primarily a web technologyaimed at web developers

47

/ Awesome!

But unfortunately it’s not simple to implement

48

/ Awesome!

You’ll need a signalling server

49

/ Awesome! / Signalling

And signalling isn’t a standard

50

/ Awesome! / Signalling

It might not be very real time though…

51

You could use carrier pigeons!

/ Awesome! / Signalling

But seriously, there are open source ones…

52

/ Awesome! / Signalling

And many providers!

53

/ Awesome!

They’re evolving all the time… and they’re all different…

54

Browser APIs

/ Awesome! / Browser APIs

There’s a few to choose from…

55

Adapter.js

/ Awesome! / Browser APIs

They normalise the browsers

56

/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

/ Awesome! / Browser APIs

Plus many others…

58

/ Awesome! / Browser APIs

getUserMediaRTCPeerConnection

RTCDataChannel59

/ Awesome! / Browser APIs

Used to ask your user whether the website can use your media, among other things

60

getUserMedia

/ Awesome! / Browser APIs

Handles the underlying technology

to stream media between 2 peers

61

RTCPeerConnection

/ 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

/ 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…

But what about firewalls?

64

/ Firewalls

Built in mechanisms to help

65

/ Firewalls

A method to go off to a server and get your IP as seen by the world

66

STUN

/ 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

OK, I get it…Where can I use it?

68

/ Where can I use it?

69

/ Where can I use it?

70

/ 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

/ Where can I use it?

With a plugin…

72

LOL…

What can I do with it?

73

/ What can I do with it?

Easy answer,use your imagination

74

/ What can I do with it?

Customer Support

75

/ What can I do with it?

Enable easier remote working in Contact Centres

76

/ What can I do with it?

Peer to Peer data transfers in games

77

/ What can I do with it?

Sales

78

Look at products in real time

/ What can I do with it?

And many, many more, you just need imagination

79

/ What can I do with it?

None of these ideas are newBut 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

Security Concerns?

81

/ Security Concerns?

Of course there are!

82

/

https://www.browserleaks.com/webrtc

Security Concerns?

You can obtain a user’s real IP using WebRTC technology

83

/ Security Concerns?

Without the user ever knowing

84

You can transfer ∞ data

Things I haven’t even talked about…

85

/ Not talked about

ICE Candidates

86

/ Not talked about

Including Mesh, SFUs and MCUs

87

Network layouts

/ Not talked about

Encryption

88

/ Not talked about

using canvas for example

89

Playing with the streams in your browser

/ Not talked about / Canvas

90

/ Not talked about

91

CodecsOpus, G.711, G.722, iLBC, and iSAC

VP8 and H264

/ Not talked about

And probably a whole lot more…

92

/ Not talked about

It’s a complex topic

93

/ Not talked about

But it’s not as complicated as VoIPEveryone can get into it

94

Want to get started with WebRTC without having to

deal with signalling and browser differences?

95

/ Getting started

96

Check out Respoke, it’s free!www.respoke.io

Thanks!Dan Jenkins

@dan_jenkins

97