This document summarizes key aspects of WebRTC including its core architecture, applications, positives/negatives, security considerations, signaling to connect peers, using STUN/TURN servers, and the data channel. Some key points: - WebRTC allows for real-time communications like video chat directly in the browser without plugins. - It uses JavaScript APIs to access the user's camera and microphone, peer-to-peer data connections, and session establishment. - Applications include video conferencing, telemedicine, gaming, and content delivery networks. - Positives are no plugins needed, encryption of media, and peer-to-peer connectivity. Negatives include lack of support on some browsers and

1. Communication
with WebRTC
Arin Sime, WebRTC.ventures

2. WebRTC is an HTML5 “standard” for
video communications in the browser
Look Mom!
No plugins!
I know honey,
it’s like Skype
for your
browser!

3. Core WebRTC Architecture

4. GetUserMedia javascript

5. Applications of WebRTC
• Video conferencing
• Contact Centers
• Telemedicine
• Insurance claims
• In-context
communications
• Dating/Social Media
• Gaming
• P2P Data Transfer

6. Positives of WebRTC
• No plugins
• Peer to Peer
• Video, Audio, Data all
encrypted in transit

7. Security in WebRTC
• Video/Audio/Data
encrypted in-transit
• Permissions required for
Video/Audio
• Under SSL, those
permissions are only
required once
• The DataChannel alone
does not require
permissions
• Screen sharing requires a
browser plugin

8. Negatives of WebRTC
• IE/Safari Not supported
• Mobile browser support
is poor, need native
apps
• Doesn’t scale to large
conversations

9. Scaling WebRTC is hard
• Your server won’t be
burdened, signaling
traffic is lightweight
• But the peers and
network will be
burdened as a
conversation grows
• Practical limit is 6-8
people

10. 1st Demo – Taking a Profile Picture
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({
'audio': false,
'video': true
}, function (stream) {
console.log("going to display my stream...");
smallVideoArea.src = URL.createObjectURL(stream);
}, logError);
https://github.com/agilityfeat/getusermedia-profilepicture

11. Signaling to Connect Peers
• Signaling is done over
your web server
• The transport layer is
defined by you:
WebSockets or Pub/Sub
are most popular
• It is not encrypted or
secure by default

12. Connecting Alice and Bob
Alice Bob
“Offer” “Answer”
Websockets,
socket.io,
Publish/Subscribe,
commercial providers,
etc
Session
Description
Protocol (SDP):
Video codecs
Resolution
Format

13. Using STUN/TURN Servers
STUN
Server
Signaling
Server
Get public IP
Alice’s Offer (Session Description Protocol)
Bob’s Answer SDP
Get public IP
Alice’s ICE Candidate (Internet Connectivity Establishment)
Bob’s ICE Candidate
RTCPeerConnection

14. 2nd Demo – Two Party Chat
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
navigator.getUserMedia({
'audio': false,
'video': true
}, function (stream) {
console.log("going to display my stream...");
smallVideoArea.src = URL.createObjectURL(stream);
rtcPeerConn.addStream(stream);
}, logError);
https://github.com/agilityfeat/webrtc-sample-medical-app

15. The Data Channel

16. Two types of data channels
• Reliable
 A little slower, but guaranteed delivery and order
 options = { ordered: true };
• Unreliable
 Faster, but no guaranteed delivery or ordering
 options = { ordered: false };

17. Data Channel Use Cases
• Text Chat
• File Transfer
• Real-time data
communications for
Sensors, Data
Dashboards, etc
• Gaming
• Content Delivery
Netwoks

18. Peer to peer file sharing
World-wide Content Delivery Network (CDN) for static content with
Peer to Peer (P2P) augmentation of static content from local peers
User
A
User
B
User
C
User
D
Asia
CDN
America
s CDN
P2P sharing
when possible
P2P sharing
when
possible

19. 3rd Demo – Data Channel
sendMessage.addEventListener('click', function(ev){
dataChannel.send(myMessage.value);
appendChatMessage(myMessage.value, 'message-
in');
myMessage.value = "";
ev.preventDefault();
}, false);
https://github.com/agilityfeat/memory-webrtc-data-
channel

20. Questions?
@ArinSime, arin@webrtc.ventures, 434 996 5226