WebRTC: What? How? Why? - ClueCon 2013

WebRTC:What?How?Why?

Tuesday, August 6, 13

CAN YOU SPEAK MAGIC?

2Tuesday, August 6, 13


2

Ben Klang



2

Ben Klang



2

Ben Klang



3

?



WHAT IS WEBRTC?



WHAT IS WEBRTC?

•Spec enabling a web browser to access the camera and microphone



WHAT IS WEBRTC?


•Standards for negotiating connections between two peers



WHAT IS WEBRTC?


•Standards for negotiating connections between two peers

•The one technology that everyone in this room should be watching



WHAT IS WEBRTC?



WHAT IS WEBRTC?•JavaScript Browser APIfor real-time communication(voice & video)




•Standards for interoperability




•Standards for interoperability•Opus, G.711, H.263*




•Standards for interoperability•Opus, G.711, H.263*

5* ProbablyTuesday, August 6, 13



•Standards for interoperability•Opus, G.711, H.263*•SDP*




•Standards for interoperability•Opus, G.711, H.263*•SDP*•ICE/STUN/TURN




•Standards for interoperability•Opus, G.711, H.263*•SDP*•ICE/STUN/TURN•DTLS-SRTP



WHAT IS WEBRTC?



WHAT IS WEBRTC?

•Conflagration of several somewhat-related projects:



WHAT IS WEBRTC?

•Conflagration of several somewhat-related projects:•WebRTC (W3C) - JavaScript APIs


http://www.w3.org/2011/04/webrtc-charter.html



WHAT IS WEBRTC?


•RTC-WEB (IETF) - Codecs, Security, Interop




http://datatracker.ietf.org/wg/rtcweb/charter/



WHAT IS WEBRTC?


•RTC-WEB (IETF) - Codecs, Security, Interop

•MMUSIC (IETF) - ICE (NAT traversal), SDP






http://datatracker.ietf.org/wg/mmusic/charter/

http://datatracker.ietf.org/wg/mmusic/charter/


WHAT IS WEBRTC TO ME?




7

Telephones in Web Browsers!




7

Telephones in Web Browsers!Telephones in Web Browsers!



How does WebRTC Work?



9

http://



9

http://

Alice



9

http://

Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

SDP:v=0o=bob 19915 0 IN IP4 0.0.0.0

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

Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

SDP:v=0o=bob 19915 0 IN IP4 0.0.0.0


Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

SDP:v=0o=bob 19915 0 IN IP4 0.0.0.0


Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

SDP:v=0o=bob 19915 0 IN IP4 0.0.0.0


Alice Bob



9

http://Get

me B

ob p

leas

e!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109

SDP:v=0o=bob 19915 0 IN IP4 0.0.0.0


Alice Bob

SRTP

SRTP



10

SDP:v=0o=bob 19915 0 IN IP4 0.0.0.0


Alice Bob

SRTP

SRTP

Get m

e Bob

ple

ase!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109



11

Alice Bob



11

Alice Bob

Get m

e Bob

ple

ase!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109



11

Alice Bob

Get m

e Bob

ple

ase!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109



11

Alice Calling!

SDP:

v=0o=freeswitch 19915 0 IN IP4 0.0.0.0


Alice Bob

Get m

e Bob

ple

ase!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109



11

Alice Calling!

SDP:



Alice Bob

Get m

e Bob

ple

ase!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109



11

Alice Calling!

SDP:



Alice Bob

SRTP

SRTP

Get m

e Bob

ple

ase!

SDP:

v=0o=

alic

e 2051

8 0 IN

IP4 0

.0.0

.0

s=-

t=0 0

m=a

udio 5

4609 RTP/S

AVPF 109



Looks like SIP?



Looks like SIP?

12

Yes, and No.



13

WEBRTC SIGNALING



13

WEBRTC SIGNALING•WebRTC specifies no signaling, leaving that to applications



13

WEBRTC SIGNALING•WebRTC specifies no signaling, leaving that to applications•You can still run SIP via JavaScript



13

