webrtc conference prototype implementation
DESCRIPTION
WebRTC Conference Prototype ImplementationTRANSCRIPT
![Page 1: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/1.jpg)
WebRTCConference Implementation
Conference Implementation2013 / 3 / 11 NCTU CSHung Yu Chen
![Page 2: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/2.jpg)
Outline
Introduction Webrtc.js Demo Conclusion Reference
![Page 3: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/3.jpg)
IntroductionBrief & Short Review
![Page 4: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/4.jpg)
<video/> <audio/>
![Page 5: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/5.jpg)
Web Real-Time Communication
Open Standard Open Source GIPS Codec Engine Echo Cancellation Packet Loss Concealment NAT Traversal Jitter Buffer Cross Browser No Plugins
Pure JavaScript APIs
![Page 6: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/6.jpg)
How does WebRTC work?
![Page 7: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/7.jpg)
WebRTC
Web API MediaStream PeerConnection DataChannel
Equip browsers with one-to-one communication ability
![Page 8: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/8.jpg)
Webrtc.jsJavascript API for Conference
![Page 9: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/9.jpg)
webrtc.js - Peer side
Init
createStream()• getUserMedia()
connect()• Connect to the server
createRoom() / joinRoom()
initChat()• RTCDataChannel / Websocket
![Page 10: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/10.jpg)
webrtc.js - Peer side
Join Room
createPeerConnections()• RTCPeerConnection API
addStreams()
addDataChannels()
sendOffers()
![Page 11: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/11.jpg)
webrtc.js - Peer side
Peern sendOffers
sendAnswers
Start the video/audio stream
Peern+1
init
joinRoom
![Page 12: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/12.jpg)
webrtc.js - Server side
Node.js Module
▪ Express▪ Http▪ webrtc.server.js
▪ As a WebSocket Server
![Page 13: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/13.jpg)
webrtc.js - Server side
Events Socket Events
▪ open, message, close Create/Join Room Request
▪ Room List▪ Connection List
SDP Exchange
![Page 14: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/14.jpg)
webrtc.js - Server side
Peern
Peern+1
init
joinRoom
WebSocket Server
![Page 15: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/15.jpg)
webrtc.js - Server side
WebRTC needs four types of server-side functionality User discovery and communication. signaling. NAT/firewall traversal. Relay servers in case peer-to-peer communication fails.
![Page 16: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/16.jpg)
Demo
![Page 17: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/17.jpg)
Conclusion
![Page 18: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/18.jpg)
Conclusion
Opportunities Special Video/Audio Applications
▪ Live Streaming through smart phone, etc. RTCDataChannel
▪ Browser-based p2p download, etc. Communicate with deferent devices
▪ PC Browser▪ Smart TV▪ Smart phone▪ Pad
![Page 19: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/19.jpg)
Reference
![Page 20: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/20.jpg)
Reference
Real Time Communications without plugins http://www.html5rocks.com/en/tutorials/webrtc/basics/
WebRTC Project http://www.webrtc.org/home
WebRTC - @eCommConf 2011 http://www.slideshare.net/loopingrage/webrtc-ecommconf-2011
Google I/O 2012 - WebRTC: Real-time Audio/Video and P2P in HTML5 http://www.youtube.com/watch?v=E8C8ouiXHHk
What WebRTC means to Telecoms http://www.alanquayle.com/blog/2012/05/what-webrtc-means-to-telecoms.html
Node.js http://nodejs.org/
Node.js – Express Module http://expressjs.com/
![Page 21: WebRTC Conference Prototype Implementation](https://reader033.vdocuments.net/reader033/viewer/2022061218/54b6ca254a795996608b4675/html5/thumbnails/21.jpg)
Q&A