• Bringing real-time communications to the web
• Building a state-of-the-art media stack into Chrome
• Developing a new communications platform

• Chrome
• Chrome for Android
• Firefox
• Opera
• Native Java and Objective-C bindings

• Acquiring audio and video
• Communicating audio and video
• Communicating arbitrary data

• MediaStream (aka getUserMedia)
• RTCPeerConnection
• RTCDataChannel

• Represents a stream of audio and/or video
• Can contain multiple 'tracks'
• Obtain a MediaStream with navigator.getUserMedia()

var constraints = {video: true};

function successCallback(stream) {
  var video = document.querySelector("video");
  video.src = window.URL.createObjectURL(stream);
}

function errorCallback(error) {
  console.log("navigator.getUserMedia error: ", error);
}

navigator.getUserMedia(constraints, successCallback, errorCallback);

• Controls the contents of the MediaStream
• Media type, resolution, frame rate

video: {
  mandatory: {
    minWidth: 640,
    minHeight: 360
  },
  optional [{
    minWidth: 1280,
    minHeight: 720
  }]
}
 

// 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);

Make sure to enable Web Audio Input in about:flags!

var constraints = {
  video: {
    mandatory: {
      chromeMediaSource: 'screen'
    }
  }
};

navigator.webkitGetUserMedia(constraints, gotStream);

pc = new RTCPeerConnection(null);
pc.onaddstream = gotRemoteStream;
pc.addStream(localStream);
pc.createOffer(gotOffer);

function gotOffer(desc) {
  pc.setLocalDescription(desc);
  sendOffer(desc);
}

function gotAnswer(desc) {
  pc.setRemoteDescription(desc);
}

function gotRemoteStream(e) {
  attachMediaStream(remoteVideo, e.stream);
}

• Same API as WebSockets
• Ultra-low latency
• Unreliable or reliable
• Secure

var pc = new webkitRTCPeerConnection(servers,
  {optional: [{RtpDataChannels: true}]});

pc.ondatachannel = function(event) {
  receiveChannel = event.channel;
  receiveChannel.onmessage = function(event){
    document.querySelector("div#receive").innerHTML = event.data;
  };
};

sendChannel = pc.createDataChannel("sendDataChannel", {reliable: false});

document.querySelector("button#send").onclick = function (){
  var data = document.querySelector("textarea#send").value;
  sendChannel.send(data);
};

v=0
o=- 7614219274584779017 2 IN IP4 127.0.0.1
s=-
t=0 0
a=group:BUNDLE audio video
a=msid-semantic: WMS
m=audio 1 RTP/SAVPF 111 103 104 0 8 107 106 105 13 126
c=IN IP4 0.0.0.0
a=rtcp:1 IN IP4 0.0.0.0
a=ice-ufrag:W2TGCZw2NZHuwlnf
a=ice-pwd:xdQEccP40E+P0L5qTyzDgfmW
a=extmap:1 urn:ietf:params:rtp-hdrext:ssrc-audio-level
a=mid:audio
a=rtcp-mux
a=crypto:1 AES_CM_128_HMAC_SHA1_80 inline:9c1AHz27dZ9xPI91YNfSlI67/EMkjHHIHORiClQe
a=rtpmap:111 opus/48000/2
...

• Tell me what my public IP address is
• Simple server, cheap to run
• Data flows peer-to-peer

• Provide a cloud fallback if peer-to-peer communication fails
• Data is sent through server, uses server bandwidth
• Ensures the call works in almost all environments

• ICE: a framework for connecting peers
• Tries to find the best path for each call
• Vast majority of calls can use STUN (webrtcstats.com):

• stun.l.google.com:19302
• WebRTC stunserver, turnserver
• rfc5766-turn-server
• restund

• Mandatory encryption for media and data
• Secure UI, explicit opt-in
• Sandboxed, no plugins
• WebRTC Security Architecture

• Easy to interoperate with non-browser devices
• sipML5 open source JavaScript SIP client
• Phono open source JavaScript phone API
• Zingaya embeddable phone widget

• Video chat:
• SimpleWebRTC
• easyRTC
• webRTC.io
• Peer-to-peer data:
• PeerJS
• Sharefest

var webrtc = new WebRTC({
  localVideoEl: 'localVideo',
  remoteVideosEl: 'remoteVideos',
  autoRequestMedia: true
});

webrtc.on('readyToCall', function () {
    webrtc.joinRoom('My room name');
});

var peer = new Peer('someid', {key: 'apikey'});
peer.on('connection', function(conn) {
  conn.on('data', function(data){
    // Will print 'hi!'
    console.log(data);
  });
});

// Connecting peer
var peer = new Peer('anotherid', {key: 'apikey'});
var conn = peer.connect('someid');
conn.on('open', function(){
  conn.send('hi!');
});

• Complete video services:
• OpenTok (acquired by Telefonica Digital)
• vLine

• Justin Uberti: Google I/O presentation video
• Cullen Jennings video: HTML5 WebRTC
• HTML5 Rocks:
• Capturing audio and video in HTML5
• Getting Started With WebRTC
• Updates
• ...and a book: webrtcbook.com

• webrtc.org
• discuss-webrtc
• +webrtc
• @webrtc
• crbug.com/new