原文连接地址： 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拍照的更多相关文章

  1. 【Demo】HTML5 拍照上传

    本文主要讲解 手机浏览器 如何拍照 为什么会有这个需求 最近做一个项目要用到拍照然后上传照片,但是网页拍照一般都是用Flash做的,而我们主要是H5页面,如果在微信里面有权限就可以通过JSSDK调起摄 ...

  2. HTML5拍照、摄像机功能实战

    HTML5拍照.摄像机功能实战 苏格团队 作者:Tomey 开篇 最近在做一个chrome app的云相机应用,应用包括拍照.摄像.保存照片视频.上传文件等等核心功能,其中涉及到很多HTML5对媒体流 ...

  3. HTML5+ 拍照上传 和选择文件上传

    HTML 页面内容包含以下标签即可: <input id="btn_select" type="button" value="从相册选择&quo ...

  4. hybird app项目实例：安卓webview中HTML5拍照图片上传

    应用的平台环境:安卓webview: 涉及的技术点: (1) <input type="file" > :在开发中,安卓webview默认点击无法调用文件选择与相机拍照 ...

  5. ios系统下，html5拍照上传的压缩处理

    http://gokercebeci.com/dev/canvasresize 通过canvas和base64的处理方式实现大尺寸照片的压缩和上传 介绍: https://github.com/zev ...

  6. html5调用摄像头并拍照

    随着flash被禁用,flash上传附件的方式已成为过去,现在开始用html5上传了.本片文章就是介绍如何使用html5拍照,其实挺简单的原理: 调用摄像头采集视频流,利用canvas的特性生成bas ...

  7. 【Demo】QQ，github，微博第三方社交登录

    本文主要讲解 集成 第三方社交账号登录 为什么会有这个需求? 主要是因为目前互联网的网站数量太多,如果在各个站点都注册一个账号 用户非常不容易记住每个账号的用户名和密码,并且非常难保证每个账号的密码足 ...

  8. 【iTerm2】美化你的Terminal 赠佛祖像

    我们开发就是喜欢各种酷炫的东西,对于有洁癖的我,连命令行都不放过了 先上图看效果,命令行显示高亮部分 实现过程: 第一步:.bash_prompt脚本 # ~/.bash_prompt # This  ...

  9. Iphone H5上传照片被旋转

    最近做项目发现在Iphone下,我们上传图片都会被翻转,最后查阅资料发现,的确是IOS的问题 不说过程,直接解决方法 iOS下,html方式使用<input type="file&qu ...

随机推荐

  1. 特殊权限 SUID、SGID、Sticky

    摘录之----------QuintinX 一. 前提 本篇主要讲解SUID, SGID, Sticky三个权限的基本原理和应用. 为什么要使用特殊权限? 比如系统中假如有超过四类人然而每一类人都需要 ...

  2. Docker学习系列（三）Docker搭建gitlab的两种方式

    一.直接下载docker-ce 1.拉取gitlab/gitlab-ce Randy:~ Randy$ docker pull gitlab/gitlab-ce Using default tag: ...

  3. JavaScript正则表达式模式匹配(4)——使用exec返回数组、捕获性分组和非捕获性分组、嵌套分组

    使用exec返回数组 var pattern=/^[a-z]+\s[0-9]{4}$/; var str='google 2012'; alert(pattern.exec(str)); //返回一个 ...

  4. 3-学习GPRS_Air202(需要知道的关于Lua的一些基本的知识)

      http://www.cnblogs.com/yangfengwu/p/8948935.html 学东西一定是打破沙锅学到底,有问题就解决问题,不要试图去回避或者放弃解决当前的问题,如果总是回避或 ...

  5. OLE：对象的类没有在注册数据库中注册

    我在网上下载了破解版的SAS9.3,用了一段时间之后,今天打开就填出一个提示框:OLE:对象的类没有在注册数据库中注册 激活该对象所需的应用程序不可用.是否用"转换--"将其转换为 ...

  6. find函数用法详解

    语法:find (string, sub3tring<, modifiers, startpos>),返回substring首次在string中出现的位置,若未找到,则返回0.其中:mod ...

  7. Oracle中SQL语句分类

    Oracle中SQL语句分类如下:1.DML语句 insert/delete/update/select/merge/explan plan/lock table2.DDL语句 create/atlt ...

  8. MySQL UPDATE 查询

    MySQL UPDATE 查询 如果我们需要修改或更新MySQL中的数据,我们可以使用 SQL UPDATE 命令来操作.. 语法 以下是 UPDATE 命令修改 MySQL 数据表数据的通用SQL语 ...

  9. opencv之人脸识别

    最近在做一个类似于智能广告投放的项目,简单思路是利用opencv获取摄像头图像,然后调用接口或利用其他一些离线模型进行人脸属性识别,进而投放广告.本篇先简单介绍利用opecv进行人脸识别. # -*- ...

  10. Android自定义View（CustomCalendar－定制日历控件）

    转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeas ...