morsvox/webcam worker

## webcam worker
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Take pictures from your webcam</title>
</head>
<body>
  <div class="booth">
   <video id="video" width="400" height="300" autoplay></video>
   <a href="#" id="capture" class="booth-capture-button">Сфотографировать</a>
   <canvas id="canvas" width="400" height="300"></canvas>
   <img src="http://goo.gl/qgUfzX" id="photo" alt="Ваша фотография">
  </div>

  <style>
		.booth {
		  width: 400px;
		  background: #ccc;
		  border: 10px solid #ddd;
		  margin: 0 auto;
		}

		.booth-capture-button {
		  display: block;
		  margin: 10px 0;
		  padding: 10px 20px;
		  background: cornflowerblue;
		  color: #fff;
		  text-align: center;
		  text-decoration: none;
		}

		#canvas {
		  display: none;
		}
  </style>
  <script>
	(function() {
	  var video = document.getElementById('video'),
	   canvas = document.getElementById('canvas'),
	   context = canvas.getContext('2d'),
	   photo = document.getElementById('photo'),
	   vendorUrl = window.URL || window.webkitURL;
	  navigator.getMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.
	mozGetUserMedia || navigator.msGetUserMedia;
	  navigator.getMedia({
	   video: true,
	   audio: false
	  }, function(stream) {
	   video.src = vendorUrl.createObjectURL(stream);
	   video.play();
	  }, function(error) {
	   alert('Ошибка! Что-то пошло не так, попробуйте позже.');
	  });
	  document.getElementById('capture').addEventListener('click', function() {
	   context.drawImage(video, 0, 0, 400, 300);
	   photo.setAttribute('src', canvas.toDataURL('image/png'));
	  });
	})();
  </script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Take pictures from your webcam</title>
	</head>
	<body>
	<div class="booth">
	<video id="video" width="400" height="300" autoplay></video>
	<a href="#" id="capture" class="booth-capture-button">Сфотографировать</a>
	<canvas id="canvas" width="400" height="300"></canvas>
	<img src="http://goo.gl/qgUfzX" id="photo" alt="Ваша фотография">
	</div>

	<style>
	.booth {
	width: 400px;
	background: #ccc;
	border: 10px solid #ddd;
	margin: 0 auto;
	}

	.booth-capture-button {
	display: block;
	margin: 10px 0;
	padding: 10px 20px;
	background: cornflowerblue;
	color: #fff;
	text-align: center;
	text-decoration: none;
	}

	#canvas {
	display: none;
	}
	</style>
	<script>
	(function() {
	var video = document.getElementById('video'),
	canvas = document.getElementById('canvas'),
	context = canvas.getContext('2d'),
	photo = document.getElementById('photo'),
	vendorUrl = window.URL \|\| window.webkitURL;
	navigator.getMedia = navigator.getUserMedia \|\| navigator.webkitGetUserMedia \|\| navigator.
	mozGetUserMedia \|\| navigator.msGetUserMedia;
	navigator.getMedia({
	video: true,
	audio: false
	}, function(stream) {
	video.src = vendorUrl.createObjectURL(stream);
	video.play();
	}, function(error) {
	alert('Ошибка! Что-то пошло не так, попробуйте позже.');
	});
	document.getElementById('capture').addEventListener('click', function() {
	context.drawImage(video, 0, 0, 400, 300);
	photo.setAttribute('src', canvas.toDataURL('image/png'));
	});
	})();
	</script>
	</body>
	</html>