HTML5를 사용하여 사진을 촬영하기 위한 샘플 코드 소개
- 高洛峰원래의
- 2017-03-12 16:21:511466검색
HTML5사진 찍기 먼저 HTML 코드 구조를 살펴보겠습니다. 물론 DOM 콘텐츠의 이 부분은 사용자가 카메라 사용을 허용한 후에 동적으로 로드되고 생성되어야 합니다. 이벤트 관심 있는 친구들이 배울 수 있습니다
먼저 HTML 코드 구조를 살펴보겠습니다. 물론 DOM 콘텐츠의 이 부분은 사용자가 자신의 사용을 허용한 후에 동적으로 로드되고 생성되어야 합니다. 카메라 이벤트.
참고: 640X480의 해상도를 사용합니다. JS를 사용하여 동적으로 생성하면 해상도를 유연하게 제어할 수 있습니다.
코드는 다음과 같습니다.
<!-- 声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 宽高： 640 *480,当然，可以动态控制啦! --> <!-- Ideally these elements aren't created until it's confirmed that the client supports video/camera, but for the sake of illustrating the elements involved, they are created with markup (not JavaScript) --> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas>
JavaScript
위의 HTML 요소만 만들어지면 JavaScript 부분은 생각보다 간단해집니다. 생각해보세요:
코드는 다음과 같습니다:
// 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。
window.addEventListener("DOMContentLoaded", function() {
// canvas 元素将用于抓拍
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("Video capture error: ", error.code);
}
};
// Put video listeners into place
// 针对标准的浏览器
if(navigator.getUserMedia) { // Standard
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(video, 0, 0, 640, 480);
});
}, false);
마지막으로 웹 페이지를 웹 서버 아래에 둔 다음 http 프로토콜을 통해 액세스하는 것을 기억하세요.
또한 브라우저 버전이 최신 버전이어야 하며 HTML5의 새로운 기능을 지원해야 합니다.
번역자는 원문대로 번역하지 않았기 때문에 자격이 없습니다. 사용된 브라우저는 크롬 28입니다.
마지막으로 다소 지루한 전체 코드를 붙여넣습니다.
코드는 다음과 같습니다.
浏览器webcamera <script> // 设置事件监听，DOM内容加载完成，和jQuery的$.ready() 效果差不多。 window.addEventListener("DOMContentLoaded", function() { // canvas 元素将用于抓拍 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("Video capture error: ", error.code); } }; // Put video listeners into place // 针对标准的浏览器 if(navigator.getUserMedia) { // Standard 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(video, 0, 0, 640, 480); }); }, false); </script><!-- 声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 宽高： 640 *480,当然，可以动态控制啦! --> <!-- Ideally these elements aren't created until it's confirmed that the client supports video/camera, but for the sake of illustrating the elements involved, they are created with markup (not JavaScript) --> <video id="video" width="640" height="480" autoplay></video> <button id="snap">Snap Photo</button> <canvas id="canvas" width="640" height="480"></canvas>
위 내용은 HTML5를 사용하여 사진을 촬영하기 위한 샘플 코드 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!