WEBRTC SIGNALING•WebRTC specifies no signaling, leaving that to applications•You can still run SIP via JavaScript•JS-SIP


http://jssip.net/

http://jssip.net/


13

WEBRTC SIGNALING•WebRTC specifies no signaling, leaving that to applications•You can still run SIP via JavaScript•JS-SIP•SIPML5


http://jssip.net/

http://jssip.net/

http://sipml5.org/

http://sipml5.org/


13


•But you don’t have to


http://jssip.net/

http://jssip.net/

http://sipml5.org/

http://sipml5.org/


13


•But you don’t have to•Phono (XMPP/Jingle-based)


http://jssip.net/

http://jssip.net/

http://sipml5.org/

http://sipml5.org/

http://phono.com

http://phono.com


13


•But you don’t have to•Phono (XMPP/Jingle-based)•SimpleWebRTC


http://jssip.net/

http://jssip.net/

http://sipml5.org/

http://sipml5.org/

http://phono.com

http://phono.com

http://simplewebrtc.com



13


•But you don’t have to•Phono (XMPP/Jingle-based)•SimpleWebRTC•HiBuddy


http://jssip.net/

http://jssip.net/

http://sipml5.org/

http://sipml5.org/

http://phono.com

http://phono.com



http://hibuddy.monkeypatch.me



13


•But you don’t have to•Phono (XMPP/Jingle-based)•SimpleWebRTC•HiBuddy•...more undoubtedly to come


http://jssip.net/

http://jssip.net/

http://sipml5.org/

http://sipml5.org/

http://phono.com

http://phono.com






GOTCHAS



