• IETF communication protocols: RTCWEB, JSEP...
• W3C API standards: WebRTC, Media Capture and Streams...
• Media and communication stack: libjingle, VP8, Opus...

• Chrome and Chrome for Android
• Firefox and Firefox for Android
• Opera
• Native Java and Objective-C bindings
  (example app, API)

• Framework for cross-platform/device native and embedded apps
• Qt WebKit => Qt WebEngine
• Multimedia and new HTML5 features such as WebRTC working out-of the-box

• Acquiring audio and video
• Establishing a connection between peers
• Communicating audio and video
• Communicating arbitrary data

• MediaStreams (aka getUserMedia)
• RTCPeerConnection
• RTCDataChannel

• Represents a stream of synchronised media
• Can contain multiple audio and/or video MediaStreamTracks
• 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);

• HTTPS only prompts once!
• Chrome apps: audioCapture and videoCapture permissions
• UI settings can be changed afterwards.

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

• User wants to choose "front-facing" or "rear-facing" camera, not a USB ID!
• Choose source: spec
• Apply constraints dynamically from JavaScript: spec

Be sure to enable screen capture support in getUserMedia!

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

navigator.webkitGetUserMedia(constraints, gotStream);

• Ascertain local media conditions: resolution, codec capabilities...
• Get potential network addresses for the application's host: candidates
• Exchange this data via the signaling mechanism.

• Socket.io uses WebSocket with fallbacks
• Simple to exchange messages
• Built-in concept of 'rooms'

Codelab

Live example

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
...

Want to know what all this SDP gobbledygook actually means?

Take a look at the IETF examples.

{
  'type':'candidate',
  'label':1,
  'id':'video',
  'candidate':'a=candidate:1274936569 1 udp 1845501695 2.96.35.15 63579
               typ srflx raddr 192.168.0.3 rport 63579 generation 0\r\n'
}
...
{
  'type':'candidate',
  'label':0,
  'id':'audio',
  'candidate':'a=candidate:3802297132 1 udp 2113937151 192.168.0.3 63579
               typ host generation 0\r\n'
}

• Same API as WebSockets
• Ultra-low latency
• Optionally unreliable or reliable:
  — Firefox and Chrome 31, Chrome 30 behind a flag
• 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);
};

• 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

• SimpleWebRTC
• easyRTC
• webRTC.io
• PeerJS

• WebRTC and Web Audio resources list: bit.ly/webrtcwebaudio
• Google I/O 2013 WebRTC presentation
• Justin Uberti: Google I/O 2012 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