AstriCon 2015: WebRTC: How it Works, and How it Breaks

WebRTC How it works How it breaks How we fixed it

CAN YOU SPEAK MAGIC?

Ben Klang

WebRTC

WebRTCHow it works

WebRTCHow it worksHow it breaks

WebRTCHow it worksHow it breaksHow we fixed it

WHAT WEBRTC IS

WHAT WEBRTC IS•Javascript access to Camera and Mic

WHAT WEBRTC IS•Javascript access to Camera and Mic•High Quality Video & Audio Codecs

WHAT WEBRTC IS•Javascript access to Camera and Mic•High Quality Video & Audio Codecs•Techniques for traversing NAT

WHAT WEBRTC IS•Javascript access to Camera and Mic•High Quality Video & Audio Codecs•Techniques for traversing NAT•Peer-to-Peer

WHAT WEBRTC IS•Javascript access to Camera and Mic•High Quality Video & Audio Codecs•Techniques for traversing NAT•Peer-to-Peer•A Data Channel

WHAT WEBRTC IS•Javascript access to Camera and Mic•High Quality Video & Audio Codecs•Techniques for traversing NAT•Peer-to-Peer•A Data Channel•A Tool for Developers

WHAT WEBRTC IS NOT

WHAT WEBRTC IS NOT•…a Polished End-User Product

WHAT WEBRTC IS NOT•…a Polished End-User Product•…required to interop…but may

WHAT WEBRTC IS NOT•…a Polished End-User Product•…required to interop…but may•…the same thing to every application

WHAT WEBRTC IS NOT•…a Polished End-User Product•…required to interop…but may•…the same thing to every application•…finished.

But don’t sweat it

Communication Topology

Alice BobThe Trapezoid

Alice BobThe Triangle

The WebRTC TriangleAlice Bob

Signaling

The WebRTC TriangleAlice Bob

Signaling

WebRTC Infrastructure

http://

Signaling

http://

Signaling

http://

Signaling

http://

Signaling

STUN & TURNNAT Traversal

http://

Signaling

STUN & TURN

SFU or MCU

NAT Traversal

Larger Multiparty Video Conferences

http://

Signaling

Recording Conferencing PSTN Gateway

STUN & TURN

SFU or MCU

NAT Traversal

Larger Multiparty Video Conferences

WEBRTC SIGNALING

WEBRTC SIGNALING•Can be anything you like

http://

WEBRTC SIGNALING•Can be anything you like•Select based on application requirements

http://

WEBRTC SIGNALING•Can be anything you like•Select based on application requirements•Integrate with existing or greenfield?

http://

WEBRTC SIGNALING•Can be anything you like•Select based on application requirements•Integrate with existing or greenfield?•Federate? Or Not?

http://

WEBRTC SIGNALING•Can be anything you like•Select based on application requirements•Integrate with existing or greenfield?•Federate? Or Not?•Anonymous or Real Names?

http://

CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?CAN YOU SPEAK MAGIC?

http://

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

s=- t=0 0 m=audio 61001 RTP/SAVPF 109

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

http://

ICE/STUN/TURN

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

http://

0518 0

=audio

54609 R

TP/SAVPF 1

Bob is at:

v=0 o=bob 19915 0 IN IP4 0.0.0.0

Alice Bob

Xhttp://

That’s how it works

Here’s how it breaks

ENVIRONMENTAL PROBLEMS

•Microphone or Speakers Muted

•Microphone or Speakers Muted•Too Dark or Too Backlit

•Microphone or Speakers Muted•Too Dark or Too Backlit•HW or Driver Issues

•Microphone or Speakers Muted•Too Dark or Too Backlit•HW or Driver Issues•USB Headsets

•Microphone or Speakers Muted•Too Dark or Too Backlit•HW or Driver Issues•USB Headsets•I’m looking at you, Windows

•Microphone or Speakers Muted•Too Dark or Too Backlit•HW or Driver Issues•USB Headsets•I’m looking at you, Windows•https://test.webrtc.org/

USABILITY PROBLEMS

USABILITY PROBLEMS•Failing to deploy TLS Cert

USABILITY PROBLEMS•Failing to deploy TLS Cert•Not allowing user-chosen device selection

USABILITY PROBLEMS•Failing to deploy TLS Cert•Not allowing user-chosen device selection•Video element rendered off-screen

USABILITY PROBLEMS•Failing to deploy TLS Cert•Not allowing user-chosen device selection•Video element rendered off-screen•<video> or <audio> paused

BROWSER PROBLEMS

