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!

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

Cystic Fibrosis e-Health & Telemonitoring Program

appear.in/lisa

chromeexperiments.com/detail/face-substitution/

WebRTC, all the parts

The full WebRTC environment

Web Servers

PSTN Gateway

Jingle Client

Tablet

Mobile Phone

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]

signaling server

1) Initialize

2) Exchange client info

webpage [HTML / JS]

signaling server

1) Initialize

3) Communicate!

Signaling options

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!

Introducing STUN, TURN and ICE

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

Jane’s data Jane’s data

John’s dataJohn’s data

Interactive Connectivity Establishment (ICE)

STUN TURN

Interactive Connectivity Establishment (ICE)

ICESTUN

SUCCESS!

Al…most… there….

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!

What about this competingORTC thing?

BUSTED!

The SDP debate…

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.

§ 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

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

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

Technology

Netcents 2 OCT 2017 - Black Box Corporation...Lisa Kelley, Project Manager lisa.kelley@federal.blackbox.com 703-885-7840 | blackbox.com/governmentsolutions Contact Us NETOPS & INFRASTRUCTURE

Larson Data Communications, Inc. - ccaps.umn.edu · Larson Data Communications, Inc. Presenting today: Mike Larson EVOLVE ACCELERATE CONSOLIDATE

Tom Kelley

Kelley PreCálculo

Second Grade “Unlocking the Keys to Success!”. Second Grade Teachers Kelley Avery Kim Feltman Tracy Mauriello Eve Pipkin Tracy Ransom Lisa

Elizabeth Larson, CBAP, PMP, PMI-PBA, CSM @e larson CEO, … · Elizabeth Larson, CBAP, PMP, PMI-PBA, CSM CEO, Watermark Learning @e_larson Elizabeth Larson ©

Larson 4.1

Kelley Evaluation

Daniel Kelley

god education practices commission state of florida gretchen kelley brantley executi ve director lee ann gustafson legal counsel lisa forbess

larson pe -larson fr - ALUCOIL

Larson 4.4

New Course Focuses on Environfllent Issues in the Fenwaylibrary.emmanuel.edu/archive/sites/default/files/march...Contact Lisa Larson, International Student Advisor/Study Abroad Coordinator,

idph.iowa.gov · Kelley Little 5633814800: Kelley@hometownplg.com OSHA and Employee Rights Hometown Plg. & Htg. Co., Inc. Kelley Little 5633814800: Kelley@hometownplg.com Lennox School

Larson 4.3

Will Kelley

LARSON RUNABOUT

Geoff kelley

Kelley Armstrong

Kelley OnTopic