robsonalves/gist:70d0c998d96e7f6f290b

## gistfile1.txt
<!doctype html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>GetUserMedia HTML5 with Photo :D Smile!</title>
</head>
<body>
<button id="takePicture">Sorria! e clique</button><br />
<video id="videoWebCamera"></video>
<canvas id="canvas" style="display:none;"></canvas>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" id="photo" alt="photo">
<script>
    ;(function(){
        function validateBrowserSupport(){
            return navigator.getUserMedia = navigator.getUserMedia ||
            navigator.webkitGetUserMedia ||
            navigator.mozGetUserMedia ||
            navigator.msGetUserMedia || null;

        }


        // Now we can use it
        if( validateBrowserSupport() ){
            var videoPlaying = false;
            var constraints = {
                video: true,
                audio:false
            };
            var video = document.getElementById('videoWebCamera');

            var media = navigator.getUserMedia(constraints, function(stream){

                // URL Object is different in WebKit
                var url = window.URL || window.webkitURL;

                // create the url and set the source of the video element
                video.src = url ? url.createObjectURL(stream) : stream;

                // Start the video
                video.play();
                videoPlaying  = true;
            }, function(error){
                console.log("ERROR");
                console.log(error);
            });


            // Listen for user click on the "take a photo" button
            document.getElementById('takePicture').addEventListener('click', function(){
                if (videoPlaying){
                    var canvas = document.getElementById('canvas');
                    canvas.width = video.videoWidth;
                    canvas.height = video.videoHeight;
                    canvas.getContext('2d').drawImage(video, 0, 0);
                    var data = canvas.toDataURL('image/webp');
                    document.getElementById('photo').setAttribute('src', data);
                }
            }, false);


        } else {
            console.log("Seus Browser não tem suporte para o GetUserMedia.");
        }
    })();
</script>
</body>
</html>
	<!doctype html>
	<html lang="pt-br">
	<head>
	<meta charset="UTF-8">
	<title>GetUserMedia HTML5 with Photo :D Smile!</title>
	</head>
	<body>
	<button id="takePicture">Sorria! e clique</button><br />
	<video id="videoWebCamera"></video>
	<canvas id="canvas" style="display:none;"></canvas>
	<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" id="photo" alt="photo">
	<script>
	;(function(){
	function validateBrowserSupport(){
	return navigator.getUserMedia = navigator.getUserMedia \|\|
	navigator.webkitGetUserMedia \|\|
	navigator.mozGetUserMedia \|\|
	navigator.msGetUserMedia \|\| null;

	}


	// Now we can use it
	if( validateBrowserSupport() ){
	var videoPlaying = false;
	var constraints = {
	video: true,
	audio:false
	};
	var video = document.getElementById('videoWebCamera');

	var media = navigator.getUserMedia(constraints, function(stream){

	// URL Object is different in WebKit
	var url = window.URL \|\| window.webkitURL;

	// create the url and set the source of the video element
	video.src = url ? url.createObjectURL(stream) : stream;

	// Start the video
	video.play();
	videoPlaying = true;
	}, function(error){
	console.log("ERROR");
	console.log(error);
	});


	// Listen for user click on the "take a photo" button
	document.getElementById('takePicture').addEventListener('click', function(){
	if (videoPlaying){
	var canvas = document.getElementById('canvas');
	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	canvas.getContext('2d').drawImage(video, 0, 0);
	var data = canvas.toDataURL('image/webp');
	document.getElementById('photo').setAttribute('src', data);
	}
	}, false);



	} else {
	console.log("Seus Browser não tem suporte para o GetUserMedia.");
	}
	})();
	</script>
	</body>
	</html>