原文连接地址： 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. spring基本原理

    作者:王奕然链接:https://www.zhihu.com/question/21346206/answer/101789659来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...

  2. 阿里架构师带你深入浅出jvm

    本文跟大家聊聊JVM的内部结构,从组件中的多线程处理,JVM系统线程,局部变量数组等方面进行解析 JVM JVM = 类加载器(classloader) + 执行引擎(execution engine ...

  3. 使用gogs搭建git私有仓库

    搭建gogs 我的机器环境:centos 7 1.安装git yum install git   2.安装mysql gogs的数据存在mysql中,需要安装一个mysql来存数据,当然也有其他的选择 ...

  4. python中input()和raw_input()的区别

    两者均是python的内置函数,通过读取控制台的输入与用户实现交互.raw_input:将所有输入作为字符串看待,不管用户输入什么类型的都会转变成字符串.                   raw的 ...

  5. Protobuf3语法详解

    定义一个消息类型 先来看一个非常简单的例子.假设你想定义一个"搜索请求"的消息格式,每一个请求含有一个查询字符串.你感兴趣的查询结果所在的页数,以及每一页多少条查询结果.可以采用如 ...

  6. Spring完全基于Java配置和集成Junit单元测试

    要点: 配置继承WebApplicationInitializer的类作为启动类,相当于配置web.xml文件 使用@Configuration注解一个类,在类中的方式使用@Bean注解,则表名该方法 ...

  7. CentOS7: How to resolve curl#56 - "Recv failure: Connection reset by peer"

    Issue: When you execute Yum installation or update, you may encounter following error: Loaded plugin ...

  8. Bootstrap3 表格-基本表格

    为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 - 少量的内补(padding)和水平方向的分隔线.这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如 ...

  9. linux中probe函数传递参数的寻找（下）

    点击打开链接 linux中probe函数传递参数的寻找(下) 通过追寻driver的脚步,我们有了努力的方向:只有找到spi_bus_type的填充device即可,下面该从device去打通,当两个 ...

  10. Python 描述符 data 和 non-data 两种类型

    仅包含__get__的,是non-data descriptor, 如果实例__dict__包含同名变量, 则实例优先; 如果还包含__set__, 则是data descriptor, 优先于实例_ ...