댓글 : HTML5에서 사진을 찍으십시오. 먼저 HTML 코드 구조를 살펴 보겠습니다. 물론 사용자가 카메라 이벤트를 사용한 후에 DOM 컨텐츠 의이 부분은 동적으로로드되어야합니다. 관심있는 친구들은 그것에 대해 배울 수 있습니다.
데모 주소 : HTML5 사진 데모먼저 HTML 코드 구조를 살펴 보겠습니다. 물론 사용자가 카메라 이벤트를 사용하여 시작한 후 DOM 컨텐츠 의이 부분을 동적으로로드해야합니다.
참고 : 640x480의 해상도를 사용합니다. JS 동적 생성을 사용하는 경우 해상도를 유연하게 제어 할 수 있습니다.
<!-
성명서 :이 div는 웹캠, 웹캠을 허용 한 후 동적으로 생성되어야합니다.
너비와 높이 : 640 * 480 물론, 동적으로 제어 할 수 있습니다!
->
<!-
이상적 으로이 요소는
클라이언트는 비디오/카메라를 지원하지만
관련된 요소는 마크 업으로 만들어졌습니다 (JavaScript 아님)
->
<비디오 자동 재생> </video>
<버튼> 스냅 사진 </button>
<canvas> </canvas>
자바 스크립트
위의 HTML 요소가 생성되는 한 JavaScript 부분이 생각보다 간단합니다.
// 이벤트 청취를 설정하고 DOM 컨텐츠가로드되어 JQuery의 $ .ready () 효과와 유사합니다.
Window.AddeventListener ( "domContentLoaded", function () {
// 캔버스 요소는 캡처에 사용됩니다
var canvas = document.getElementById ( "Canvas"),
context = canvas.getContext ( "2d"),
// 비디오 요소, 카메라의 데이터 스트림을 수신하고 재생하려면
video = document.getElementByid ( "비디오"),
vidueobj = { "video": true},
// 오류 콜백 함수 콘솔에서 오류 메시지를 인쇄합니다.
errback = function (오류) {
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-prefixed
navigator.webkitgetusermedia (videoobj, function (stream) {
video.src = window.webkiturl.createobjecturl (stream);
video.play ();
}, errback);
}
// 사진 버튼의 이벤트를 듣습니다
document.getElementById ( "snap"). addeventListener ( "click", function () {
// 캔버스를 그립니다
Context.DrawImage (비디오, 0, 0, 640, 480);
});
}, 거짓);
마지막으로 웹 페이지를 웹 서버 아래에 놓고 HTTP 프로토콜을 통해 액세스해야합니다.
또한 브라우저 버전은 더 새롭고 새로운 HTML5 관련 기능을 지원해야합니다.
번역기는 자격이 없으며 원본 텍스트에 따라 번역되지 않았습니다. 사용 된 브라우저는 Chrome 28입니다.
마지막으로, 완전한 코드를 게시하십시오.
<! doctype html>
<html>
<헤드>
<title> 브라우저 WebCamera </title>
<meta content = "editplus">
<meta content = "[email protected]">
<meta content = "Inveted by :">
<cript>
// 이벤트 청취를 설정하고 DOM 컨텐츠가로드되어 JQuery의 $ .ready () 효과와 유사합니다.
Window.AddeventListener ( "domContentLoaded", function () {
// 캔버스 요소는 캡처에 사용됩니다
var canvas = document.getElementById ( "Canvas"),
context = canvas.getContext ( "2d"),
// 비디오 요소, 카메라의 데이터 스트림을 수신하고 재생하려면
video = document.getElementByid ( "비디오"),
vidueobj = { "video": true},
// 오류 콜백 함수 콘솔에서 오류 메시지를 인쇄합니다.
errback = function (오류) {
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-prefixed
navigator.webkitgetusermedia (videoobj, function (stream) {
video.src = window.webkiturl.createobjecturl (stream);
video.play ();
}, errback);
}
// 사진 버튼의 이벤트를 듣습니다
document.getElementById ( "snap"). addeventListener ( "click", function () {
// 캔버스를 그립니다
Context.DrawImage (비디오, 0, 0, 640, 480);
});
}, 거짓);
</스크립트>
</head>
<body>
<div>
<!-
성명서 :이 div는 웹캠, 웹캠을 허용 한 후 동적으로 생성되어야합니다.
너비와 높이 : 640 * 480 물론, 동적으로 제어 할 수 있습니다!
->
<!-
이상적 으로이 요소는
클라이언트는 비디오/카메라를 지원하지만
관련된 요소는 마크 업으로 만들어졌습니다 (JavaScript 아님)
->
<비디오 자동 재생> </video>
<버튼> 스냅 사진 </button>
<canvas> </canvas>
</div>
</body>
</html>