原文连接地址： 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. break 与 continue

    1.break ①只有一层循环时,作用是跳出循环语句,执行后面的代码. ②break存在于循环嵌套的内层循环时,只能跳出内层循环,如果想要跳出外层循环,需要对外层循环添加标记. 2.continue ...

  2. github windows pycharm 设置

    Window 上pycharm数据上传到github 在window上操作 1),安装git(百度) 进入git , bin目录执行 git-bash.exe 1)  gengyantao@DESKT ...

  3. delphi 线程教学第五节：多个线程同时执行相同的任务

    第五节:多个线程同时执行相同的任务   1.锁   设,有一个房间 X ,X为全局变量,它有两个函数  X.Lock 与 X.UnLock; 有如下代码:   X.Lock;      访问资源 P; ...

  4. 使用FFMPEG在windows平台下推rtmp流

    使用FFMPEG在windows平台下推rtmp流 工作中习惯在Linux下面使用FFmpeg模拟推rtmp流,无奈家中的电脑都是windows系统,需要利用家中的带宽来测试流媒体服务器的性能.所以研 ...

  5. ACM Curling 2.0

    在行星MM-21上,今年奥运会之后,冰壶(curling)越来越受欢迎.  但规则与我们有所不同. 该游戏是在冰盘上进行的,在冰棋盘上标有方形网格.他们只用一块石头. 游戏的目的是以最少的动作( th ...

  6. 实体类双向映射进行Json序列化时出现无限循环的解决问题

    1.@JsonIgnoreProperties 指定的字段不会被序列化,如下则ExamPaper的directory字段不会被序列化 @OneToMany(mappedBy = "direc ...

  7. Android开发技巧——设置系统状态栏颜色

    开门见山,先来三张效果图: 然后我们再来讲如何实现以及如何快速地实现. 如何实现 实现设置系统状态栏颜色需要至少在Android 4.4.2(API 19)以上.这是因为,在这个版本以下,没有任何的A ...

  8. Linux SWAP 交换分区配置说明

    一．SWAP 说明1.1 SWAP 概述        当系统的物理内存不够用的时候,就需要将物理内存中的一部分空间释放出来,以供当前运行的程序使用.那些被释放的空间可能来自一些很长时间没有什么操作的 ...

  9. Programming In Scala笔记-第十五章、Case Classes和模式匹配

    本章主要分析case classes和模式匹配(pattern matching). 一.简单例子 接下来首先以一个包含case classes和模式匹配的例子来展开本章内容. 下面的例子中将模拟实现 ...

  10. 【SSH系列】静态代理&&动态代理

    从设计模式说起 代理模式是二十三中设计模式中的一种,代理模式就是指由一个代理主题来操作真实的主题,真实的主题执行具体的业务操作,而代理主题负责其她相关业务,简而言之,代理模式可以由以下三个部分组成: ...