WebRTC for Everyone! -...

WebRTC for Everyone!Lisa Larson-Kelley

@lisamarienyc LearnFromLisa.com

photo: nuvision action image - Spartan Race

Oh, CRAP.

bit.ly/webrtc-fc14 !@lisamarienyc !

#webrtc!

What is WebRTC?

How is a WebRTC app structured?

What’s the WebRTC API

look like?

Let’s build something!

#webrtc!

photo: theen moy

bit.ly/webrtc-fc14

✓ Core programming

skills

✓ HTML, CSS and

JavaScript

✓ Your preferred HTML

editor

✓Webcam and

microphone

✓ Latest build of

Chrome or

Firefox

Let’s Go!

What is WebRTC?

look like?

#webrtc!

“There is nothing permanent except change.”

– Heraclitus

Show me!

#webrtc!

apprtc.appspot.com

https://apprtc.appspot.com/?r=01234567

#webrtc!

talky.io

#webrtc!

zingaya.com

#webrtc!

peer5.com

#webrtc!

cubeslam.com

#webrtc!

chromeexperiments.com/detail/face-substitution/

VOLUNTEER!

#webrtc!

Where did WebRTC come from?

#webrtc!

§ VOIP technologies (UDP) § XMPP/ Jabber § (The “F” word)…

Before there was WebRTC, there was…

1.0 released in 2007

1.0 released in 2010

Video Conferencing for Everyone!

Open Source is good.

#webrtc!

IETF RTC WEB WG

W3C WebRTC WG

Google acquires the keys to the kingdom...

And opens the gates!bit.ly/webrtc-fc14 !

@lisamarienyc !#webrtc!

A(nother) codec war

#webrtc!

A(nother) codec war

#webrtc!

A(nother) codec war

#webrtc!

WebRTC support across browsers

DESKTOP

MOBILE

#webrtc!

WebRTC support across browsers

http://isWebRTCReadyYet.com

#webrtc!

Getting Firefox and Chrome talking

adapter.js

Peace, and hope for standards

#webrtc!

The potential of WebRTC

1 billion +

#webrtc!

The Service Approach to Deploying WebRTC Apps

STUN TURN

The DIY Approach to Deploying WebRTC Apps

STUN TURN

§PSTN Frameworks - Phono - Open source JavaScript phone API: - sipML5 - Open source JavaScript SIP client - FreeSWITCH - scalable open source cross-platform telephony platform

§ PeerJS § SimpleWebRTC § easyRTC § webRTC.io

§ RTC.io (node toolbox)

JavaScript Frameworks

#webrtc!

§WebRTC services and platforms - Tokbox.com Open Tok platform - Vidyo.com - rtc.io - Xirsys.com hosted server infrastructure

§ Instant free video conferencing - apprtc.appspot.com - AddLive.com - Vline.com - Vsee.com (free and premium)

Some ready-to-use services

#webrtc!

What is WebRTC?

look like?

#webrtc!

Architecture of a WebRTC application

#webrtc!

Architecture of a WebRTC app

webpage [HTML / JS]

#webrtc!

WebRTC app, with signaling

webpage [HTML / JS]

signaling server

[HTTP or Websockets]

#webrtc!

webpage [HTML / JS]

signaling server

webpage [HTML / JS]

#webrtc!

webpage [HTML / JS]

signaling server

webpage [HTML / JS]

#webrtc!

signaling server

browser Y

browser Z

browser X

Multi-peer Topology: Full Mesh

The full WebRTC environment

Web Servers

PSTN Gateway

Jingle Client

Tablet

Mobile Phone

Laptop PC

SIP Client

Other Servers

Source: WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web

#webrtc!

Servers. Wait... servers?!

#webrtc!

Why do we need servers with WebRTC?

I was promised peer-to-peer!

#webrtc!

Why do we need servers with WebRTC?I was promised peer-to-peer!

#webrtc!

ICE STUN

Introducing STUN, TURN and ICE

192.168.0.3 225.35.6.2.188

