[HTML] 웹캠 사용하기

2020. 6. 23. 16:49HTML

<video id="video" width="320" height="240" autoplay></video>
<canvas id="canvas" width="960" height="720"></canvas>
<button type="button" id="webcamBtn">캡쳐하기</button>
<script>
if(navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
	navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) {
		var video = document.getElementById('video');
		video.srcObject = stream;
		video.play();
	});
}

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var video = document.getElementById('video');
document.getElementById("webcamBtn").addEventListener("click",function() {
	context.drawImage(video,0,0,960,720);
});
</script>