Rumah > Artikel > hujung hadapan web > 通过H5实现拍照功能的实例详解
通过H5实现拍照功能的实例详解
- Y2Jasal
- 2018-05-25 09:21:435703semak imbas
HTML5拍照首先，我们看看HTML代码结构，当然，这部分的DOM内容应该是在用户允许使用其摄像头事件出发后，动态加载生成的，感兴趣的朋友可以了解下
演示地址： HTML5拍照演示
首先，我们看看HTML代码结构，当然，这部分的DOM内容应该是在用户允许使用其摄像头事件出发后，动态加载生成的。
注意： 我们采用的是 640X480的分辨率，如果采用JS动态生成，那么您是可以灵活控制分辨率的。
代码如下:
<!-- 声明： 此p应该在允许使用webcam，网络摄像头之后动态生成 宽高： 640 *480,当然，可以动态控制啦! --> <!-- Ide all y 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.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);最后，记得讲您的网页放到web服务器下面，然后通过http协议来访问哦。
另外，需要浏览器版本较新，并且支持HTML5的相关新特性才可以。
译者不算称职啦，没有按原文来翻译。使用的浏览器是chrome 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'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>
</p>
</body>
</html>【相关推荐】
1. Html5免费视频教程
5. H5与传统html的区别
Atas ialah kandungan terperinci 通过H5实现拍照功能的实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：H5与传统html的区别Artikel seterusnya：H5制作一个注册页面的代码实例