webrtc - brings real-time to the web
DESCRIPTION
WebRTC is a new HTML5 technology that includes a communication protocol for real-time applications and APIs/libraries for web & native applications to communicate with each other.TRANSCRIPT
![Page 1: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/1.jpg)
WebRTC Bring real-time to the web
![Page 2: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/2.jpg)
NEW TRENDS of WEB TECHNOLOGY ON MOBILE
VIDEO COMMUNICATION with
HCMC University of Technology
09/2012
![Page 3: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/3.jpg)
I. What is WebRTC ?
II. Key Features
1. Media Stream
2. Peer Connection
3. Data Channels
III. Applications
IV. Demos
![Page 4: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/4.jpg)
TỔNG QUAN WebRTC Bring real-time to the web
![Page 5: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/5.jpg)
TỔNG QUAN
Story of Google • Justin Uberti • Google Hangout, Google Video Chat
Gmail Call Phone • Plugins
- Really Complicated - Security - Codec, Licensing - Other browsers, manufacturers
Build one platform, not just for web, but for the entire communications industry.
![Page 6: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/6.jpg)
TỔNG QUAN
What is WebRTC ?
• Real Time Communications meets the web • A state-of-the-art audio/video communication stack in your web
browser • A cross-industry effort to create a new communications platform
“WebRTC and HTML5 could enable the same transformation for real time that the original browser did for information.”
Phil Edholm
![Page 7: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/7.jpg)
TỔNG QUAN
WebRTC Support
• Desktop browsers - Chrome 21 - Opera 12 - Firefox 17 - IE ?
• Mobile browsers • Native C++
• Desktop and mobile
2013
04/2012
01/2012
05/2011
04/2011
Release
Mozilla Firefox nightly build
Google Chrome dev
W3C WebRTC WG
IETF RTCWeb WG
![Page 8: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/8.jpg)
ỨNG DỤNG
TRONG ĐÀO TẠO TỪ XA Key Features
![Page 9: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/9.jpg)
I. What is WebRTC ?
II. Key Features
1. Media Stream
2. Peer Connection
3. Data Channels
III. Applications
IV. Demos
![Page 10: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/10.jpg)
TỔNG QUAN
Web Server
Browser Browser
Signaling
path
Web Server
Media path
Application defined over
HTTP / Websockets
Application defined over
HTTP / Websockets
![Page 11: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/11.jpg)
Key Features
1. Media Stream Access audio and video
![Page 12: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/12.jpg)
Media Stream
• Represent a MediaSource • getUserMedia API to access camera/microphone • Use with <video> as an URL • Send to remote peer Combine with other HTML5 for funny effects • <canvas> • CSS • WebGL
![Page 13: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/13.jpg)
getUserMedia
<script> navigator.webkitGetUserMedia({video:true}, onGotStream, onFailedStream); onGotStream = function(stream) { var url = webkitURL.createObjectURL(stream); video.src = url; } </script> <video id="video" autoplay="autoplay" />
![Page 14: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/14.jpg)
Key Features
2. Peer Connection Audio and video session
![Page 15: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/15.jpg)
PeerConnection
API for establishing audio/video calls Built-in • Peer-to-peer • Codec control • Encryption • Bandwidth management
![Page 16: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/16.jpg)
Setup a session To start a session, a client needs • Local Session Description • Remote Session Description • Remote Session Candidates
![Page 17: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/17.jpg)
Setup a session 1. Create Local Session Description 2. Send it to remote peer B (OFFER) 3. Receive Session Description from peer A 4. Create Session Description send back to peer A (ANSWER) 5,6. Send ICECadidate to other peer 7. Setup media path
2 3
1 4
5 6
7
![Page 18: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/18.jpg)
PeerConnection API
Caller side Create a new PeerConnection PeerConnection(config, iceCallback) addStream(stream) Create local SessionDescription createOffer(hints) setLocalDescription(type, desc) startIce() <wait for response from callee> Receive remote SessionDescription setRemoteDescription(type, desc)
Callee side <receive call from caller> Create PeerConnection PeerConnection(config, iceCallback) setRemoteDescription(type, desc) Create local SessionDescription createAnswer(offer, hints) setLocalDescription(type, desc) startIce()
![Page 19: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/19.jpg)
Sample Code
<script> pc1 = new webkitPeerConnection00 (null, onIceCandidate1); // create PC pc2 = new webkitPeerConnection00 (null, onIceCandidate2); // create PC pc2.onaddstream = onRemoteStream; pc1.addStream (localStream); // add local stream var offer = pc1.createOffer(null); // create an offer pc1.setLocalDescription(pc1.SDP_OFFER, offer); // set it on both PC pc2.setRemoteDescription(pc2.SDP_OFFER, offer); var answer = pc2.createAnswer(offer.toSdp(), null); // create an answer pc2.setLocalDescription(pc2.SDP_ANSWER, answer); // set it on both PC pc1.setRemoteDescription(pc1.SDP_ANSWER, answer); pc1.startIce(); // start the connection process pc2.startIce(); </script>
![Page 20: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/20.jpg)
WebRTC Signaling Channel • XMLHttpRequest (AJAX) • WebSocket • Google App Engine
![Page 21: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/21.jpg)
Key Features
3. Data Channels Peer-to-peer data exchange in browsers
![Page 22: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/22.jpg)
Data Channel Peer-to-peer exchange of arbitrary application data
• Low latency • High message rate/thoughput • Reliable and unreliable semantics
Use cases • Multiplayer game • Remote desktop • Real-time interactive (chat, drawing…) • File transfer • Decentralized networks
![Page 23: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/23.jpg)
Sample Code
<script> dc1 = pc1.createDataChannel ("a label"); // reliable mode dc2 = pc2.createDataChannel ("a label"); dc2.onmessage = function(e) { textarea.value += e.data; } function send() { dc1.send(input.value); } </script>
![Page 24: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/24.jpg)
Web Server
![Page 25: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/25.jpg)
Web Server
![Page 26: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/26.jpg)
CƠ SỞ LÝ THUYẾT Applications
![Page 27: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/27.jpg)
APPLICATIONS Video Communication
Gaming
E-Commerce
Live Video
Record + Replay
Phone Call
File Transfer
Remote Desktop
![Page 28: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/28.jpg)
VIDEO COMMUNICATION
Web Server
![Page 29: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/29.jpg)
Web Server Media Server
Web
Server
Media
Server
Media
Server
Live Video
Providers 1 Providers 2
SIP
![Page 30: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/30.jpg)
Start ups
Zingaya (Call' button for websites) enables voice calls through any computer from a webpage. No download or phone is required.
Voxeo Labs (Open source enabler for WebRTC services) Phono is a jQuery plug-in that turns any Web browser into a multichannel communications platform
Utribo (SaaS Service) 'Connect' by Utribo is a Software as a Service that enables subscribers to receive calls made in a web browser to their computer, phone, ….
Tenhands (Enterprise HD Video Collaboration) Desktop HD video collaboration service, it's free and built for business needs.
Bistri (Social Video) Video chat with fun video effects, take screenshots of calls, share them with friends or social networks. Bistri runs in the browser, no need to install additional software or plugins.
![Page 31: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/31.jpg)
WebRTC Bring real-time to the web
![Page 32: WebRTC - Brings Real-Time to the Web](https://reader031.vdocuments.mx/reader031/viewer/2022020115/554b9e1ab4c905b8618b4827/html5/thumbnails/32.jpg)
Nguyễn Mậu Quang Vũ [email protected]
WebRTC Bring real-time to the web
Phạm Nguyên Trình [email protected]
HCMC University of Technology