Baby Steps:AWebRTC Tutorial Your 101 27, June 2014 Tsahi Levent-Levi
Welcome! 6/29/2014 2 And thank you for the opportunity HikingArtist
20 Minutes on WebRTC? 1. What is WebRTC? 2. Entities in WebRTC 3. How to Learn WebRTC? 6/29/2014 3
What is WebRTC? 6/29/2014 4 1
WebRTC offers real time communication natively from a web browser WebRTC is a media engine with JavaScript APIs 6/29/2014 5
WebRTC is a Technology not a Solution TheBusyBrain
How are Calls Made in WebRTC? 6/29/2014 7 1 2 3 4 5
3 MainAPIs GetUserMedia Gain access to camera, microphone or screen of the device PeerConnection Does everything… encodes ...
Why all the fuss? 6/29/2014 9
Where 6/29/2014 10 & When
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 C...
We aren’t there yet… people search reveals: 6/29/2014 12 WebRTC HTML VoIP Big Data
Entities in WebRTC 6/29/2014 13 2
WebRTC is… • An implementation of SRTP with an SDP control mechanism on top • A media engine with G.711, Opus and VP8 code...
Client-side 6/29/2014 15 Browser • Chrome & Firefox • IE & Safari Mobile • Android browsers • SDKs for apps • iOS browsers...
Signaling • Left for the developers to decide (BYOS) 6/29/2014 16 Technique Advantages Server Side Requirements WebSocket ...
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 ...
TURN 1. When STUN doesn’t work… 2. Relay all media through a TURN server • Bandwidth hog • Expect 10-20% of the sessions t...
Server-side Media Processing • Non-mesh multipoint • Broadcasting • Recording • Analytics • Interconnecting • … 6/29/2014 ...
How to Learn WebRTC? 6/29/2014 20 3
The Bible 6/29/2014 21
The Step-by-step 6/29/2014 22
The Living-room Chat 6/29/2014 23
The Hard-Core 6/29/2014 24
The Websites • HTML5 Rocks http://www.html5rocks.com/en/search?q=webrtc • WebRTC Hacks http://webrtchacks.com/ • Google Gr...
The Weekly 6/29/2014 26 http://webrtcweekly.com/
Thank You! Tsahi Levent-Levi http://bloggeek.me tsahil@bloggeek.me 6/29/2014 27
Upcoming SlideShare
Loading in …5
×

Baby Steps: A WebRTC Tutorial

14,092 views

Published on

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.

Published in: Technology
License: CC Attribution License
1 Comment
16 Likes
Statistics
Notes
no profile picture user
Show More
No Downloads
Views
Total views
14,092
On SlideShare
0
From Embeds
0
Number of Embeds
255
Actions
Shares
0
Downloads
448
Comments
1
Likes
16
Embeds 0
No embeds

No notes for slide

Baby Steps: A WebRTC Tutorial

  1. 1. Baby Steps:AWebRTC Tutorial Your 101 27, June 2014 Tsahi Levent-Levi
  2. 2. Welcome! 6/29/2014 2 And thank you for the opportunity HikingArtist
  3. 3. 20 Minutes on WebRTC? 1. What is WebRTC? 2. Entities in WebRTC 3. How to Learn WebRTC? 6/29/2014 3
  4. 4. What is WebRTC? 6/29/2014 4 1
  5. 5. WebRTC offers real time communication natively from a web browser WebRTC is a media engine with JavaScript APIs 6/29/2014 5
  6. 6. WebRTC is a Technology not a Solution TheBusyBrain
  7. 7. How are Calls Made in WebRTC? 6/29/2014 7 1 2 3 4 5
  8. 8. 3 MainAPIs 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
  9. 9. Why all the fuss? 6/29/2014 9
  10. 10. Where 6/29/2014 10 & When
  11. 11. 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 Downloadsinmillions Mobile is Tricky Popular Android browsers supporting WebRTC Popular Android browsers NOT supporting WebRTC Popular Android applications June 2014
  12. 12. We aren’t there yet… people search reveals: 6/29/2014 12 WebRTC HTML VoIP Big Data
  13. 13. Entities in WebRTC 6/29/2014 13 2
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. Server-side Media Processing • Non-mesh multipoint • Broadcasting • Recording • Analytics • Interconnecting • … 6/29/2014 19
  20. 20. How to Learn WebRTC? 6/29/2014 20 3
  21. 21. The Bible 6/29/2014 21
  22. 22. The Step-by-step 6/29/2014 22
  23. 23. The Living-room Chat 6/29/2014 23
  24. 24. The Hard-Core 6/29/2014 24
  25. 25. 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
  26. 26. The Weekly 6/29/2014 26 http://webrtcweekly.com/
  27. 27. Thank You! Tsahi Levent-Levi http://bloggeek.me tsahil@bloggeek.me 6/29/2014 27

×