ghirst/gist:7370961

## gistfile1.txt
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CameraCapture.aspx.vb" Inherits="CameraCapture" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

</head>


<body>
    <form id="form1" runat="server">
    <div>
<p>Using Opera Next or Chrome Canary, use this page to take your picture!</p>

	<!--
		Ideally these elements aren't created until it's confirmed that the
		client supports video/camera, but for the sake of illustrating the
		elements involved, they are created with markup (not JavaScript)
	-->
	<video id="video" width="640" height="480" autoplay></video>
	<button id="snap" class="sexyButton">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>

	<script>

	    // Put event listeners into place
	    window.addEventListener("DOMContentLoaded", function () {
	        // Grab elements, create settings, etc.
	        var canvas = document.getElementById("canvas"),
				context = canvas.getContext("2d"),
				video = document.getElementById("video"),
				videoObj = { "video": true },
				errBack = function (error) {
				    console.log("Video capture error: ", error.code);
				};

	        // Put video listeners into place
	        if (navigator.getUserMedia) { // Standard
	            navigator.getUserMedia(videoObj, function (stream) {
	                video.src = stream;
	                video.play();
	            }, errBack);
	        } else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
	            navigator.webkitGetUserMedia(videoObj, function (stream) {
	                video.src = window.webkitURL.createObjectURL(stream);
	                video.play();
	            }, errBack);
	        }

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

	</script>


    </div>
    </form>
</body>
</html>
	<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CameraCapture.aspx.vb" Inherits="CameraCapture" %>

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

	<html xmlns="http://www.w3.org/1999/xhtml">
	<head runat="server">
	<title></title>

	</head>



	<body>
	<form id="form1" runat="server">
	<div>
	<p>Using Opera Next or Chrome Canary, use this page to take your picture!</p>

	<!--
	Ideally these elements aren't created until it's confirmed that the
	client supports video/camera, but for the sake of illustrating the
	elements involved, they are created with markup (not JavaScript)
	-->
	<video id="video" width="640" height="480" autoplay></video>
	<button id="snap" class="sexyButton">Snap Photo</button>
	<canvas id="canvas" width="640" height="480"></canvas>

	<script>

	// Put event listeners into place
	window.addEventListener("DOMContentLoaded", function () {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
	context = canvas.getContext("2d"),
	video = document.getElementById("video"),
	videoObj = { "video": true },
	errBack = function (error) {
	console.log("Video capture error: ", error.code);
	};

	// Put video listeners into place
	if (navigator.getUserMedia) { // Standard
	navigator.getUserMedia(videoObj, function (stream) {
	video.src = stream;
	video.play();
	}, errBack);
	} else if (navigator.webkitGetUserMedia) { // WebKit-prefixed
	navigator.webkitGetUserMedia(videoObj, function (stream) {
	video.src = window.webkitURL.createObjectURL(stream);
	video.play();
	}, errBack);
	}

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

	</script>


	</div>
	</form>
	</body>
	</html>