192.168.0.3 = 225.35.6.2.188

192.168.0.4 = 225.35.6.2.189

192.168.0.5 = 225.35.6.2.190

192.168.0.6 = 225.35.6.2.191

Respond to 192.168.0.3

Establishing Peer Connections: An Overview

“Hey, what’s my external IP address?”

“My IP address is 41.19.4.1.255”

STUNYour external IP Address is

225.35.6.2.188

“My IP address is 225.35.6.2.188

Peer-to-Peer Connection

How STUN servers work

Peer-to-Peer Connection

How STUN servers work (sometimes…)

How TURN works

Jane’s data Jane’s data

John’s dataJohn’s data

Interactive Connectivity Establishment (ICE)

STUN TURN

#webrtc!

225.35.6.2.188

987.65.4.3.210

192.168.0.3

225.35.6.2.188

123.45.6.7.890

192.168.0.111

441.19.4.1.255

987.65.4.3.210

Local IP

External IP

Relay address

ICE Candidates

How ICE works

But Wait...

Signalingbit.ly/webrtc-fc14 !

Hello, Signaling

#webrtc!

Signaling options

§HTTP POST §Google’s Channel API §XHR polling §Server-Sent Events §XMPP (Jabber) over WebSockets §SIP over WebSockets §JavaScript SIP Libraries (JsSIP, SIP-JS, SIPML5...) §WebSockets/JSON §Jingle (used by GoogleTalk) §Signalmaster (open source signaling server)

#webrtc!

Server-to-browser

Server-to-server

#webrtc!

GEEK JOKE BREAK

#webrtc!

“I’d tell you a UDP joke…

#webrtc!

“I’d tell you a UDP joke… but you probably wouldn’t get it.”

#webrtc!

What is WebRTC?

look like?

#webrtc!

Ladies and Gentlemen, The WebRTC APIs:

MediaStreamRTCPeerConnection

RTCDataChannel

#webrtc!

MediaStream (getUserMedia)

#webrtc!

The MediaStream API

getUserMedia()

MediaElement

RTCPeerConnection

#webrtc!

A MediaStream object

EVENTS .end .addtrack .endtrack

MediaStream

MediaStreamTrackchannel channel

ATTRIBUTES .id

STATES .readyState

EVENTS started ended muted unmuted overconstrained

ATTRIBUTES .id

#webrtc!

http://localhost:8888/webrtc/fluent-demos/fc-webrtc-mediastream.html

#webrtc!

RTCPeerConnection

#webrtc!

RTCPeerConnection, under the hoodvia www.WebRTC.org

Overall architecture diagram from www.WebRTC.org

Set up signalling channel

Initiating a peer connection

Get local media

Set up peer connection

Attach media to

connection

Exchange session

descriptions

mediaStream API

RTCPeerConnection API

Overall architecture diagram from www.WebRTC.org

#webrtc!

http://webrtchacks.com/sdp-anatomy/

#webrtc!

Instantiating a RTCPeerConnection object

myPeerConnection = new webkitRTCPeerConnection(config, constraints);

myPeerConnection = new webkitRTCPeerConnection(null);

var config = {"iceServers":[{"url":"stun:stun.1.google.com:19302"}, {"url":"stun:stun1.1.google.com:19302"}, {"url":"turn:198.76.543.2", "credential":"YourPasswordHere"}]};

#webrtc!

localhost:8888/webrtc/fluent-demos/fc-webrtc-rtcpeerconnection.html

#webrtc!

RTCDataChannel

#webrtc!

<DATA>

RTCDataChannel

• Fast and efficient sharing of data • Great for:

• Multiplayer games • Text chat • Remote applications • File transfer

• Same API as WebSockets (basically) • Supports strings as well as some JS binary types such as Blob, ArrayBuffer

and ArrayBufferView • Datagram Transport Layer Security (DTLS) • Congestion control • Uses Stream Control Transmission Protocol (SCTP)

<DATA>

#webrtc!

sharefest.me

File Sharing

#webrtc!

Distributed Content Delivery

