rhee-airilab/webcam-example.html

## webcam-example.html
<html>

<head>
    <!-- Load TensorFlow.js -->
    </script>
    <style>
        #no-webcam {
            display: none;
        }
    </style>
</head>

<body>

    <div id="no-webcam">
        No webcam found. <br/> To use this demo, use a device with a webcam.
    </div>
    <!-- Top -->

    <div class="webcam-box">
        <div class="webcam-box-outer">
            <div class="webcam-box-inner">
                <video autoplay playsinline muted id="webcam" width="448" height="448"></video>
            </div>
        </div>
    </div>

    <button id="capture" onclicked="return false;">Capture</button>

    <div class="thumb-box">
        <div class="thumb-box-outer">
            <div class="thumb-box-inner">
                <img class="thumb" width=224 height=224 id="thumb"></canvas>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {

            const webcam_elem = document.getElementById('webcam');

            function webcam_adjust_size(width, height) {
                const aspectRatio = width / height;
                if (width >= height) {
                    webcam_elem.width = aspectRatio * webcam_elem.height;
                } else if (width < height) {
                    webcam_elem.height = webcam_elem.width / aspectRatio;
                }
            }

            function webcam_setup() {
                return new Promise((resolve, reject) => {
                    const navigatorAny = navigator;
                    navigator.getUserMedia = navigator.getUserMedia ||
                        navigatorAny.webkitGetUserMedia || navigatorAny.mozGetUserMedia ||
                        navigatorAny.msGetUserMedia;
                    if (navigator.getUserMedia) {
                        navigator.getUserMedia({
                                video: true
                            },
                            stream => {
                                webcam_elem.srcObject = stream;
                                webcam_elem.addEventListener('loadeddata', async() => {
                                    webcam_adjust_size(
                                        webcam_elem.videoWidth,
                                        webcam_elem.videoHeight);
                                    resolve();
                                }, false);
                            },
                            error => {
                                document.querySelector('#no-webcam').style.display = 'block';
                            });
                    } else {
                        reject();
                    }
                });
            };

            function webcam_capture(cb) {
                var w = webcam_elem.videoWidth;
                var h = webcam_elem.videoHeight;
                var canvas = document.createElement('canvas');
                canvas.width = w;
                canvas.height = h;
                var context = canvas.getContext('2d');
                context.drawImage(webcam_elem, 0, 0, w, h);
                var dataURL = canvas.toDataURL();
                console.log('captured', dataURL);
                var image = new Image();
                image.onload = function() {
                    cb(image);
                };
                image.src = dataURL;
            };


            webcam_setup();

            document.querySelector('#capture').addEventListener('click', function() {
                var image = webcam_capture(image => {
                    const thumb_elem = document.getElementById('thumb');
                    thumb_elem.width = image.width;
                    thumb_elem.height = image.height;
                    thumb_elem.src = image.src;
                });
            });


        });
    </script>
</body>

</html>
	<html>

	<head>
	<!-- Load TensorFlow.js -->
	</script>
	<style>
	#no-webcam {
	display: none;
	}
	</style>
	</head>

	<body>

	<div id="no-webcam">
	No webcam found. <br/> To use this demo, use a device with a webcam.
	</div>
	<!-- Top -->

	<div class="webcam-box">
	<div class="webcam-box-outer">
	<div class="webcam-box-inner">
	<video autoplay playsinline muted id="webcam" width="448" height="448"></video>
	</div>
	</div>
	</div>

	<button id="capture" onclicked="return false;">Capture</button>

	<div class="thumb-box">
	<div class="thumb-box-outer">
	<div class="thumb-box-inner">
	<img class="thumb" width=224 height=224 id="thumb"></canvas>
	</div>
	</div>
	</div>

	<script>
	document.addEventListener('DOMContentLoaded', () => {

	const webcam_elem = document.getElementById('webcam');

	function webcam_adjust_size(width, height) {
	const aspectRatio = width / height;
	if (width >= height) {
	webcam_elem.width = aspectRatio * webcam_elem.height;
	} else if (width < height) {
	webcam_elem.height = webcam_elem.width / aspectRatio;
	}
	}

	function webcam_setup() {
	return new Promise((resolve, reject) => {
	const navigatorAny = navigator;
	navigator.getUserMedia = navigator.getUserMedia \|\|
	navigatorAny.webkitGetUserMedia \|\| navigatorAny.mozGetUserMedia \|\|
	navigatorAny.msGetUserMedia;
	if (navigator.getUserMedia) {
	navigator.getUserMedia({
	video: true
	},
	stream => {
	webcam_elem.srcObject = stream;
	webcam_elem.addEventListener('loadeddata', async() => {
	webcam_adjust_size(
	webcam_elem.videoWidth,
	webcam_elem.videoHeight);
	resolve();
	}, false);
	},
	error => {
	document.querySelector('#no-webcam').style.display = 'block';
	});
	} else {
	reject();
	}
	});
	};

	function webcam_capture(cb) {
	var w = webcam_elem.videoWidth;
	var h = webcam_elem.videoHeight;
	var canvas = document.createElement('canvas');
	canvas.width = w;
	canvas.height = h;
	var context = canvas.getContext('2d');
	context.drawImage(webcam_elem, 0, 0, w, h);
	var dataURL = canvas.toDataURL();
	console.log('captured', dataURL);
	var image = new Image();
	image.onload = function() {
	cb(image);
	};
	image.src = dataURL;
	};



	webcam_setup();

	document.querySelector('#capture').addEventListener('click', function() {
	var image = webcam_capture(image => {
	const thumb_elem = document.getElementById('thumb');
	thumb_elem.width = image.width;
	thumb_elem.height = image.height;
	thumb_elem.src = image.src;
	});
	});



	});
	</script>
	</body>

	</html>