WebRTC Overview
Download as PPTX, PDF3 likes4,921 views
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
WebRTC Overview
- 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!
- 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
Editor's Notes
- #19: PeerCDN