Getting started with WebRTC
Chad Hart
12/10/2014 Scotch Streaming and Scaling 1
12/10/2014 Scotch Streaming and Scaling 2
http://www.meetup.com/WebRTC-Boston/
Meetup #1 Links & Resources: goo.gl/UvbI27
12/10/2014 Scotch Streaming and Scaling 3
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 4
IP Telephony + WebRTC Media Server
PowerMedia™ XMS
Multi-party conferencing InterworkingTranscoding
Stream processing Person-to-machineRecording
Who uses WebRTC today?
12/10/2014 Scotch Streaming and Scaling 5
Who uses WebRTC today?
12/10/2014 Scotch Streaming and Scaling 6
Who uses WebRTC today?
Who uses WebRTC today?
12/10/2014 Scotch Streaming and Scaling 8
Who uses WebRTC today?
12/10/2014 Scotch Streaming and Scaling 9
Use case: Augmented Reality
12/10/2014 Scotch Streaming and Scaling 10
Use case: facial biometric verification
12/10/2014 Scotch Streaming and Scaling 11
Use case: controlling robots
12/10/2014 Scotch Streaming and Scaling
http://www.tate.org.uk/whats-on/tate-britain/special-event/after-dark
12
Use case: dog training
12/10/2014 Scotch Streaming and Scaling 13
https://webrtchacks.com/javascript-dog-trainer/
Use case: peer-to-peer data
CDNs
File Transfer
Private Networks
bitcoin
Peer web-servers
Internet of Things
12/10/2014 Scotch Streaming and Scaling 14
grimwire
wearables, security, industrial machine vision, ???
12/10/2014 Scotch Streaming and Scaling 15
WebRTC is on a lot of devices
WebRTC will have a lot of users
12/10/2014 Scotch Streaming and Scaling 16
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 17
WebRTC is world-class VoIP engine for free
OPUS
On2
Global IP
Solutions
.org
Video Codec
Google acquires On2 for $133
million
VoIP Media Engine
Google acquires Global IP
Solutions for $68.2M
Audio codec
Opus - open, royalty-free, highly
versatile standardized audio codec
Open Source Communities
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 18
WebRTC is a Web and Internet Standard
webrtc rtcweb
http://www.w3.org/TR/webrtc/ https://tools.ietf.org/wg/rtcweb/
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 19
WebRTC is State-of-the-Art Technology
Firewall/NAT Traversal
• ICE/STUN/TURN
• RTCP Multiplex
• RTP Bundle
Audio Codecs
• Opus
• G.711
Video Codecs
• VP8, VP9
• H.264
Mandatory Encryption
• DTLS
Media Negotiation Signaling
• Session Description Protocol
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 20
WebRTC is 3 JavaScript APIs (& Java)
getUserMedia
CreatePeer
Connection
Data
Channel
Creates a media connection
(RTP) between 2 peers
Grants access to local microphone,
camera, or screen
Allows the user to send arbitrary
data between peers
WebRTC API Examples
• webrtc.github.io/samples/src/content/getusermedia/resolution/
• webrtc.github.io/samples/src/content/peerconnection/pc1/
• webrtc.github.io/samples/src/content/datachannel/
12/10/2014 Scotch Streaming and Scaling 21
Working with WebRTC
12/10/2014 Scotch Streaming and Scaling 22
Browser Support
12/10/2014 Scotch Streaming and Scaling 23
iswebrtcreadyyet.com
Browser Support: WTF - No IE & Safari??
12/10/2014 Scotch Streaming and Scaling 24
iswebrtcreadyyet.com
Fallback
to a
plug-in
or
(ugh)
Flash
http://upliketoast.blogspot.com/2011/01/search-results-vintage-women-boxing.html
12/10/2014 Scotch Streaming and Scaling 25
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 26
Many ways to work with WebRTC
Level of effort
Low-level
source
Frameworks,
Tools, and
SDKs
Cloud API’s
Amount of control
Website Plug-
ins & widgets
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 27
Building WebRTC from scratch – 2 options
Official Build by Google Ericsson Lab’s OpenWebRTC
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 28
Build with tools
Open Source
Commercial
Server-side libraries
JavaScript libraries
Mobile SDK’s
Cross-platform frameworks
Infrastructure
elements
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 29
Consuming WebRTC API’s from the cloud
Signaling
Authentication
Push Notifications
SIP Gateway
Transcoding
STUN
TURN Servers
Low Latency
Elasticity
Recording
Geographic
redundancy
Bandwidth
Service
monitoring
Multi-party
Identity
COMPANY CONFIDENTIAL © COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 30
Plug-ins for your web admin
130+ tool vendors & major projects
https://webrtchacks.com/vendor-directory/
12/10/2014 Scotch Streaming and Scaling 31
Back-end Considerations
• Servers
• Signaling server
• STUN/TURN
• Media servers/processing
• Gateways
• Network
• Bandwidth
• Latency
12/10/2014 Scotch Streaming and Scaling 32
The hard parts of WebRTC as you grow
Server-side
• Defining signaling for your
signaling server
• TURN servers for NAT traversal
• Multi-party video conferencing
• Real-time transcoding
• Interworking with existing
telephony networks (gateways)
Client-side
• Mobile optimizations
• Non-WebRTC browser support
• Keeping up with browser
updates
12/10/2014 Scotch Streaming and Scaling 33
COMPANY CONFIDENTIAL: © COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 34
TURN will relay your media
media
client
Signaling
Server
TURN
Server
STUN
Server
client
COMPANY CONFIDENTIAL: © COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 35
Mesh does not Scale for Many Video Conferees
35
Full Mesh
Clients get overloaded
Encode costs more than decode
Limited uplink bandwidth
Inconsistent performance
across participants
COMPANY CONFIDENTIAL: © COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 36
Media servers for scalable multi-party conferencing
MCU SFU
Multipoint Control Unit Selective Forwarding Unit
COMPANY CONFIDENTIAL: © COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 37
Core WebRTC Gateway & Peripheral Functions
HTTP-to-SIP
(H2S)
Media GW
Transcoder
Web SIP
SBC
STUN Server
TURN Server
API Gateway
Regulates API
calls
Provides media
anchoring for
NAT Traversal
Tells a client
what its IP
address is
Converts non-
standard web
signaling to SIP
Web SDK/
Widget
Mobile SDK/
Widget
Kit for adding
Calls to
webpage
Kit for adding
Calls to native
applications
Converts one codec to another,
trans-rates/sizing
Encryption & transport
interworking
SIP interworking,
media binding, and
security
COMPANY CONFIDENTIAL: © COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 38
Example: Large, Web-Centric Network Architecture
Web
server
SIP/IMS
Network
SIP
Media
ServerFirewall
APIManager
API Calls
H2S
Server
Identity
Server
App
Server
App
Server
WSS
server
STUN/
TURN
Internal
REST APIs
WebRTC
Browser
Chad’s Favorite WebRTC Resources
• webrtcHacks
• github.com/webrtc
• WebRTC Experiment
• html5rocks.com
• webrtcweekly.com
12/10/2014 Scotch Streaming and Scaling 39
My contact info
linkedin.com/in/chadwallacehart
chad.hart@dialogic.com
@chadwallacehart
webrtcHacks.com
chadwhart@gmail.com
@webrtcHacks
12/10/2014 Scotch Streaming and Scaling 40

