1wheel/index.html

## index.html

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

	<!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">↑<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>