gum.html

<title>getUserMedia streamed to a video element</title>
<style>
  video {
    max-width: 100%;
    margin: 0;
  }
  .supported video { 
    /* I'm using CSS3 to translate the video on the X axis to give it a mirror effect */
    -webkit-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); 
    -o-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); 
    -moz-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); 
    -ms-transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); 
    transform: rotateY(180deg) rotate3d(1, 0, 0, 0deg); 
  }
  #gum {
    background: #c00;
    color: #fff;
    padding: 10px;
  }
</style>
<article>
  <video id="video" muted loop autoplay>
    <source src="/assets/remy-and-ellis2.mp4"></source>
    <source src="/assets/remy-and-ellis2.webm"></source>
  </video>
  <p id="gum">getUserMeda either not supported or not allowed - so instead here's me and my son headbanging.</p>
</article>
<script>
var video = document.getElementById('video'),
    article = video.parentNode,
    gum = document.getElementById('gum');

function init() {
  navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
  if (navigator.getUserMedia) {
    // NOTE: at time of writing March 26, 2012, audio isn't working in Chrome
    navigator.getUserMedia('video', successCallback, errorCallback);
    // Below is the latest syntax. Using the old syntax for the time being for backwards compatibility.
    //navigator.getUserMedia({video: true}, successCallback, errorCallback);
    function successCallback(stream) {
      window.stream = stream;
      if (window.webkitURL) {
        video.src = window.webkitURL.createObjectURL(stream);
      } else {
        video.src = stream;
      }
    }
    function errorCallback(error) {
      console.error('An error occurred: [CODE ' + error.code + ']');
      return;
    }
  }
}

if (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
  article.removeChild(gum);
  article.className = 'supported';
  init();
}
</script>