Video Capture

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photobooth</title>
<style>
.blur {
  -webkit-filter: blur(3px);
}
.brightness {
  -webkit-filter: brightness(5);
}
.contrast {
  -webkit-filter: contrast(8);
}
.hue-rotate {
  -webkit-filter: hue-rotate(90deg);
}
.hue-rotate2 {
  -webkit-filter: hue-rotate(180deg);
}
.hue-rotate3 {
  -webkit-filter: hue-rotate(270deg);
}
.saturate {
  -webkit-filter: saturate(10);
}
.grayscale {
  -webkit-filter: grayscale(1);
}
.sepia {
  -webkit-filter: sepia(1);
}
.invert {
  -webkit-filter: invert(1)
}
</style>
</head>
<body>

<article>
  <video id="monitor" autoplay onclick="changeFilter(this)" title="Click me to see different filters"></video>
 <p><button onclick="init(this)">Capture</button></p>
 <div id="splash">
  <p id="errorMessage">&uarr;<br>Click to begin</p>
 </div>
 <div id="gallery"></div>
</article>
<canvas id="photo" style="display:none"></canvas>
<script>

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia;
window.URL = window.URL || window.webkitURL;

var app = document.getElementById('app');
var video = document.getElementById('monitor');
var canvas = document.getElementById('photo');
var effect = document.getElementById('effect');
var gallery = document.getElementById('gallery');
var ctx = canvas.getContext('2d');
var intervalId = null;
var idx = 0;
var filters = [
  'grayscale',
  'sepia',
  'blur',
  'brightness',
  'contrast',
  'hue-rotate', 'hue-rotate2', 'hue-rotate3',
  'saturate',
  'invert',
  ''
];

function changeFilter(el) {
  el.className = '';
  var effect = filters[idx++ % filters.length];
  if (effect) {
    el.classList.add(effect);
  }
}

function gotStream(stream) {
  if (window.URL) {
    video.src = window.URL.createObjectURL(stream);
  } else {
    video.src = stream; // Opera.
  }

video.onerror = function(e) {
    stream.stop();
  };

stream.onended = noStream;

video.onloadedmetadata = function(e) { // Not firing in Chrome. See crbug.com/110938.
  };

// Since video.onloadedmetadata isn't firing for getUserMedia video, we have
  // to fake it.
  setTimeout(function() {
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    capture()
  }, 50);

}

function noStream(e) {
  var msg = 'No camera available.';
  if (e.code == 1) {
    msg = 'User denied access to use camera.';
  }
  document.getElementById('errorMessage').textContent = msg;cv
}

function capture() {
  setTimeout(function(){
    ctx.drawImage(video, 0, 0);
    var img = document.createElement('img');
    img.src = canvas.toDataURL('image/webp');
    gallery.appendChild(img);

var w=window.open('about:blank','image from canvas');
    w.document.write("<img src='"+img.src+"' alt='from canvas'/>");

}, 1000)

// intervalId = setInterval(function() {
    // ctx.drawImage(video, 0, 0);
    // var img = document.createElement('img');
    // img.src = canvas.toDataURL('image/webp');

//   var angle = Math.floor(Math.random() * 36);
  //   var sign = Math.floor(Math.random() * 2) ? 1 : -1;
  //   img.style.webkitTransform = 'rotateZ(' + (sign * angle) + 'deg)';

//   var maxLeft = document.body.clientWidth;
  //   var maxTop = document.body.clientHeight;

//   img.style.top = Math.floor(Math.random() * maxTop) + 'px';
  //   img.style.left = Math.floor(Math.random() * maxLeft) + 'px';

//   gallery.appendChild(img);
  // }, 150);
}

function init(el) {
  if (!navigator.getUserMedia) return console.log('navigator.getUserMedia() not available')
  el.onclick = capture;
  navigator.getUserMedia({video: true}, gotStream, noStream);
}

</script>

</body>
</html>