HTML5를 사용하여 사진 촬영 샘플 code_html5 튜토리얼 팁

데모 주소: HTML5 사진 촬영 데모
먼저 HTML 코드 구조를 살펴보겠습니다. 물론 DOM 콘텐츠의 이 부분은 사용자가 사용을 허용한 후에 동적으로 로드되고 생성되어야 합니다. 그들의 카메라 이벤트.
참고: 640X480의 해상도를 사용합니다. JS를 사용하여 동적으로 생성하면 해상도를 유연하게 제어할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

< --
이상적으로 이러한 요소는
클라이언트가 비디오/카메라를 지원하는지 확인할 때까지 생성되지 않지만,
관련 요소를 설명하기 위해 마크업(JavaScript가 아님)으로 생성됩니다.
-->

스냅 사진
< ;canvas id="canvas" width="640" height="480">

JavaScript
위의 HTML 요소인 경우 생성되면 JavaScript 부분이 간단해집니다. 생각보다 쉽습니다.

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

/ / 이벤트 수신을 설정하면 DOM 콘텐츠 로딩이 완료되고 효과는 jQuery의 $.ready()와 유사합니다.
window.addEventListener("DOMContentLoaded", function() {
// 캔버스 요소는
캡처에 사용됩니다. var canvas = document.getElementById("canvas"),
context = canvas.getContext ( "2d"),
// 카메라의 데이터 스트림을 수신하고 재생하는 데 사용되는 video 요소
video = document.getElementById("video"),
videoObj = { "video": true },
// 오류 정보를 콘솔에 출력하는 오류 콜백 함수
errBack = function(error) {
if("object" === typeof window.console){
console .log("비디오 캡처 오류: ", error.code);
}
}// 비디오 리스너를 제자리에 배치
// 표준 브라우저의 경우
if(navigator.getUserMedia ) { // 표준
navigator.getUserMedia(videoObj, function(stream) {
video.src = stream;
video.play();
}, errBack)
} else if(navigator.webkitGetUserMedia) { // WebKit 접두어
navigator.webkitGetUserMedia(videoObj, function(stream){
video.src = window.webkitURL.createObjectURL(stream);
video.play() ;
}, errBack);
}
// 사진 버튼에 대한 이벤트 모니터링
document.getElementById("snap").addEventListener("click", function() {
/ / 캔버스에 그립니다
context.drawImage(video, 0, 0, 640, 480)
})
}, false)


웹 서버 아래에 웹 페이지를 놓고 http 프로토콜을 통해 액세스한다고 말합니다.

또한 브라우저 버전이 최신 버전이어야 하며 HTML5의 새로운 기능을 지원해야 합니다.
번역자는 원문대로 번역하지 않았기 때문에 자격이 없습니다. 사용된 브라우저는 크롬 28입니다.
마지막으로 다소 지루한 전체 코드를 붙여넣습니다.

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