peercdn.com

peer5.com

#webrtc!

RTCDataChannel API

var datachannel = myPeerConnection.createDataChannel(label);

http://simpl.info/rtcdatachannel/

#webrtc!

Real-world deployment, for now...

WebSockets

#webrtc!

RTCDataChannel WebSockets

#webrtc!

RTCDataChannel

#webrtc!

What is WebRTC?

look like?

#webrtc!

Ok, now for a functional app!

#webrtc!

SimpleWebRTC

#webrtc!

Want to learn more?

#webrtc!

Resources § http://www.html5rocks.com/en/tutorials/webrtc/basics/ § Simplest possible getUserMedia demo: http://simpl.info/gum § RTCPeerConnection 'on one page', i.e. without signalling:

http://simpl.info/pc § Simplest possible RTCDataChannel example:

http://simpl.info/dc § With RTCPeerConnection: http://simpl.info/screencapture § GetUserMedia Constraints:

http://simpl.info/getusermedia/constraints § WebRTC video chat: apprtc.appspot.com (with source code) § webrtc-experiment.com - Muaz Khan § Codelab using Socket.IO for signaling:

http://bitbucket.org/webrtc/codelab § Capturing audio and video in HTML5:

http://html5rocks.com/en/tutorials/getusermedia/intro § APIs and RTCWEB Protocols of the HTML5 Real-Time Web,

Alan Johnston and Daniel Burnett. http://webrtcbook.com

http://bit.ly/lisa-rtc

#webrtc!

“WebRTC is a new front in the long war for an open and unencumbered web.”

– Brendan Eich, Mozilla CTO and inventor of JavaScript

The Potential of WebRTC

6.2 billion by 2018

Financial ServicesHealthcare Insurance

“What’s the biggest barrier to WebRTC adoption?”

Source: WebRTC World Outlook 2014 Survey

#webrtc!

Welcome to the new frontier of real-time communication on the web!

@lisamarienyc | LearnFromLisa.com bit.ly/learnwebrtc bit.ly/webrtc-fc14 !

WebRTC for Everyone! -...

Documents

WebRTC as a Market Disruptor to OTT VoIP Services

Kranky Geek WebRTC 2015 - What's next for WebRTC?

Upperside WebRTC conference - WebRTC intro

Web Call Server - Specification - Streaming Video WebRTC ... · WebRTC Audio Calls, SIP, Messaging WebRTC Video Calls Flash Video Calls WebRTC Broadcasting Function Description Purpose

MRTC Documentation Mizutech WebRTC-SIP gateway User … · The WebRTC-SIP gateway acts as a relay between the WebRTC clients (usually browsers) and your SIP server(s) (IP PBX, Softswitch,

WebRTC getStats - WebRTC Meetup Tokyo 5 LT

WebRTC Reborn - Cloud Expo / WebRTC Summit

WebRTC IMS SySTeMS and WebRTC PRoPRIeTaRy ISlandS...WebrtC Ims systems and WebrtC Proprietary Islands alCaTel-luCenT WhITe PaPeR 1 InTRoduCTIon WebRTC is a game-changing technology

WebRTC Best Practices - WebRTC Paris 2013 - Chad Hart - Dialogic

Webrtc Tutorial

Closed Strings as Imaginary D-branes

WebRTC Cookbook

innovaphone WebRTC

Release Notes Version 8.6.1 RealPresence Collaboration Server€¦ · WebRTC Modular MCU with WebRTC support, and WebRTC Service support. WebRTC - VP8 and OPUS - in Mixed Group Browser

WebRTC standards overview -- WebRTC Barcelona Meetup MWC16

webrtc workshop2

Lisboa WebRTC - May 21, 2015 - Intro to WebRTC

Chapter 8 “Character Arrays and Strings” · DECLARING AND INITIALIZING STRING VARIABLES: 3 C does not support strings as a data type. Strings are represented as character arrays

WebRTC for Telco: Informa's WebRTC Global Summit Preconference

WebRTC @ Kamailio