79
What is WebRTC?

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

  • Upload
    others

  • View
    23

  • Download
    0

Embed Size (px)

Citation preview

Page 1: 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

What is WebRTC?

Page 2: 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

Hornsby Cornflower

fippo

„Telephony Engineer“ at &yet

Page 4: 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

Web Realtime Communications

Page 5: 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

Voice and Video

Page 6: 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

Data Channels

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

Peer to Peer

Page 8: 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

for the open web platform

Page 9: 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

we had Voice over IP before...

Page 10: 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

WebRTC == Ford Model T of VoIP

commoditize

Page 11: 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

concentrate on UI/UX

Page 12: 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

WebRTC – the API

Page 13: 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

GetUserMedia

RTCPeerConnection

Page 14: 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

GetUserMedia

access to Cam/Mic

Page 15: 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

RTCPeerConnection

P2P connections

Page 16: 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

Some differences between Browsers

adapter.js

Page 17: 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

Try it with no signaling server first

sdp mangling sample

Page 18: 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

SDP

Page 19: 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

signaling channel

Page 20: 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

signaling triangle

Browser – Server - Browser

Page 21: 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

signaling trapezoid

Browser – Server – Server - Browser

Page 22: 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

Signaling protocol?

Not mandated by WebRTC

Page 23: 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

API != signaling protocol

Page 24: 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

Mute / Unmute a track

Page 25: 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

JSEP

Page 26: 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

Very close to PeerConnection API

{type, sdp} JSON objects

Page 27: 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

SIP

Page 28: 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

Hello telephony world!

Uses SDP like PeerConnection API

Page 29: 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

Jingle

Page 30: 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

Google Talk

uses XML instead of SDP

Page 31: 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

So you need a mapping...

Page 32: 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

strophe.jingle

SDP-Jingle-JSON

Page 34: 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

why should you use Jingle?

Page 35: 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

Reuse XMPP protocol infrastructure

Page 36: 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

Presence

Page 37: 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

Entity Capabilities

Page 38: 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

forking and multi-device sync

(not yet for Jingle)

Page 39: 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

Multiuser chat

Page 40: 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

Protocol infrastructure is important

(and nobody pays you to reinvent it)

Page 41: 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

Using Jingle

Page 43: 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

Note: high-level APIs can hide the peerconnection

see also simplewebrtc

Page 44: 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

Multiuser Videochat

Page 45: 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

SimpleWebRTC

talky.io

Page 46: 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

Full Mesh Conferencing

Page 47: 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

Everyone sends to everyone else

Page 48: 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

That is just a Jingle session to everyone in a Multi-User chat

(yes, it also works with pubsub)

Page 49: 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

There are some problems...

Page 50: 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

Scalability and the upstream

Page 51: 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
Page 52: 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
Page 53: 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
Page 54: 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
Page 55: 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
Page 56: 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
Page 57: 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

FULL MESS!

(pictures courtesy of Emil Ivov)

Page 58: 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

a central server to redistribute

(but needs to decrypt)

Page 59: 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
Page 60: 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

Firefox does not support the way used

and does not intend to support it

Page 61: 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

and implementing the Firefox plan will take 18 months

:-(

Page 62: 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

Deploying WebRTC

Page 63: 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

Just because it works locally...

Page 64: 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

you will get „black screens“ reports from users

pc.signalingState, pc.iceConnectionState

Page 65: 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

Hello NAT

Page 66: 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

STUN, TURN and ICE to the rescue

Page 67: 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

STUN

what is my external IP?

Page 68: 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

Works for ~90% of users

Page 69: 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

Easy to deploy

Page 70: 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

Not sufficient on mobile networks

Page 71: 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

TURN

server-side relay

Page 72: 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

External relay server

Page 73: 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

Required for ~8% of users

Page 74: 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

Introduces latency

Page 75: 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

Expensive to run

Page 76: 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

Do not provide open TURN servers

Page 77: 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

Hand out temporary passwords instead

as described here

Page 78: 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

90% + 8%... is there something missing?

Page 79: 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

otalk-server

a ready-made package for prosody