집 > 기사 > 웹 프론트엔드 > H5를 통한 카메라 기능 구현 사례에 대한 자세한 설명

H5를 통한 카메라 기능 구현 사례에 대한 자세한 설명

Y2J원래의: 2018-05-25 09:21:435710검색

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

코드는 다음과 같습니다.

<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ide
all
y these elements aren&#39;t created until it&#39;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.addEvent
List
ener("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입니다.
마지막으로 다소 지루한 전체 코드를 붙여넣습니다.

코드는 다음과 같습니다.

<!DOCTYPE html> 
<html> 
<head> 
<title> 浏览器webcamera </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="renfufei@qq.com"> 
<meta name="Description" content="inveted by: http://davidwalsh.name/browser-camera"> 
<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> 
</head> 
<body> 
<p> 
<!-- 
声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 
宽高： 640 *480,当然，可以动态控制啦! 
--> 
<!-- 
Ideally these elements aren&#39;t created until it&#39;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> 
</p> 
</body> 
</html>

[관련 추천]

1. Html5 무료 동영상 튜토리얼

2. 🎜>HTML5 WeChat에서 전체 화면 재생을 구현하는 방법에 대한 자세한 설명

H5 새 태그의 브라우저 호환성 문제에 대한 자세한 설명

H5 제작 웹페이지 사용법 전체 개요

H5와 기존 HTML의 차이점

위 내용은 H5를 통한 카메라 기능 구현 사례에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：H5와 기존 HTML의 차이점다음 기사：H5와 기존 HTML의 차이점