webrtc conference prototype implementation

21
WebRTC Conference Implementation Conference Implementation 2013 / 3 / 11 NCTU CS Hung Yu Chen

Upload: hung-yu-chen

Post on 15-Jan-2015

837 views

Category:

Technology


2 download

DESCRIPTION

WebRTC Conference Prototype Implementation

TRANSCRIPT

Page 1: WebRTC Conference Prototype Implementation

WebRTCConference Implementation

Conference Implementation2013 / 3 / 11 NCTU CSHung Yu Chen

Page 2: WebRTC Conference Prototype Implementation

Outline

Introduction Webrtc.js Demo Conclusion Reference

Page 3: WebRTC Conference Prototype Implementation

IntroductionBrief & Short Review

Page 4: WebRTC Conference Prototype Implementation

<video/> <audio/>

Page 5: WebRTC Conference Prototype Implementation

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

How does WebRTC work?

Page 7: WebRTC Conference Prototype Implementation

WebRTC

Web API MediaStream PeerConnection DataChannel

Equip browsers with one-to-one communication ability

Page 8: WebRTC Conference Prototype Implementation

Webrtc.jsJavascript API for Conference

Page 9: WebRTC Conference Prototype Implementation

webrtc.js - Peer side

Init

createStream()• getUserMedia()

connect()• Connect to the server

createRoom() / joinRoom()

initChat()• RTCDataChannel / Websocket

Page 10: WebRTC Conference Prototype Implementation

webrtc.js - Peer side

Join Room

createPeerConnections()• RTCPeerConnection API

addStreams()

addDataChannels()

sendOffers()

Page 11: WebRTC Conference Prototype Implementation

webrtc.js - Peer side

Peern sendOffers

sendAnswers

Start the video/audio stream

Peern+1

init

joinRoom

Page 12: WebRTC Conference Prototype Implementation

webrtc.js - Server side

Node.js Module

▪ Express▪ Http▪ webrtc.server.js

▪ As a WebSocket Server

Page 13: WebRTC Conference Prototype Implementation

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

webrtc.js - Server side

Peern

Peern+1

init

joinRoom

WebSocket Server

Page 15: WebRTC Conference Prototype Implementation

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

Demo

Page 17: WebRTC Conference Prototype Implementation

Conclusion

Page 18: WebRTC Conference Prototype Implementation

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

Reference

Page 20: WebRTC Conference Prototype Implementation

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

Q&A