Preflight

Google Chrome
At this stage, you will need to use Google Chrome 19+ to see all of the functionality in this presentation. You will need to go to chrome://flags and activate the MediaStream and PeerConnection experiments.
Mozilla
You are running a Mozilla browser. While such browsers generally have excellent support for HTML5 features, this presentation has only been tested using Google Chrome. You should still be able to navigate the slides by using left/right arrow keys, but will currently see display errors and none of the demos will work.
Other browser
You are running a browser that has not been tested with this presentation. This presentation has been developed for Google Chrome. You may not be able to run some or all of the samples listed here.
MediaStream API: supported
MediaStream API: not supported
Your browser does not support the MediaStream API.
If things look good, press → to move on.
Welcome! (This field is for presenter notes and commentary.)
Press:
  • Space or ← / → to move around
  • Ctrl/Command / – or + to zoom in and out if slides don’t fit
  • N to show/hide speaker notes
  • H to highlight important elements in code snippets

Implementing Video Conferencing in HTML5

Silvia Pfeiffer
Web Directions Code
23rd May 2012
13:40 - 14:00

Slide Template by HTML5 WOW
Who am I?

@silviapfeiffer
  • W3C and WHATWG video standards
  • HTML5 Accessibility Task Force
  • Google video accessibility contractor
  • Mozilla video accessibility contractor
  • Video research at CSIRO

WebRTC: Video Conferencing on the Web

WebRTC Website
Video Conferencing is hard: you need
  • Wideband codecs (voice and video)
  • Echo cancellation
  • Automatic Gain Control
  • Noise reduction/suppression
  • Dynamic jitter buffers
  • Error concealment
  • Network Traversal
  • P2P protocols
  • Session setup

Take a deep breath and don't worry

You only need to understand how to
  • set up video on a Web page
    • <video> element
  • access local devices: camera, microphone
    • navigator.getUserMedia()
  • display a/v from local or remote peer
    • createObjectURL
  • connect to remote peers
    • PeerConnection API

Plugin-free video conferencing in the browser!

Access local device and display: getUserMedia(), createObjectURL
<video id="sourcevid" autoplay></video>
<script>
  var video = document.getElementById('sourcevid');
  navigator.getUserMedia('video', success, error);
  function success(stream) {
      video.src = window.URL.createObjectURL(stream);
  }
</script>
Prefixes Alert
  • WebKit:
    • webkitGetUserMedia()
    • window.webkitURL.createObjectURL()
  • Opera:
    • getUserMedia()
    • set video.src directly
  • Firefox:
    • mozGetUserMedia()
    • window.URL.createObjectURL()
  • IE: not implemented
getUserMedia() Parameter Alert
  • NEW: Chrome20+, Opera Dev build, Firefox Mobile Dev 
    webkitGetUserMedia({audio:true, video:true},
                   onSuccess, onError);
  • OLD: Chrome19 
    webkitGetUserMedia("video,audio",
                   onSuccess, onError);
More details
Privacy Alerts

Chrome permissions:

Opera privacyUI:

Cool things to do with getUserMedia()

Face Detection

Live video effects

Augmented Reality Slides

Exploding Video

Xylophone

Bring in the remote user: PeerConnection
  1. Establish a local stream (DONE)
  2. Establish a connection: WebSockets, SIP, etc.
  3. Add the remote stream to the local display

Establish a connection

Add the remote stream
<video id="remotevid" autoplay></video>
var remotevid = document.getElementById('remotevid');

peerConn = new webkitPeerConnection("TURN localhost:12345", onSignal);
peerConn.onaddstream = onRemoteStreamAdded;
peerConn.addstream = localStream;

function onSignal(message) {
    sendSignalling(message);
}
function onRemoteStreamAdded(event) {
    remoteVideo.src = window.URL.createObjectURL(event.stream);
}

Demo: WebSocket Server, 2 Clients

Cool things to do with PeerConnection

Video Conference

WebMeeting

We Blend

Puzzlible

VoIP calls (SIP Client)

Go out and play!

Silvia Pfeiffer
blog.gingertech.net
silviapfeiffer1@gmail.com
@silviapfeiffer