BROWSER PROBLEMS•Spec still evolving

BROWSER PROBLEMS•Spec still evolving•…though 1.0 is on the horizon

BROWSER PROBLEMS•Spec still evolving•…though 1.0 is on the horizon•Still no native IE or Safari :(

BROWSER PROBLEMS•Spec still evolving•…though 1.0 is on the horizon•Still no native IE or Safari :(•MUCH more stable than 1 year ago

BROWSER PROBLEMS•Spec still evolving•…though 1.0 is on the horizon•Still no native IE or Safari :(•MUCH more stable than 1 year ago•Chrome dropping non-TLS HTTP

BROWSER PROBLEMS•Spec still evolving•…though 1.0 is on the horizon•Still no native IE or Safari :(•MUCH more stable than 1 year ago•Chrome dropping non-TLS HTTP• https://webrtcstandards.info/

BROWSER PROBLEMS•Spec still evolving•…though 1.0 is on the horizon•Still no native IE or Safari :(•MUCH more stable than 1 year ago•Chrome dropping non-TLS HTTP• https://webrtcstandards.info/•Well, Everybody BetterRestart Their Chrome

SOLVING BROWSER INCOMPAT

SOLVING BROWSER INCOMPAT•Use a “polyfill” - Adapter.js

SOLVING BROWSER INCOMPAT•Use a “polyfill” - Adapter.js•https://github.com/webrtc/adapter

SOLVING BROWSER INCOMPAT•Use a “polyfill” - Adapter.js•https://github.com/webrtc/adapter•IE & Safari: deploy Temasys

SOLVING BROWSER INCOMPAT•Use a “polyfill” - Adapter.js•https://github.com/webrtc/adapter•IE & Safari: deploy Temasys•http://skylink.io/plugin/

SOLVING BROWSER INCOMPAT•Use a “polyfill” - Adapter.js•https://github.com/webrtc/adapter•IE & Safari: deploy Temasys•http://skylink.io/plugin/•Pick a great WebRTC service provider

WEBRTC PROBLEMS & SOLUTIONS

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment•Teach the user

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment•Teach the user•Usability Problems

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment•Teach the user•Usability Problems•Deploy TLS Certs!!!

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment•Teach the user•Usability Problems•Deploy TLS Certs!!!•Test, test, test

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment•Teach the user•Usability Problems•Deploy TLS Certs!!!•Test, test, test•Browser Compat & Infrastructure Problems

WEBRTC PROBLEMS & SOLUTIONS•Environmental Problems•Change the environment•Teach the user•Usability Problems•Deploy TLS Certs!!!•Test, test, test•Browser Compat & Infrastructure Problems•Lean on someone who has already fixed it

http://mojolingo.com @MojoLingo

@bklang bklang@mojolingo.com

http://adhearsion.com @Adhearsion

LINKS & QUESTIONS•https://test.webrtc.org/

•https://webrtcstandards.info/

•https://github.com/webrtc/adapter

•http://skylink.io/plugin/

AstriCon 2015: WebRTC: How it Works, and How it Breaks

Software

How to Select a WebRTC API Platform for Your Dream Service

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 getStats - WebRTC Meetup Tokyo 5 LT

Astricon Webrtc Lessons Learned

No More Fraud, Astricon, Las Vegas 2014

Isdn for Astricon 2008 Vince Fred Ricks On

Astricon WebRTC Update

How ORTC adds Power to WebRTC - London April 1, 2014

WebRTC, Or How Secure Is P2P Browser Communication? · • Signaling path between WebRTC end-points • Signaling server(s) – Loads client-side context (JavaScript code) – Mediates

How I built a WebRTC enabled website in 20 minutes!

How WebRTC ushers the next wave of e-Learning innovation

Astricon - Realities of Global Infrastructure in the Cloud

Michael Graves Astricon 2009 Hd Voice Demo Rev2

How to Make WebRTC Useful for Business

Getting the Best Out Of WebRTC - Astricon 2014

WebRTC - AT&T · “WebRTC has the potential to be a very disruptive force in how we work and engage with one another” - Brent Kelly, Constellation Research “WebRTC is real, and

DeveloperWeek 2015 - WebRTC - Where to start and how to scale

Astricon Stun Turn Ice

WebRTC Reborn - Cloud Expo / WebRTC Summit

What is WebRTC?hancke.name/webrtc/mozilla-webrtc-munich.pdf · 2015. 1. 9. · WebRTC == Ford Model T of VoIP commoditize. concentrate on UI/UX. WebRTC – the API. GetUserMedia RTCPeerConnection