Preflight
        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.
      
    
        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.
      
    
        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.
      
    
        Your browser does not support the MediaStream API.
      
    - 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
  Slide Template by HTML5 WOW
- 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
- 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
- set up video on a Web page
        
- <video> element
 
 - access local devices: camera, microphone
 - display a/v from local or remote peer
 - connect to remote peers
 
Plugin-free video conferencing in the browser!
<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>
  - Establish a local stream (DONE)
 - Negotiate a connection: WebSockets, SIP, etc.
 - Add the remote stream to the local display
 
<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);
}                                
  Go out and play!
Silvia Pfeiffer blog.gingertech.net silviapfeiffer1@gmail.com @silviapfeiffer Slides: http://html5videoguide.net/presentations/WebDirCode2012/