GOTCHAS•The spec isn’t done :(



GOTCHAS•The spec isn’t done :(•HUGE SDPs!



GOTCHAS•The spec isn’t done :(•HUGE SDPs!•SDP is an opaque blob to apps



GOTCHAS•The spec isn’t done :(•HUGE SDPs!•SDP is an opaque blob to apps•Mandatory DTLS-SRTP



GOTCHAS•The spec isn’t done :(•HUGE SDPs!•SDP is an opaque blob to apps•Mandatory DTLS-SRTP•MTI video codecs still being fought (VP8/H.264)



GOTCHAS•The spec isn’t done :(•HUGE SDPs!•SDP is an opaque blob to apps•Mandatory DTLS-SRTP•MTI video codecs still being fought (VP8/H.264)•Browser support inconsistent



GOTCHAS•The spec isn’t done :(•HUGE SDPs!•SDP is an opaque blob to apps•Mandatory DTLS-SRTP•MTI video codecs still being fought (VP8/H.264)•Browser support inconsistent•The spec isn’t done.



WEBRTC SUPPORT*



WEBRTC SUPPORT*

15* “Support” is a moving target - not everything worksTuesday, August 6, 13


WEBRTC SUPPORT*•Client-Side



WEBRTC SUPPORT*•Client-Side•Chrome



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side•FreeSWITCH (1.4+)



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side•FreeSWITCH (1.4+)•Asterisk (11+)



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side•FreeSWITCH (1.4+)•Asterisk (11+)•Commercial Offerings



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side•FreeSWITCH (1.4+)•Asterisk (11+)•Commercial Offerings•Phono Gateway



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side•FreeSWITCH (1.4+)•Asterisk (11+)•Commercial Offerings•Phono Gateway•TokBox



WEBRTC SUPPORT*•Client-Side•Chrome•Firefox•Opera (sorta)•Server-Side•FreeSWITCH (1.4+)•Asterisk (11+)•Commercial Offerings•Phono Gateway•TokBox•many others...



But what do I do with this?



17

TWO THINGS I BELIEVE



17


1) WebRTC has potential be thebiggest revolution for

real-time communicationssince VoIP helped us throw off the

shackles of Ma Bell



17


1) WebRTC has potential be thebiggest revolution for

real-time communicationssince VoIP helped us throw off the

shackles of Ma Bell

2) To realize its potential it has to be more than just another telephone



“Communicating isn’t going to be what you’re doing - it’s what you’ll be doing

while you’re doing something else”

- Geoff HollingworthEricsson Head of AT&T Foundry



Example WebRTC Apps



Example WebRTC Apps

19

3 Examples



1. Incident Response





INCIDENT RESPONSE



INCIDENT RESPONSE•Timely, Contextual Information



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication•Inherit from existing organizational groups



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication•Inherit from existing organizational groups•Allow ad-hoc participants (“guest” parties)



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication•Inherit from existing organizational groups•Allow ad-hoc participants (“guest” parties)•Federate with external services



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication•Inherit from existing organizational groups•Allow ad-hoc participants (“guest” parties)•Federate with external services•Incident recording/logging



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication•Inherit from existing organizational groups•Allow ad-hoc participants (“guest” parties)•Federate with external services•Incident recording/logging•“Lessons learned” and process improvement



INCIDENT RESPONSE•Timely, Contextual Information•Adapt for mobile vs. desktop users•Group-based communication•Inherit from existing organizational groups•Allow ad-hoc participants (“guest” parties)•Federate with external services•Incident recording/logging•“Lessons learned” and process improvement•Links from/to issue tracking systems



2. Medical Records Management





MEDICAL ADVICE/HISTORY



MEDICAL ADVICE/HISTORY•Automate Medical Claims



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication•Reuse primary auth via website



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication•Reuse primary auth via website•Verify with voice biometrics



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication•Reuse primary auth via website•Verify with voice biometrics•Cross-check against caller location



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication•Reuse primary auth via website•Verify with voice biometrics•Cross-check against caller location•Call recording/transcription



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication•Reuse primary auth via website•Verify with voice biometrics•Cross-check against caller location•Call recording/transcription•Medical advice given to patient automatically added to patient file



MEDICAL ADVICE/HISTORY•Automate Medical Claims•Secure Caller Authentication•Reuse primary auth via website•Verify with voice biometrics•Cross-check against caller location•Call recording/transcription•Medical advice given to patient automatically added to patient file•Auditing/Service Quality Assurance



3. Arts Organization - Patron Assistance







WHAT SHOULD WE BUILD?



WHAT SHOULD WE BUILD?•Concierge Service



WHAT SHOULD WE BUILD?•Concierge Service•Enable perfect memory



WHAT SHOULD WE BUILD?•Concierge Service•Enable perfect memory•Anticipate caller’s needs



WHAT SHOULD WE BUILD?•Concierge Service•Enable perfect memory•Anticipate caller’s needs•Concierge receives callerinfo via Instant Message:Caller Photo, Last Ticket Purchase, Seating Preference, Lifetime Donation Amount



WHAT SHOULD WE BUILD?•Concierge Service•Enable perfect memory•Anticipate caller’s needs•Concierge receives callerinfo via Instant Message:Caller Photo, Last Ticket Purchase, Seating Preference, Lifetime Donation Amount•Click-to-Call options for purchasing tickets integrated with popular backend software



WHAT SHOULD WE BUILD?•Concierge Service•Enable perfect memory•Anticipate caller’s needs•Concierge receives callerinfo via Instant Message:Caller Photo, Last Ticket Purchase, Seating Preference, Lifetime Donation Amount•Click-to-Call options for purchasing tickets integrated with popular backend software•Automate weather contingency notification



EXAMPLE ARCHITECTURE










30

Call Routing/Bridging




30





30





30





30





30





30


In-Call App Functionality




30



XMPPMessaging/Presence




30







30







30




Third Party Messages




30








30








30



LDAPUser Authentication






30









30



Web UIContextual/Visual Interface







30










30










30













31

Telephones in Web Browsers!







32

Morse Code in Telephones!





34

adhearsion.com@Adhearsion

http://mojolingo.com@MojoLingo

@[email protected]


http://adhearsion.com


http://twitter.com/adhearsion


http://mojolingo.com




http://twitter.com/bklang


mailto:[email protected]



34

adhearsion.com@Adhearsion

http://mojolingo.com@MojoLingo

@[email protected]














Technology

WebRTC: What? How? Why? - ClueCon 2013