baby steps: a webrtc tutorial
DESCRIPTION
Tsahi, is gonna make sure you've all got the basic fundamentals of WebRTC under your belt. It's a 101 tutorial, it's a baseline, may have heard it before but we want no one left behind. Already an expert? Then consider this a 20 minute nap time! In this session, we cover the basics of what WebRTC is, what network components participate in a WebRTC service and where to find the right resources to learn more about WebRTC.TRANSCRIPT
![Page 1: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/1.jpg)
Baby Steps: A WebRTC Tutorial Your 101
27, June 2014
Tsahi Levent-Levi
![Page 2: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/2.jpg)
Welcome!
6/29/2014 2
And thank you for the opportunity
HikingArtist
![Page 3: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/3.jpg)
20 Minutes on WebRTC?
1. What is WebRTC?
2. Entities in WebRTC
3. How to Learn WebRTC?
6/29/2014 3
![Page 4: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/4.jpg)
What is WebRTC?
6/29/2014 4
1
![Page 5: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/5.jpg)
WebRTC offers real time communication natively from a web browser
WebRTC is a media engine with JavaScript APIs
6/29/2014 5
![Page 6: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/6.jpg)
WebRTC is a Technology
not a Solution TheBusyBrain
![Page 7: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/7.jpg)
How are Calls Made in WebRTC?
6/29/2014 7
1 2
3 4
5
![Page 8: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/8.jpg)
3 Main APIs
GetUserMedia Gain access to camera, microphone or screen of the device
PeerConnection Does everything… encodes and decodes media, sends it over the network, takes care of NAT traversal, etc.
DataChannel Send arbitrary data directly between browsers – your low latency friend for whatever it is you want
6/29/2014 8
![Page 9: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/9.jpg)
Why all the fuss?
6/29/2014 9
![Page 10: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/10.jpg)
Where
6/29/2014 10
& When
![Page 11: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/11.jpg)
6/29/2014 11
0
100
200
300
400
500
600
700
800
900
1000
Maxthon Dolphin UC Browser Firefox Opera Opera Mini Chrome Candy Crush Facebook Whatsapp
Do
wn
load
s in
mill
ion
s
Mobile is Tricky
Popular Android browsers supporting WebRTC
Popular Android browsers NOT supporting WebRTC
Popular Android applications
June 2014
![Page 12: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/12.jpg)
We aren’t there yet…
people search reveals:
6/29/2014 12
WebRTC
HTML
VoIP
Big Data
![Page 13: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/13.jpg)
Entities in WebRTC
6/29/2014 13
2
![Page 14: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/14.jpg)
WebRTC is…
• An implementation of SRTP with an SDP control mechanism on top
• A media engine with G.711, Opus and VP8 codecs
• A VoIP implementation using STUN, TURN and ICE for NAT traversal
6/29/2014 14
![Page 15: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/15.jpg)
Client-side
6/29/2014 15
Browser
• Chrome & Firefox
• IE & Safari
Mobile
• Android browsers
• SDKs for apps
• iOS browsers
PC app
• SDKs for PC
Embedded
• Ported SDK
![Page 16: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/16.jpg)
Signaling
• Left for the developers to decide (BYOS)
6/29/2014 16
Technique Advantages Server Side Requirements
WebSocket No signaling infrastructure required WebSocket server with proprietary protocol implementation
XHR No signaling infrastructure required Web server with proprietary protocol implementation
SIP over WebSocket Easy path to SIP interoperability (and PSTN connectivity)
SIP Registrar/Proxy server with support of SIP over WebSocket
XMPP/Jingle Easy interoperability with XMPP clients XMPP server with support of XMPP WebSocket transport
Data Channel Low latency signaling and improved privacy
WebSocket or web server with proprietary implementation to establish the Data Channel
![Page 17: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/17.jpg)
STUN
1. What’s my public IP?
2. Create a pinhole in the NAT
• Easy to find “free” STUN servers
• Works “most” of the time
6/29/2014 17
![Page 18: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/18.jpg)
TURN
1. When STUN doesn’t work…
2. Relay all media through a TURN server
• Bandwidth hog
• Expect 10-20% of the sessions to require TURN*
6/29/2014 18
![Page 19: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/19.jpg)
Server-side Media Processing
• Non-mesh multipoint
• Broadcasting
• Recording
• Analytics
• Interconnecting
• …
6/29/2014 19
![Page 20: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/20.jpg)
How to Learn WebRTC?
6/29/2014 20
3
![Page 21: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/21.jpg)
The Bible
6/29/2014 21
![Page 22: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/22.jpg)
The Step-by-step
6/29/2014 22
![Page 23: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/23.jpg)
The Living-room Chat
6/29/2014 23
![Page 24: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/24.jpg)
The Hard-Core
6/29/2014 24
![Page 25: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/25.jpg)
The Websites
• HTML5 Rocks http://www.html5rocks.com/en/search?q=webrtc
• WebRTC Hacks http://webrtchacks.com/
• Google Groups (discuss-webrtc) https://groups.google.com/forum/#!forum/discuss-webrtc
6/29/2014 25
![Page 27: Baby Steps: A WebRTC Tutorial](https://reader034.vdocument.in/reader034/viewer/2022042606/54b72bb64a79591b2d8b45fa/html5/thumbnails/27.jpg)
Thank You!
Tsahi Levent-Levi
http://bloggeek.me
6/29/2014 27