0
WebRTC

Bring real-time to the web
HCMC University of Technology

NEW TRENDS of
WEB TECHNOLOGY ON MOBILE

VIDEO COMMUNICATION
with

09/2012
I. What is WebRTC ?

II. Key Features
1. Media Stream
2. Peer Connection
3. Data Channels
III. Applications
IV. Demos
WebRTC
TỔNG QUAN

Bring real-time to the web
Story of Google
•
•
•

Justin Uberti
Google Hangout, Google Video Chat
Gmail Call Phone
Plugins
- Really Complicated
- Sec...
What is WebRTC ?
• Real Time Communications meets the web
• A state-of-the-art audio/video communication stack in your web...
WebRTC Support
• Desktop browsers
- Chrome 21
- Opera 12
- Firefox 17
- IE ?

2013

04/2012

Mozilla Firefox nightly build...
ỨNG DỤNG
Key Features
TRONG ĐÀO TẠO TỪ XA
I. What is WebRTC ?

II. Key Features
1. Media Stream
2. Peer Connection
3. Data Channels
III. Applications
IV. Demos
Signaling
path
Web Server
Application defined over
HTTP / Websockets

Web Server

TỔNG QUAN

Application defined over
HTTP...
Key Features
1. Media Stream
Access audio and video
Media Stream
•
•
•
•

Represent a MediaSource
getUserMedia API to access camera/microphone
Use with <video> as an URL
Send...
getUserMedia
<script>
navigator.webkitGetUserMedia({video:true}, onGotStream,
onFailedStream);
onGotStream = function(stre...
Key Features
2. Peer Connection
Audio and video session
PeerConnection
API for establishing audio/video calls
Built-in
• Peer-to-peer
• Codec control
• Encryption
• Bandwidth man...
Setup a session
To start a session, a client needs
• Local Session Description
• Remote Session Description
• Remote Sessi...
Setup a session
1. Create Local Session Description
2. Send it to remote peer B (OFFER)
3. Receive Session Description fro...
PeerConnection API
Caller side

Callee side

Create a new PeerConnection
PeerConnection(config, iceCallback)
addStream(str...
Sample Code
<script>
pc1 = new webkitPeerConnection00 (null, onIceCandidate1);
// create PC
pc2 = new webkitPeerConnection...
WebRTC Signaling Channel
• XMLHttpRequest (AJAX)
• WebSocket
• Google App Engine
Key Features
3. Data Channels

Peer-to-peer data exchange in browsers
Data Channel
Peer-to-peer exchange of arbitrary application data
•
•
•

Low latency
High message rate/thoughput
Reliable a...
Sample Code
<script>
dc1 = pc1.createDataChannel ("a label");
dc2 = pc2.createDataChannel ("a label");
dc2.onmessage = fun...
Web Server
Web Server
CƠ SỞ LÝ THUYẾT
Applications
APPLICATIONS

Video Communication
Gaming
E-Commerce
Live Video
Record + Replay
Phone Call

File Transfer
Remote Desktop
VIDEO COMMUNICATION

Web Server
Media Server

Web Server

Media
Server
SIP

Providers 1

Providers 2

Live Video

Web
Server

Media
Server
Start ups
Zingaya (Call' button for websites) enables voice calls through any
computer from a webpage. No download or phon...
WebRTC

Bring real-time to the web
HCMC University of Technology

WebRTC

Bring real-time to the web

Nguyễn Mậu Quang Vũ

Phạm Nguyên Trình

nguyenmauquangv...
Upcoming SlideShare
Loading in...5
×

WebRTC - Brings Real-Time to the Web

593

Published on

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.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
593
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
31
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "WebRTC - Brings Real-Time to the Web"

  1. 1. WebRTC Bring real-time to the web
  2. 2. HCMC University of Technology NEW TRENDS of WEB TECHNOLOGY ON MOBILE VIDEO COMMUNICATION with 09/2012
  3. 3. I. What is WebRTC ? II. Key Features 1. Media Stream 2. Peer Connection 3. Data Channels III. Applications IV. Demos
  4. 4. WebRTC TỔNG QUAN Bring real-time to the web
  5. 5. Story of Google • • • Justin Uberti Google Hangout, Google Video Chat Gmail Call Phone Plugins - Really Complicated - Security - Codec, Licensing - Other browsers, manufacturers TỔNG QUAN Build one platform, not just for web, but for the entire communications industry.
  6. 6. 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 TỔNG QUAN “WebRTC and HTML5 could enable the same transformation for real time that the original browser did for information.” Phil Edholm
  7. 7. WebRTC Support • Desktop browsers - Chrome 21 - Opera 12 - Firefox 17 - IE ? 2013 04/2012 Mozilla Firefox nightly build 01/2012 Google Chrome dev 05/2011 W3C WebRTC WG 04/2011 IETF RTCWeb WG TỔNG QUAN • Mobile browsers • Native C++ • Desktop and mobile Release
  8. 8. ỨNG DỤNG Key Features TRONG ĐÀO TẠO TỪ XA
  9. 9. I. What is WebRTC ? II. Key Features 1. Media Stream 2. Peer Connection 3. Data Channels III. Applications IV. Demos
  10. 10. Signaling path Web Server Application defined over HTTP / Websockets Web Server TỔNG QUAN Application defined over HTTP / Websockets Media path Browser Browser
  11. 11. Key Features 1. Media Stream Access audio and video
  12. 12. 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
  13. 13. 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" />
  14. 14. Key Features 2. Peer Connection Audio and video session
  15. 15. PeerConnection API for establishing audio/video calls Built-in • Peer-to-peer • Codec control • Encryption • Bandwidth management
  16. 16. Setup a session To start a session, a client needs • Local Session Description • Remote Session Description • Remote Session Candidates
  17. 17. 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 5 6 1 7 3 4
  18. 18. PeerConnection API Caller side Callee side Create a new PeerConnection PeerConnection(config, iceCallback) addStream(stream) <receive call from caller> Create local SessionDescription createOffer(hints) setLocalDescription(type, desc) startIce() <wait for response from callee> Receive remote SessionDescription setRemoteDescription(type, desc) Create PeerConnection PeerConnection(config, iceCallback) setRemoteDescription(type, desc) Create local SessionDescription createAnswer(offer, hints) setLocalDescription(type, desc) startIce()
  19. 19. 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>
  20. 20. WebRTC Signaling Channel • XMLHttpRequest (AJAX) • WebSocket • Google App Engine
  21. 21. Key Features 3. Data Channels Peer-to-peer data exchange in browsers
  22. 22. 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
  23. 23. Sample Code <script> dc1 = pc1.createDataChannel ("a label"); dc2 = pc2.createDataChannel ("a label"); dc2.onmessage = function(e) { textarea.value += e.data; } function send() { dc1.send(input.value); } </script> // reliable mode
  24. 24. Web Server
  25. 25. Web Server
  26. 26. CƠ SỞ LÝ THUYẾT Applications
  27. 27. APPLICATIONS Video Communication Gaming E-Commerce Live Video Record + Replay Phone Call File Transfer Remote Desktop
  28. 28. VIDEO COMMUNICATION Web Server
  29. 29. Media Server Web Server Media Server SIP Providers 1 Providers 2 Live Video Web Server Media Server
  30. 30. 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.
  31. 31. WebRTC Bring real-time to the web
  32. 32. HCMC University of Technology WebRTC Bring real-time to the web Nguyễn Mậu Quang Vũ Phạm Nguyên Trình nguyenmauquangvu@gmail.com hlv.nguyentrinh@gmail.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×