morsvox · September 12, 2016 15:47
diff --git a/webcam worker b/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>