Embed Size (px)
Citation preview
WebRTC for Everyone!Lisa Larson-Kelley
!
@lisamarienyc LearnFromLisa.com
photo: nuvision action image - Spartan Race
Oh, CRAP.
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
photo: nuvision action image - Spartan Race
What is WebRTC?
How is a WebRTC app structured?
What’s the WebRTC API
look like?
Let’s build something!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
photo: theen moy
bit.ly/webrtc-fc14
✓ Core programming
skills
✓ HTML, CSS and
JavaScript
✓ Your preferred HTML
editor
✓Webcam and
microphone
✓ Latest build of
Chrome or
Firefox
Let’s Go!
photo: nuvision action image - Spartan Race
What is WebRTC?
How is a WebRTC app structured?
What’s the WebRTC API
look like?
Let’s build something!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
“There is nothing permanent except change.”
– Heraclitus
apprtc.appspot.com
https://apprtc.appspot.com/?r=01234567
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
zingaya.com
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
peer5.com
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
cubeslam.com
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
chromeexperiments.com/detail/face-substitution/
VOLUNTEER!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
§ VOIP technologies (UDP) § XMPP/ Jabber § (The “F” word)…
Before there was WebRTC, there was…
1.0 released in 2007
1.0 released in 2010
Video Conferencing for Everyone!
FAIL
Where did WebRTC come from?
IETF RTC WEB WG
W3C WebRTC WG
Where did WebRTC come from?
Google acquires the keys to the kingdom...
And opens the gates!bit.ly/webrtc-fc14 !
@lisamarienyc !#webrtc!
WebRTC support across browsers
DESKTOP
MOBILE
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
WebRTC support across browsers
http://isWebRTCReadyYet.com
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Getting Firefox and Chrome talking
adapter.js
Peace, and hope for standards
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
The potential of WebRTC
1 billion +
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
The Service Approach to Deploying WebRTC Apps
STUN TURN
The DIY Approach to Deploying WebRTC Apps
STUN TURN
§PSTN Frameworks - Phono - Open source JavaScript phone API: - sipML5 - Open source JavaScript SIP client - FreeSWITCH - scalable open source cross-platform telephony platform
§ PeerJS § SimpleWebRTC § easyRTC § webRTC.io
§ RTC.io (node toolbox)
JavaScript Frameworks
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
§WebRTC services and platforms - Tokbox.com Open Tok platform - Vidyo.com - rtc.io - Xirsys.com hosted server infrastructure
§ Instant free video conferencing - apprtc.appspot.com - AddLive.com - Vline.com - Vsee.com (free and premium)
Some ready-to-use services
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
photo: nuvision action image - Spartan Race
What is WebRTC?
How is a WebRTC app structured?
What’s the WebRTC API
look like?
Let’s build something!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Architecture of a WebRTC application
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Architecture of a WebRTC app
webpage [HTML / JS]
webpage [HTML / JS]
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
WebRTC app, with signaling
webpage [HTML / JS]
signaling server
[HTTP or Websockets]
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
WebRTC app, with signaling
webpage [HTML / JS]
signaling server
[HTTP or Websockets]
webpage [HTML / JS]
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
WebRTC app, with signaling
webpage [HTML / JS]
signaling server
[HTTP or Websockets]
webpage [HTML / JS]
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
signaling server
[HTTP or Websockets]
browser Y
browser Z
browser X
Multi-peer Topology: Full Mesh
The full WebRTC environment
Web Servers
PSTN Gateway
Jingle Client
Tablet
Mobile Phone
Phone
PSTN
Laptop PC
SIP Client
Other Servers
Source: WebRTC: APIs and RTCWEB Protocols of the HTML5 Real-Time Web
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Why do we need servers with WebRTC?
I was promised peer-to-peer!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Why do we need servers with WebRTC?I was promised peer-to-peer!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
ICE STUN
TURN
Introducing STUN, TURN and ICE
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
Establishing Peer Connections: An Overview
“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.188
Peer-to-Peer Connection
How STUN servers work
Peer-to-Peer Connection
How STUN servers work (sometimes…)
How TURN works
TURN
Jane’s data Jane’s data
John’s dataJohn’s data
Interactive Connectivity Establishment (ICE)
STUN TURN
ICE
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
225.35.6.2.188
987.65.4.3.210
192.168.0.3
225.35.6.2.188
123.45.6.7.890
192.168.0.111
441.19.4.1.255
987.65.4.3.210
Local IP
External IP
Relay address
ICE Candidates
How ICE works
Signaling options
§HTTP POST §Google’s Channel API §XHR polling §Server-Sent Events §XMPP (Jabber) over WebSockets §SIP over WebSockets §JavaScript SIP Libraries (JsSIP, SIP-JS, SIPML5...) §WebSockets/JSON §Jingle (used by GoogleTalk) §Signalmaster (open source signaling server)
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Server-to-browser
Server-to-server
“I’d tell you a UDP joke… but you probably wouldn’t get it.”
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
photo: nuvision action image - Spartan Race
What is WebRTC?
How is a WebRTC app structured?
What’s the WebRTC API
look like?
Let’s build something!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Ladies and Gentlemen, The WebRTC APIs:
MediaStreamRTCPeerConnection
RTCDataChannel
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
The MediaStream API
getUserMedia()
MediaElement
RTCPeerConnection
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
A MediaStream object
EVENTS .end .addtrack .endtrack
MediaStream
MediaStreamTrackchannel channel
ATTRIBUTES .id
STATES .readyState
EVENTS started ended muted unmuted overconstrained
ATTRIBUTES .id
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
http://localhost:8888/webrtc/fluent-demos/fc-webrtc-mediastream.html
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
RTCPeerConnection, under the hoodvia www.WebRTC.org
Overall architecture diagram from www.WebRTC.org
Set up signalling channel
Initiating a peer connection
Get local media
Set up peer connection
Attach media to
connection
Exchange session
descriptions
mediaStream API
RTCPeerConnection API
Overall architecture diagram from www.WebRTC.org
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
http://webrtchacks.com/sdp-anatomy/
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Instantiating a RTCPeerConnection object
myPeerConnection = new webkitRTCPeerConnection(config, constraints);
myPeerConnection = new webkitRTCPeerConnection(null);
var config = {"iceServers":[{"url":"stun:stun.1.google.com:19302"}, {"url":"stun:stun1.1.google.com:19302"}, {"url":"turn:198.76.543.2", "credential":"YourPasswordHere"}]};
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
localhost:8888/webrtc/fluent-demos/fc-webrtc-rtcpeerconnection.html
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
<DATA>
RTCDataChannel
• Fast and efficient sharing of data • Great for:
• Multiplayer games • Text chat • Remote applications • File transfer
• Same API as WebSockets (basically) • Supports strings as well as some JS binary types such as Blob, ArrayBuffer
and ArrayBufferView • Datagram Transport Layer Security (DTLS) • Congestion control • Uses Stream Control Transmission Protocol (SCTP)
<DATA>
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
sharefest.me
File Sharing
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Distributed Content Delivery
peercdn.com
peer5.com
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
RTCDataChannel API
var datachannel = myPeerConnection.createDataChannel(label);
http://simpl.info/rtcdatachannel/
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Real-world deployment, for now...
WebSockets
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Real-world deployment, for now...
RTCDataChannel WebSockets
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Real-world deployment, for now...
RTCDataChannel
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
photo: nuvision action image - Spartan Race
What is WebRTC?
How is a WebRTC app structured?
What’s the WebRTC API
look like?
Let’s build something!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Ok, now for a functional app!
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
Resources § http://www.html5rocks.com/en/tutorials/webrtc/basics/ § Simplest possible getUserMedia demo: http://simpl.info/gum § RTCPeerConnection 'on one page', i.e. without signalling:
http://simpl.info/pc § Simplest possible RTCDataChannel example:
http://simpl.info/dc § With RTCPeerConnection: http://simpl.info/screencapture § GetUserMedia Constraints:
http://simpl.info/getusermedia/constraints § WebRTC video chat: apprtc.appspot.com (with source code) § webrtc-experiment.com - Muaz Khan § Codelab using Socket.IO for signaling:
http://bitbucket.org/webrtc/codelab § Capturing audio and video in HTML5:
http://html5rocks.com/en/tutorials/getusermedia/intro § APIs and RTCWEB Protocols of the HTML5 Real-Time Web,
Alan Johnston and Daniel Burnett. http://webrtcbook.com
http://bit.ly/lisa-rtc
bit.ly/webrtc-fc14 !@lisamarienyc !
#webrtc!
“WebRTC is a new front in the long war for an open and unencumbered web.”
– Brendan Eich, Mozilla CTO and inventor of JavaScript
The Potential of WebRTC
6.2 billion by 2018
Financial ServicesHealthcare Insurance
“What’s the biggest barrier to WebRTC adoption?”
Source: WebRTC World Outlook 2014 Survey
Welcome to the new frontier of real-time communication on the web!
@lisamarienyc | LearnFromLisa.com bit.ly/learnwebrtc bit.ly/webrtc-fc14 !
@lisamarienyc !#webrtc!
