Scribd
Upload
150 views

Webrtc: Plugin-Free Real-Time Communication

WebRTC allows for real-time communication through web browsers without plugins. It uses open standards defined by the W3C and IETF for getting audio/video streams and exchanging data between peers. Key APIs include getUserMedia, RTCPeerConnection, and DataChannel. Signaling is required to establish connections between peers which may use STUN, TURN, and ICE for network traversal. WebRTC has potential to improve customer support, remote collaboration, and interactive applications. It works across browsers like Chrome and is being adopted on mobile as well.

Uploaded by

cilango1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
150 views

Webrtc: Plugin-Free Real-Time Communication

WebRTC allows for real-time communication through web browsers without plugins. It uses open standards defined by the W3C and IETF for getting audio/video streams and exchanging data between peers. Key APIs include getUserMedia, RTCPeerConnection, and DataChannel. Signaling is required to establish connections between peers which may use STUN, TURN, and ICE for network traversal. WebRTC has potential to improve customer support, remote collaboration, and interactive applications. It works across browsers like Chrome and is being adopted on mobile as well.

Uploaded by

cilango1
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

WebRTC

Plugin-free real-time communication


Sam Dutton
Google Chrome Developer Relations
samdutton.com
@sw12

What about you?

getUserMedia

RTCPeerConnection

SIP, PSTN, STUN, ICE, TURN

WebRTC is a new front in the long war


for an open and unencumbered web

- Brendan Eich, inventor of JavaScript

The democratisation
of communication

RTC
Corporate, closed, complex
Expensive audio and video technology
Licensed or developed in-house
Hard to integrate with other Web services

Today on the Web


Cumbersome or low quality
Find, download, install
...and update
Flash: limited quality, long delays, often unreliable

WebRTC implements open standards for real-time


communication for video, audio and data

What is WebRTC?
Technology package built by Google at great cost
Freely and openly available via webrtc.org
An open community: to define and standardise
Low cost, high quality audio and video communication

Standards and specs

IETF: protocols and formats

W3C: APIs for web apps

What does it change?


No licences or other fees
Integration via simple, standardised Web APIs
Easy for people to use your service:
- no downloads, no installation
- just surf to the right address!

Why?
Person to person communication:
- the foundation of how we interact
Without this, the Web is limited:
- to develop new kinds of interaction

What will we see?


Seamless person-to-person communication
Better customer support
More frequent person-to-person interaction
Systems that interact through voice and video

Media

samdutton.net/mapTrack

samdutton.net/mapTrack

Networking

jimmylee.info

tethr.tumblr.com

What does RTC need to do?

Get real-time streaming audio, video or data


Communicate real-time streaming audio, video or data
Exchange session control messages and media information

simpl.info/getusermedia

Getting streaming video with getUserMedia


navigator.mozGetUserMedia({video: true},
function(stream) {
document.querySelector('video').src = stream;
},
function(error) {
console.log(error);
});

MediaStream components
MediaStream
- stop()
- audioTracks
- videoTracks
MediaStreamTrackList: one for audio, one for video
MediaStreamTrack (same codec)
- kind:, e.g. "video"
- label:, e.g. "FaceTime HD Camera (Built-in)"
Channel

neave.com/webcam/html5

soundstep.com/blog/experiments/jsdetection

getUserMedia + Web Audio


// Success callback when requesting audio input stream
function gotStream(stream) {
var audioContext = new webkitAudioContext();
// Create an AudioNode from the stream
var mediaStreamSource = audioContext.createMediaStreamSource(stream);
// Connect it to the destination or any other node for processing!
mediaStreamSource.connect(audioContext.destination);
}
navigator.webkitGetUserMedia({audio:true}, gotStream);

Enable Web Audio Input in about:flags

webaudiodemos.appspot.com/pitchdetect

webaudiodemos.appspot.com/input

lab.aerotwist.com/webgl/audio-room

What does WebRTC need to do?

Get real-time streaming audio, video or data


Communicate real-time streaming audio, video or data
Exchange session control messages and media information

...so what are the APIs?

MediaStream
RTCPeerConnection
DataChannel

Peer discovery and signalling

Discovery

Signalling

Peer to peer, but we need servers :^\

JSEP architecture

RTCPeerConnection

simpl.info/peerconnection

Signalling: make me an offer


1. Caller sends offer.
2. Callee receives offer.
3. Callee sends answer.
4. Caller receives answer.

Signalling: find me a candidate


1. Caller creates RTCPeerConnection object.
2. If success, callback passed IceCandidate.
3. Callee sends IceCandidate to callee.
4. Callee creates a new remote IceCandidate, adds to remote description.
5. Ping!

Making the connection


w3.org/TR/webrtc/#simple-example

Back to the servers...

User discovery, communication


Signalling
STUN: NAT traversal
TURN: if all else fails

RTCPeerConnection instantiation

var config = {"iceServers": [{"url": "stun:stun.l.google.com:19302"}]}


function start(isCaller) {
var pc = new RTCPeerConnection(config);
...
}

STUN, TURN, ICE

Where can I use it?

Google Chrome: getUserMedia and RTCPeerConnection in Stable


Opera: getUserMedia
Firefox: getUserMedia in Nightlies, RTCPeerConnection in FF18 in January 2013
IE: full WebRTC support now via Chrome Frame

Mobile

Ericsson Bowser browser

Don't forget the C++!


webrtc.org/reference/api-description

Security
Secure protocols: DTLS, SRTP
No plugins
Proposed WebRTC Security Architecture (IETF 82)
http://www.w3.org/TR/webrtc/#security-considerations

apprtc.appspot.com

webglmeeting.appspot.com

www.playwhoamigame.com

Find out more


webrtc.org
Justin Uberti: Google I/O video
Cullen Jennings video: HTML5 WebRTC
HTML5 Rocks:
- Capturing audio and video in HTML5
- Getting Started With WebRTC
discuss-webrtc
@webrtc

Standards

w3.org/TR/webrtc
dev.w3.org/2011/webrtc/editor/getusermedia.html
tools.ietf.org/html/draft-ietf-rtcweb-jsep-00

new.crbug.com

samdutton.com/webrtc.pdf

WebRTC and HTML5 could enable the same


transformation for real-time communications
that the original browser did for information.

- Phil Edholm, NoJitter

Thanks!

@sw12
samdutton.com
simpl.info

You might also like