Real-time Communication on the Web, For Everyone! (Lisa Larson-Kelley)

@lisamarienyc | LearnFromLisa.comFOWA Boston 2014

Future of Web Apps Boston 2014 Oct 28, 2014 !

Lisa Larson-Kelley LearnFromLisa.com @lisamarienyc http://bit.ly/fowawebrtc

Real-time Communication – for Everyone!

http://LearnFromLisa.com


http://bit.ly/fowawebrtc


What is WebRTC?

WebRTC



Communication.




@lisamarienyc | LearnFromLisa.comFOWA Boston 2014 Photo: @trevorcummings


@lisamarienyc | LearnFromLisa.comFOWA Boston 2014 Photo: @taylorherring


@lisamarienyc | LearnFromLisa.comFOWA Boston 2014 Photo: @NASA



Enter, WebRTC.

WebRTC



It’s going to be “in”

all the things.



What is WebRTC?



Amazon Kindle Mayday Button



Google ChromeCast

Google ChromeCast



Cystic Fibrosis e-Health & Telemonitoring Program



appear.in/lisa


http://www.appear.in/lisa


chromeexperiments.com/detail/face-substitution/


http://chromeexperiments.com/detail/face-substitution/


WebRTC, all the parts



The full WebRTC environment

Web Servers

PSTN Gateway

Jingle Client

Tablet

Mobile Phone

Phone

PSTN

Laptop PC

SIP Client

Other Servers

WebRTC



MediaStreamRTCDataChannel

RTCPeerConnection

WebRTC



Get connected using WebRTC

signaling server

!HTTP, Websockets, or ??

webpage [HTML / JS]

1) Initialize




webpage [HTML / JS]

webpage [HTML / JS]

signaling server


1) Initialize

2) Exchange client info



webpage [HTML / JS]

webpage [HTML / JS]


signaling server


1) Initialize


3) Communicate!



Signaling options

+ +




webpage [HTML / JS]

webpage [HTML / JS]

Trying to…



1) Initialize and introduce (signaling)


3) NAT traversal via STUN / TURN servers

4) Communicate!



Why do we need servers with WebRTC?

I was promised peer-to-peer!



STUN

Introducing STUN, TURN and ICE

ICE

TURN



Establishing Peer Connections: An Overview

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



How STUN servers work

“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.188Peer-to-Peer Connection



How STUN servers work (sometimes…)

Peer-to-Peer



How TURN works

TURN

Jane’s data Jane’s data

John’s dataJohn’s data



Interactive Connectivity Establishment (ICE)

STUN TURN

ICE



Interactive Connectivity Establishment (ICE)

STUN

TURN

ICESTUN

SUCCESS!



Al…most… there….

MYTHs

BUSTED!

@lisamarienyc | LearnFromLisa.com




Opaque (unless you’re a telecom engineer)

BUSTED!



Not well documented

BUSTED!



Doesn’t work in IE or Safari, so why bother?

(No video on the iPad, revisited)(sorta) BUSTED!



Browser support today…

DESKTOP

MOBILE

IsWebRTCReadyYet.com+ Skype team

announcement 10/27/14 –

it’s coming!


http://IsWebRTCReadyYet.com


What about this competingORTC thing?

BUSTED!



The SDP debate…

http://www.w3.org/community/ortc/


http://www.w3.org/community/ortc/


is object-oriented.


@lisamarienyc | LearnFromLisa.comFOWA Boston 2014 @lisamarienyc | LearnFromLisa.com



"It's kind of fun to do the impossible."

- Walt Disney

@lisamarienyc | LearnFromLisa.com

WebRTC



How to get started



What do you need?

✓Core programming skills

✓ HTML, CSS and

JavaScript

✓Your preferred HTML editor

✓Webcam and microphone

✓ Latest build of

Chrome or

Firefox



Use services / libraries

STUN TURN



§Instant free video conferencing ๏ apprtc.appspot.com ๏ AddLive.com ๏ Vline.com ๏ Vsee.com (free and premium) ๏ (and more every day!)

Some ready-to-use services

bit.ly/fowawebrtc




§WebRTC services and platforms ๏ Tokbox.com Open Tok platform ๏ Appear.in ๏ Vidyo.com ๏ rtc.io ๏ Xirsys.com hosted server

infrastructure

Some ready-to-use services

Low cost for developers! appear.in

$200-400/mo. entire infrastructure amazon web services

$1500/mo to ramp up now don’t need dedicated hardware/software



The DIY approach

STUN TURN



Prebuilt frameworks – Telephony

‣Phono - Open source JavaScript phone API

‣sipML5 - Open source JavaScript SIP client

‣FreeSWITCH - Scalable open source cross-platform service



‣PeerJS

‣SimpleWebRTC

‣easyRTC

‣webRTC.io

‣RTC.io (node toolbox)

Prebuilt frameworks – Web



SimpleWebRTC is simple.



SimpleWebRTC is simple.



§ Simplest possible API demos § HTML5Rocks tutorials § Video chat: apprtc.appspot.com

(with source code) § webrtc-experiment.com - Muaz Khan § http://webrtcbook.com - Alan Johnston and Daniel Burnett § And more!

Resources

http://bit.ly/lisa-rtc


http://apprtc.appspot.com/

http://webrtc-experiment.com

http://webrtcbook.com/


Potential of WebRTC

6.2 billion by 2018

Financial ServicesHealthcare Insurance



Speaking Exchange Created by FCB BRASIL

Powered by WebRTC



Communication



Communication Connection= Photo: @Popicinio



@lisamarienyc | LearnFromLisa.com bit.ly/learnwebrtc

Thank you.

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

bit.ly/fowawebrtc



Technology

Real-time Communication on the Web, For Everyone! (Lisa Larson-Kelley)