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

모바일 기기와 데스크톱 컴퓨터의 클라이언트 API는 처음에 동기화되지 않습니다. 처음에는 특정 기능과 해당 API가 모바일 장치에서 항상 사용할 수 있지만 점차적으로 이러한 API가 데스크톱 컴퓨터에 표시됩니다. 그러한 애플리케이션 인터페이스 기술 중 하나가 getUserMedia API입니다. 이를 통해 애플리케이션 개발자는 사용자의 카메라나 내장 카메라에 액세스할 수 있습니다. 브라우저를 통해 카메라에 액세스하고 스크린샷을 추출하는 방법을 보여 드리겠습니다.

HTML 코드

아래 코드에 댓글을 몇 개 썼으니 읽어주세요.

코드 복사

코드는 다음과 같습니다. :

스냅 사진

위 태그를 작성하기 전에 사용자의 클라이언트가 카메라를 지원하는지 확인해야 하지만 문제를 피하기 위해 이러한 HTML 태그는 여기에 직접 작성됩니다. 여기서 사용하는 길이와 너비는 640×480입니다.

자바스크립트 코드

HTML을 수동으로 작성했기 때문에 다음 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();
}, 오류뒤로);
}
}, 거짓);

사용자의 브라우저가 getUserMedia를 지원하는 것으로 확인되면 다음은 매우 간단합니다. 비디오 요소의 src를 사용자의 카메라 라이브 비디오 연결로 설정하기만 하면 됩니다. 브라우저를 사용하여 카메라에 액세스하기 위해 해야 할 일은 이것이 전부입니다!
사진 촬영 기능은 조금 복잡하다고 할 수 있습니다. 버튼에 리스너를 추가하고 캔버스에 비디오 화면을 그립니다.

코드 복사코드는 다음과 같습니다.

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

물론 사진에 필터 효과를 추가할 수도 있습니다…
과거에는 브라우저에서 사용자의 카메라에 액세스하려면 타사 플러그인을 사용해야 했는데 이는 다소 복잡했습니다. 이제 HTML5 캔버스 기술과 자바스크립트만 있으면 사용자의 카메라를 간단하고 빠르게 조작할 수 있습니다. 카메라에 대한 접근뿐 아니라 HTML5의 강력한 캔버스 기술 덕분에 사진에 다양하고 매력적인 필터 효과를 추가할 수 있습니다. 이제 브라우저에서 나만의 카메라로 사진을 찍어보세요!