WebRTC: Bring real-time to the web - Barcamp Saigon 2012

WebRTC Bring real-time to the web

NEW TRENDS of WEB TECHNOLOGY ON MOBILE

VIDEO COMMUNICATION with

HCMC University of Technology

09/2012

I. What is WebRTC ?

II. Key Features

1. Media Stream

2. Peer Connection

3. Data Channels

III. Applications

IV. Demos

TỔNG QUAN WebRTC Bring real-time to the web

TỔNG QUAN

Story of Google • Justin Uberti • Google Hangout, Google Video Chat

Gmail Call Phone • Plugins

- Really Complicated - Security - Codec, Licensing - Other browsers, manufacturers

Build one platform, not just for web, but for the entire communications industry.

TỔNG QUAN

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

“WebRTC and HTML5 could enable the same transformation for real time that the original browser did for information.”

Phil Edholm

TỔNG QUAN

WebRTC Support

• Desktop browsers - Chrome 21 - Opera 12 - Firefox 17 - IE ?

• Mobile browsers • Native C++

• Desktop and mobile

2013

04/2012

01/2012

05/2011

04/2011

Release

Mozilla Firefox nightly build

Google Chrome dev

W3C WebRTC WG

IETF RTCWeb WG

ỨNG DỤNG

TRONG ĐÀO TẠO TỪ XA Key Features

I. What is WebRTC ?

II. Key Features

1. Media Stream

2. Peer Connection

3. Data Channels

III. Applications

IV. Demos

TỔNG QUAN

Web Server

Browser Browser

Signaling

path

Web Server

Media path

Application defined over

HTTP / Websockets

Application defined over

HTTP / Websockets

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 to remote peer Combine with other HTML5 for funny effects • <canvas> • CSS • WebGL

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" />

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 management

Setup a session To start a session, a client needs • Local Session Description • Remote Session Description • Remote Session Candidates

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 3

1 4

5 6

7

PeerConnection API

Caller side Create a new PeerConnection PeerConnection(config, iceCallback) addStream(stream) Create local SessionDescription createOffer(hints) setLocalDescription(type, desc) startIce() <wait for response from callee> Receive remote SessionDescription setRemoteDescription(type, desc)

Callee side <receive call from caller> Create PeerConnection PeerConnection(config, iceCallback) setRemoteDescription(type, desc) Create local SessionDescription createAnswer(offer, hints) setLocalDescription(type, desc) startIce()

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>

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 and unreliable semantics

Use cases • Multiplayer game • Remote desktop • Real-time interactive (chat, drawing…) • File transfer • Decentralized networks

Sample Code

<script> dc1 = pc1.createDataChannel ("a label"); // reliable mode dc2 = pc2.createDataChannel ("a label"); dc2.onmessage = function(e) { textarea.value += e.data; } function send() { dc1.send(input.value); } </script>

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

Web Server Media Server

Web

Server

Media

Server

Media

Server

Live Video

Providers 1 Providers 2

SIP

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.

WebRTC Bring real-time to the web

Nguyễn Mậu Quang Vũ [email protected]

WebRTC Bring real-time to the web

Phạm Nguyên Trình [email protected]

HCMC University of Technology