Baby Steps: A WebRTC Tutorial

Baby Steps: A WebRTC 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 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

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

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 codecs

• A VoIP implementation using STUN, TURN and ICE for NAT traversal

6/29/2014 14

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

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

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

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

Server-side Media Processing

• Non-mesh multipoint

• Broadcasting

• Recording

• Analytics

• Interconnecting

• …

6/29/2014 19

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 Groups (discuss-webrtc) https://groups.google.com/forum/#!forum/discuss-webrtc

6/29/2014 25

The Weekly

6/29/2014 26

http://webrtcweekly.com/

Thank You!

Tsahi Levent-Levi

http://bloggeek.me

tsahil@bloggeek.me

6/29/2014 27