WebRTC Conference Prototype Implementation

WebRTCConference Implementation

Conference Implementation2013 / 3 / 11 NCTU CSHung Yu Chen

Outline

Introduction Webrtc.js Demo Conclusion Reference

IntroductionBrief & Short Review

<video/> <audio/>

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

How does WebRTC work?

WebRTC

Web API MediaStream PeerConnection DataChannel

Equip browsers with one-to-one communication ability

Webrtc.jsJavascript API for Conference

webrtc.js - Peer side

Init

createStream()• getUserMedia()

connect()• Connect to the server

createRoom() / joinRoom()

initChat()• RTCDataChannel / Websocket

webrtc.js - Peer side

Join Room

createPeerConnections()• RTCPeerConnection API

addStreams()

addDataChannels()

sendOffers()

webrtc.js - Peer side

Peern sendOffers

sendAnswers

Start the video/audio stream

Peern+1

init

joinRoom

webrtc.js - Server side

Node.js Module

▪ Express▪ Http▪ webrtc.server.js

▪ As a WebSocket Server

webrtc.js - Server side

Events Socket Events

▪ open, message, close Create/Join Room Request

▪ Room List▪ Connection List

SDP Exchange

webrtc.js - Server side

Peern

Peern+1

init

joinRoom

WebSocket Server

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.

Demo

Conclusion

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

Reference

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/

Q&A