Simple HTML5 Camera Photo Capture

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
    </head>
    <body>
        <video autoplay></video><br />
        <input type="button" value="snapshot" /><br />
        <canvas></canvas>
        <script type="text/javascript">
            (function () {
                //Video only
                var constraints = {
                    video: true
                };
                //Video element
                var video = document.querySelector('video');
                //Get camera
                navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
                    //assign stream to video element on success
                    video.srcObject = stream;
                });
                //Button click
                document.querySelector("[type=button]").addEventListener("click", function () {
                    //Get empty canvas element
                    var canvas = document.querySelector("canvas");
                    //Set to video dimensions
                    canvas.width = video.clientWidth;
                    canvas.height = video.clientHeight;
                    //Grab snapshot and render it
                    var ctx = canvas.getContext("2d");
                    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                });
            })();
        </script>
    </body>
</html>