HTML5 Canvas JS는 컴퓨터나 휴대폰의 카메라를 제어합니다.

스냅 사진

// 이벤트 리스너를 제자리에 배치
window.addEventListener("DOMContentLoaded", function() {
// 요소 가져오기, 설정 생성 등
var 캔버스 = document.getElementById("캔버스"),
context = canvas.getContext("2d"),
video = document.getElementById("video"),
videoObj = { "video": true },
errBack = 함수(오류) {
console.log("동영상 캡처 오류: ", error.code); };
// 비디오 청취자를 제자리에 배치
if(navigator.getUserMedia) { // 표준
navigator.getUserMedia(videoObj, function(stream) {
video.src = 스트림;
video.play();
}, 오류뒤로);
} else if(navigator.webkitGetUserMedia) { // WebKit 접두사가 붙습니다
navigator.webkitGetUserMedia(videoObj, 함수(스트림){
video.src = window.webkitURL.createObjectURL(stream);
video.play();
}, 오류뒤로);
}
else if(navigator.mozGetUserMedia) { // Firefox 접두사가 붙습니다
navigator.mozGetUserMedia(videoObj, 함수(스트림){
video.src = window.URL.createObjectURL(stream);
video.play();
}, 오류뒤로);
}
}, 거짓);

//사진 작업 트리거
document.getElementById("스냅")
.addEventListener("클릭", function() {
context.drawImage(동영상, 0, 0, 640, 480);
});