WebRTC allows for real-time communications directly in the web browser without plugins. It includes APIs for accessing the camera and microphone, establishing peer-to-peer connections, and exchanging arbitrary data. Popular applications of WebRTC include video chat, online gaming, live video streaming, file sharing and remote desktop access. Several startups are building WebRTC-based services for voice and video calling, video collaboration, and social video applications.
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. 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. 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
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
16. Setup a session
To start a session, a client needs
• Local Session Description
• Remote Session Description
• Remote Session Candidates
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. 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. 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>
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
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.
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