使用HTML5拍照
原文连接地址: Camera and Video Control with HTML5
演示地址: HTML5拍照演示
翻译日期: 2013年8月6日
首先,我们看看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>
使用HTML5拍照的更多相关文章
- 【Demo】HTML5 拍照上传
本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...
- HTML5拍照、摄像机功能实战
HTML5拍照.摄像机功能实战 苏格团队 作者:Tomey 开篇 最近在做一个chrome app的云相机应用,应用包括拍照.摄像.保存照片视频.上传文件等等核心功能,其中涉及到很多HTML5对媒体流 ...
- HTML5+ 拍照上传 和选择文件上传
HTML 页面内容包含以下标签即可: <input id="btn_select" type="button" value="从相册选择&quo ...
- hybird app项目实例:安卓webview中HTML5拍照图片上传
应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...
- ios系统下,html5拍照上传的压缩处理
http://gokercebeci.com/dev/canvasresize 通过canvas和base64的处理方式实现大尺寸照片的压缩和上传 介绍: https://github.com/zev ...
- html5调用摄像头并拍照
随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...
- 【Demo】QQ,github,微博第三方社交登录
本文主要讲解 集成 第三方社交账号登录 为什么会有这个需求? 主要是因为目前互联网的网站数量太多,如果在各个站点都注册一个账号 用户非常不容易记住每个账号的用户名和密码,并且非常难保证每个账号的密码足 ...
- 【iTerm2】美化你的Terminal 赠佛祖像
我们开发就是喜欢各种酷炫的东西,对于有洁癖的我,连命令行都不放过了 先上图看效果,命令行显示高亮部分 实现过程: 第一步:.bash_prompt脚本 # ~/.bash_prompt # This ...
- Iphone H5上传照片被旋转
最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...
随机推荐
- 使用JdbcTemplate 操作PostgreSQL,当where条件中有timestamp类型时,报错operator does not exist: timestamp w/out timezone
今天遇到一个问题,找了还半天,Google一下,官网显示是一个bug. 思考一番肯定是类型出了问题. Controller: Service:转化时间戳 Dao: 一波转换搞定!
- ES6(数组)
ES6数组新增特性 1. 空数组 2.将伪数组转换成真正的数组 将 p 标签集合转换成真正数组 类似于map的用法,转换数组同时还在遍历. 3.填充数组(将所有数组换成一个值) 1代表起始位置,3代表 ...
- sea.js及三种加载方式的异同
一.前言 浏览器本身并不提供模块管理的机制,过去网页开发中,为了使用各种模块,不得不在加入一大堆script标签.这样就使得网页体积臃肿,难以维护,还产生大量的HTTP请求,拖慢显示速度, ...
- 浅谈Log4net在项目中如何记录日志
一 引入背景 在软件开发周期中,无论是开发中,或是测试中,或是上线后,选择合适的工具监控程序的运行状态至关重要,只有如此,才能更好地排查程序问题和检测程序性能问题等.本篇文章主要与大家分享,如何 ...
- centos 7 x64 搭建 elasticsearch 服务
1.确认服务是否已经安装java 8 环境 使用 java -version 查看 2.在java 官网下载安装包,然后上传到服务器响应的文件中 3.使用 tar -zxvf 文件夹 解压到响应的文件 ...
- JAVA 第二天 关键字
一.标识符及字符集 Java语言规定标识符是以字母.下划线"_"或美元符号"$"开始,随后可跟数字.字母.下划线或美元符号的字符序列.Java标识符大小写敏感, ...
- geotrellis使用(四十)优雅的处理请求超过最大层级数据
前言 要说清楚这个题目对我来说可能都不是一件简单的事情,我简单尝试. 研究 GIS 的人应该都清楚在 GIS 中最常用的技术是瓦片技术,无论是传统的栅格瓦片还是比较新颖的矢量瓦片,一旦将数据切好瓦片就 ...
- Go 语言指向指针的指针
如果一个指针变量存放的又是另一个指针变量的地址,则称这个指针变量为指向指针的指针变量. 当定义一个指向指针的指针变量时,第一个指针存放第二个指针的地址,第二个指针存放变量的地址: 指向指针的指针变量声 ...
- Jmeter(七)_if控制器+循环控制器+计数器控制接口分支
最近查阅了一下网上关于if控制器的文章,大同小异,几乎找不到原创,于是决定自己写一篇 下午测试接口,遇到了一个审核的流程.逻辑很简单,就是审核不通过之后返回去继续修改再提交,然后再审核,直到通过为止. ...
- Bootstrap3 表单-被支持的控件:文本域
支持多行文本的表单控件.可根据需要改变 rows 属性. <textarea class="form-control" rows="3"></ ...