原文连接地址： 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. PostgreSQL 查看单表大小

    1. 在数据库中查单个表 select pg_size_pretty(pg_relation_size('table_name')); 2. 查出并按大小排序 SELECT table_schema ...

  2. Spring中整合Cage，实现验证码功能

    1.pom.xml中添加Cage依赖. <dependency> <groupId>com.github.cage</groupId> <artifactId ...

  3. Java自定义注解的实现

    Java自定义注解的实现,总共三步(eg.@RandomlyThrowsException): 1.首先编写一个自定义注解@RandomlyThrowsException package com.gi ...

  4. Redis数据库之概念与创建服务

      概念                                  Remote   Dictionary  Server key-value  数据库存储系统,数据结构服务器. 键是Stri ...

  5. 初识Redis系列之三：Redis支持的数据类型及使用

    支持的数据类型有五种: string(字符串).hash(哈希).list(列表).set(集合)及zset(sorted set:有序集合): 下面分别对这几种类型进行简单的Redis存取操作 1: ...

  6. python笔记十四（高阶函数——map/reduce、filter、sorted）

    一.map/reduce 1.map() map(f,iterable),将一个iterable对象一次作用于函数f,并返回一个迭代器. >>> def f(x): #定义一个函数 ...

  7. LintCode题解之比较字符串

    使用标记的方式,先遍历一遍B,出现一次就记录一次出现次数,然后遍历A,将记录的B的出现次数消去,最后检查一下记录的标记位是不是都消去了,总共需要检查三次,即进行三次O(n)的遍历. 然后总结出规律如果 ...

  8. ACM Ignatius and the Princess I

    公主被BEelzebub feng5166绑架,我们的英雄Ignatius必须拯救我们美丽的公主. 现在他进入feng5166的城堡.城堡是一个大迷宫.为简单起见,( To make the prob ...

  9. 粗浅看Struts2和Hibernate框架

    ----------------------------------------------------------------------------------------------[版权申明: ...

  10. sublime text package control 被墙的解决办法

    似乎没有办法 只能碰运气, 时好时坏. 或者手动安装 趁着好的时候, 下载离线包 https://packagecontrol.io/Package%20Control.sublime-package ...