使用HTML5拍照示例代码


Posted in HTML / CSS onAugust 06, 2013

演示地址: HTML5拍照演示
首先,我们看看HTML代码结构,当然,这部分的DOM内容应该是在用户允许使用其摄像头事件出发后,动态加载生成的。
注意: 我们采用的是 640X480的分辨率,如果采用JS动态生成,那么您是可以灵活控制分辨率的。

复制代码
代码如下:

<!--
声明: 此div应该在允许使用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);

最后,记得讲您的网页放到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>
<div>
<!--
声明: 此div应该在允许使用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>
</div>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3 简写animation
May 10 HTML / CSS
使用CSS3设计地图上的雷达定位提示效果
Apr 05 HTML / CSS
纯CSS3实现运行时钟的示例代码
Jan 25 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
HTML5 device access 设备访问详解
May 24 HTML / CSS
详解利用canvas实现环形进度条的方法
Jun 12 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
Jun 06 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
Aug 02 #HTML / CSS
HTML5 Canvas自定义圆角矩形与虚线示例代码
Aug 02 #HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 #HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 #HTML / CSS
HTML5 中新的全局属性(整理)
Jul 31 #HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 #HTML / CSS
html5模拟平抛运动(模拟小球平抛运动过程)
Jul 25 #HTML / CSS
You might like
推荐php模板技术[转]
2007/01/04 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php技巧小结【推荐】
2017/01/19 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
php 7新特性之类型申明详解
2017/06/06 PHP
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
js里取容器大小、定位、距离等属性搜集整理
2013/08/19 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
jQuery实现tab标签自动切换的方法
2015/02/28 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
实用jquery操作表单元素的简单代码
2016/07/04 Javascript
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
js选项卡的制作方法
2017/01/23 Javascript
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
2017/05/08 jQuery
Windows下使用Nodejs运行js的方法
2017/09/02 NodeJs
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
iphone刘海屏页面适配方法
2019/05/07 Javascript
[46:55]Ti4 冒泡赛第二轮 LGD vs C9
2014/07/14 DOTA
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
python显示生日是星期几的方法
2015/05/27 Python
Python自动发邮件脚本
2017/03/31 Python
详解TensorFlow查看ckpt中变量的几种方法
2018/06/19 Python
Django框架模板文件使用及模板文件加载顺序分析
2019/05/23 Python
详解python中的index函数用法
2019/08/06 Python
关于Numpy数据类型对象(dtype)使用详解
2019/11/27 Python
通过代码实例了解Python3编程技巧
2020/10/13 Python
Python远程linux执行命令实现
2020/11/11 Python
Missguided美国官网:英国时尚品牌
2018/01/18 全球购物
工作迟到检讨书
2014/02/21 职场文书
民用住房租房协议书
2014/10/29 职场文书
逃出克隆岛观后感
2015/06/09 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
排查并解决MySQL生产库内存使用率高的报警
2022/04/11 MySQL