Getting Started with WebRTC

  • 1.
    Getting started withWebRTC Chad Hart 12/10/2014 Scotch Streaming and Scaling 1
  • 2.
    12/10/2014 Scotch Streamingand Scaling 2 http://www.meetup.com/WebRTC-Boston/ Meetup #1 Links & Resources: goo.gl/UvbI27
  • 3.
  • 4.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 4 IP Telephony + WebRTC Media Server PowerMedia™ XMS Multi-party conferencing InterworkingTranscoding Stream processing Person-to-machineRecording
  • 5.
    Who uses WebRTCtoday? 12/10/2014 Scotch Streaming and Scaling 5
  • 6.
    Who uses WebRTCtoday? 12/10/2014 Scotch Streaming and Scaling 6
  • 7.
  • 8.
    Who uses WebRTCtoday? 12/10/2014 Scotch Streaming and Scaling 8
  • 9.
    Who uses WebRTCtoday? 12/10/2014 Scotch Streaming and Scaling 9
  • 10.
    Use case: AugmentedReality 12/10/2014 Scotch Streaming and Scaling 10
  • 11.
    Use case: facialbiometric verification 12/10/2014 Scotch Streaming and Scaling 11
  • 12.
    Use case: controllingrobots 12/10/2014 Scotch Streaming and Scaling http://www.tate.org.uk/whats-on/tate-britain/special-event/after-dark 12
  • 13.
    Use case: dogtraining 12/10/2014 Scotch Streaming and Scaling 13 https://webrtchacks.com/javascript-dog-trainer/
  • 14.
    Use case: peer-to-peerdata CDNs File Transfer Private Networks bitcoin Peer web-servers Internet of Things 12/10/2014 Scotch Streaming and Scaling 14 grimwire wearables, security, industrial machine vision, ???
  • 15.
    12/10/2014 Scotch Streamingand Scaling 15 WebRTC is on a lot of devices
  • 16.
    WebRTC will havea lot of users 12/10/2014 Scotch Streaming and Scaling 16
  • 17.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 17 WebRTC is world-class VoIP engine for free OPUS On2 Global IP Solutions .org Video Codec Google acquires On2 for $133 million VoIP Media Engine Google acquires Global IP Solutions for $68.2M Audio codec Opus - open, royalty-free, highly versatile standardized audio codec Open Source Communities
  • 18.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 18 WebRTC is a Web and Internet Standard webrtc rtcweb http://www.w3.org/TR/webrtc/ https://tools.ietf.org/wg/rtcweb/
  • 19.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 19 WebRTC is State-of-the-Art Technology Firewall/NAT Traversal • ICE/STUN/TURN • RTCP Multiplex • RTP Bundle Audio Codecs • Opus • G.711 Video Codecs • VP8, VP9 • H.264 Mandatory Encryption • DTLS Media Negotiation Signaling • Session Description Protocol
  • 20.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 20 WebRTC is 3 JavaScript APIs (& Java) getUserMedia CreatePeer Connection Data Channel Creates a media connection (RTP) between 2 peers Grants access to local microphone, camera, or screen Allows the user to send arbitrary data between peers
  • 21.
    WebRTC API Examples •webrtc.github.io/samples/src/content/getusermedia/resolution/ • webrtc.github.io/samples/src/content/peerconnection/pc1/ • webrtc.github.io/samples/src/content/datachannel/ 12/10/2014 Scotch Streaming and Scaling 21
  • 22.
    Working with WebRTC 12/10/2014Scotch Streaming and Scaling 22
  • 23.
    Browser Support 12/10/2014 ScotchStreaming and Scaling 23 iswebrtcreadyyet.com
  • 24.
    Browser Support: WTF- No IE & Safari?? 12/10/2014 Scotch Streaming and Scaling 24 iswebrtcreadyyet.com Fallback to a plug-in or (ugh) Flash
  • 25.
  • 26.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 26 Many ways to work with WebRTC Level of effort Low-level source Frameworks, Tools, and SDKs Cloud API’s Amount of control Website Plug- ins & widgets
  • 27.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 27 Building WebRTC from scratch – 2 options Official Build by Google Ericsson Lab’s OpenWebRTC
  • 28.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 28 Build with tools Open Source Commercial Server-side libraries JavaScript libraries Mobile SDK’s Cross-platform frameworks Infrastructure elements
  • 29.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 29 Consuming WebRTC API’s from the cloud Signaling Authentication Push Notifications SIP Gateway Transcoding STUN TURN Servers Low Latency Elasticity Recording Geographic redundancy Bandwidth Service monitoring Multi-party Identity
  • 30.
    COMPANY CONFIDENTIAL ©COPYRIGHT 2013 DIALOGIC INC. ALL RIGHTS RESERVED. 30 Plug-ins for your web admin
  • 31.
    130+ tool vendors& major projects https://webrtchacks.com/vendor-directory/ 12/10/2014 Scotch Streaming and Scaling 31
  • 32.
    Back-end Considerations • Servers •Signaling server • STUN/TURN • Media servers/processing • Gateways • Network • Bandwidth • Latency 12/10/2014 Scotch Streaming and Scaling 32
  • 33.
    The hard partsof WebRTC as you grow Server-side • Defining signaling for your signaling server • TURN servers for NAT traversal • Multi-party video conferencing • Real-time transcoding • Interworking with existing telephony networks (gateways) Client-side • Mobile optimizations • Non-WebRTC browser support • Keeping up with browser updates 12/10/2014 Scotch Streaming and Scaling 33
  • 34.
    COMPANY CONFIDENTIAL: ©COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 34 TURN will relay your media media client Signaling Server TURN Server STUN Server client
  • 35.
    COMPANY CONFIDENTIAL: ©COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 35 Mesh does not Scale for Many Video Conferees 35 Full Mesh Clients get overloaded Encode costs more than decode Limited uplink bandwidth Inconsistent performance across participants
  • 36.
    COMPANY CONFIDENTIAL: ©COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 36 Media servers for scalable multi-party conferencing MCU SFU Multipoint Control Unit Selective Forwarding Unit
  • 37.
    COMPANY CONFIDENTIAL: ©COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 37 Core WebRTC Gateway & Peripheral Functions HTTP-to-SIP (H2S) Media GW Transcoder Web SIP SBC STUN Server TURN Server API Gateway Regulates API calls Provides media anchoring for NAT Traversal Tells a client what its IP address is Converts non- standard web signaling to SIP Web SDK/ Widget Mobile SDK/ Widget Kit for adding Calls to webpage Kit for adding Calls to native applications Converts one codec to another, trans-rates/sizing Encryption & transport interworking SIP interworking, media binding, and security
  • 38.
    COMPANY CONFIDENTIAL: ©COPYRIGHT 2015 DIALOGIC INC. ALL RIGHTS RESERVED. 38 Example: Large, Web-Centric Network Architecture Web server SIP/IMS Network SIP Media ServerFirewall APIManager API Calls H2S Server Identity Server App Server App Server WSS server STUN/ TURN Internal REST APIs WebRTC Browser
  • 39.
    Chad’s Favorite WebRTCResources • webrtcHacks • github.com/webrtc • WebRTC Experiment • html5rocks.com • webrtcweekly.com 12/10/2014 Scotch Streaming and Scaling 39
  • 40.