laixintao/Snap photo with html5.html

## Snap photo with html5.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<video id="video" width="640" height="480" autoplay></video>
		<button id="snap">Snap Photo</button>
		<canvas id="canvas" width="640" height="480"></canvas>
		<script>
			// Grab elements, create settings, etc.
			var video = document.getElementById('video');

			// Get access to the camera!
			if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
				// Not adding `{ audio: true }` since we only want video now
				navigator.mediaDevices.getUserMedia({
					video: true
				}).then(function(stream) {
					video.src = window.URL.createObjectURL(stream);
					video.play();
				});
			}

			/* Legacy code below: getUserMedia
			else if(navigator.getUserMedia) { // Standard
			    navigator.getUserMedia({ video: true }, function(stream) {
			        video.src = stream;
			        video.play();
			    }, errBack);
			} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
			    navigator.webkitGetUserMedia({ video: true }, function(stream){
			        video.src = window.webkitURL.createObjectURL(stream);
			        video.play();
			    }, errBack);
			} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
			    navigator.mozGetUserMedia({ video: true }, function(stream){
			        video.src = window.URL.createObjectURL(stream);
			        video.play();
			    }, errBack);
			}
			*/
			// Elements for taking the snapshot
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			var video = document.getElementById('video');

			// Trigger photo take
			document.getElementById("snap").addEventListener("click", function() {
				context.drawImage(video, 0, 0, 640, 480);
			});
		</script>
	</body>

</html>

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>

	<body>
	<video id="video" width="640" height="480" autoplay></video>
	<button id="snap">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>
	<script>
	// Grab elements, create settings, etc.
	var video = document.getElementById('video');

	// Get access to the camera!
	if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
	// Not adding `{ audio: true }` since we only want video now
	navigator.mediaDevices.getUserMedia({
	video: true
	}).then(function(stream) {
	video.src = window.URL.createObjectURL(stream);
	video.play();
	});
	}

	/* Legacy code below: getUserMedia
	else if(navigator.getUserMedia) { // Standard
	navigator.getUserMedia({ video: true }, function(stream) {
	video.src = stream;
	video.play();
	}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia({ video: true }, function(stream){
	video.src = window.webkitURL.createObjectURL(stream);
	video.play();
	}, errBack);
	} else if(navigator.mozGetUserMedia) { // Mozilla-prefixed
	navigator.mozGetUserMedia({ video: true }, function(stream){
	video.src = window.URL.createObjectURL(stream);
	video.play();
	}, errBack);
	}
	*/
	// Elements for taking the snapshot
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var video = document.getElementById('video');

	// Trigger photo take
	document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
	});
	</script>
	</body>

	</html>