Embed Size (px)
Citation preview
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
