카테고리 없음
WebCam Snapshot example
Soul-Learner
2015. 3. 13. 14:56
WebCam Snapshot with html5 & Google Chrome
웹카메라에 접속하여 비디오 스트림을 화면에 출력하고 버튼을 누르면 정지영상을 캔바스에 출력하는 예
웹카메라가 현재 시스템에 연결되어 있으면 아래의 테두리 안에 카메라의 현재 비디오 영상이 출력됩니다
[웹캠에서 캡쳐된 비디오 영상]
[캡쳐된 정지영상 출력]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WebCam Snapshot</title>
<script type="text/javascript">
window.onload = init;
var video;
function init() {
var canvas = window.canvas = document.querySelector('canvas');
canvas.width = 480;
canvas.height = 360;
//'캡쳐 & 디스플레이' 버튼을 누르면 카메라의 정지영상을 캔바스에 출력한다
var button = document.querySelector('button');
button.onclick = function() {
canvas.getContext('2d').
drawImage(video, 0, 0, canvas.width, canvas.height);
};
video = document.querySelector('video');
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
var div1 = {
audio: false,
video: true
};
// 카메라 접속
navigator.getUserMedia(div1, success, fail);
}
// 카메라에서 수신된 비디오 스트림을 비디오 태그에 출력한다
function success(stream) {
video.src = window.URL.createObjectURL(stream);
}
// 카메라 인식 오류시 호출
function fail(error) {
alert('no camera! check errorcode :'+error);
}
</script>
</head>
<body>
<div id="div1">
<video autoplay="autoplay"></video>
<button>캡쳐 & 디스플레이</button>
<canvas></canvas>
</div>
</body>
</html>