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 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 Web browsers

Silvia Pfeiffer
Geek Girls Dinner
31st July 2012
Slide Template by HTML5 WOW
What do I do?

@silviapfeiffer
http://blog.gingertech.net
  • W3C and WHATWG video standards
  • HTML5 Accessibility Task Force
  • Google video accessibility contractor
  • Mozilla video accessibility contractor
  • Video research at CSIRO
  • W3C HTML5 spec co-editor (new)

Developer warning!

But with demo for everyone :-)

WebRTC: Video Conferencing on the Web

WebRTC Website
Video Conferencing requires solving difficult problems:
  • Wideband codecs (voice and video)
  • Echo cancellation
  • Noise reduction/suppression
  • Automatic Gain Control
  • 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>
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. Negotiate a connection: WebSockets, SIP, etc.
  3. Add the remote stream to the local display
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);
}
Video Conferencing in HTML5 - Demo
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
Slides: http://html5videoguide.net/presentations/WebDirCode2012/