D3 Examples - Video Capture

xxxxxxxxxx
 
​
<!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>
    