WebRTC Overview
20
Communication with WebRTC Arin Sime, WebRTC.ventures
Transcript of WebRTC Overview
Communication with WebRTC
Arin Sime, WebRTC.ventures
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!
Core WebRTC Architecture
GetUserMedia javascript
Applications of WebRTC
• Video conferencing• Contact Centers• Telemedicine• Insurance claims• In-context
communications• Dating/Social Media• Gaming• P2P Data Transfer
Positives of WebRTC
• No plugins• Peer to Peer• Video, Audio, Data all
encrypted in transit
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
Negatives of WebRTC
• IE/Safari Not supported • Mobile browser support
is poor, need native apps
• Doesn’t scale to large conversations
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
1st Demo – Taking a Profile Picturenavigator.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
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
Connecting Alice and Bob
Alice Bob
“Offer” “Answer”
Websockets, socket.io,
Publish/Subscribe, commercial providers,
etc
Session Description
Protocol (SDP):Video codecsResolution
Format
Using STUN/TURN ServersSTUNServer
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
2nd Demo – Two Party Chatnavigator.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
The Data Channel
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 };
Data Channel Use Cases
• Text Chat• File Transfer• Real-time data
communications for Sensors, Data Dashboards, etc
• Gaming• Content Delivery
Netwoks
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
Americas CDN
P2P sharing when possibleP2P sharing
when possible
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
