原文连接地址： 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. Java自定义注解的实现

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

  2. node之子线程child_process模块

    node.js是基于单线程模型架构,这样的设计可以带来高效的CPU利用率,但是无法却利用多个核心的CPU,为了解决这个问题,node.js提供了child_process模块,用于新建子进程,子进程的 ...

  3. linux下的静态库与动态库详解

    静态库 先说说我们为什么需要库? 当有些代码我们大量会在程序中使用比如(scanf,printf等)这些函数我们需要在程序中频繁使用,于是我们就把这些代码编译为库文件,在需要使用时我们直接链接即可. ...

  4. ACM 悼念512汶川大地震遇难同胞——珍惜现在，感恩生活

    Problem Description 急!灾区的食物依然短缺!为了挽救灾区同胞的生命,心系灾区同胞的你准备自己采购一些粮食支援灾区,现在假设你一共有资金n元,而市场有m种大米,每种大米都是袋装产品, ...

  5. Dockerfile怎么创建镜像

    编写完成 Dockerfile 之后,可以通过 docker build 命令来创建镜像. 基本的格式为 docker build [选项] 路径,该命令将读取指定路径下(包括子目录)的 Docker ...

  6. Java语言程序设计-助教篇

    1. 给第一次上课(软件工程)的老师与助教 现代软件工程讲义 0 课程概述 给学生:看里面的第0个作业要求 2. 助教心得 美国视界(1):第一流的本科课堂该是什么样?(看里面的助教部分) 助教工作看 ...

  7. 【事务】<查询不到同一调用方法其它事务提交的更新>解决方案

    最近遇到一个很棘手的问题,至今也解释不清楚原因,不过已经找到了解决方案. 先来看看Propagation属性的值含义,@Transactional中Propagation属性有7个选项可供选择: Pr ...

  8. Gradle 1.12用户指南翻译——第四十七章. Build Init 插件

    本文由CSDN博客貌似掉线翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...

  9. Mybatis 批量插入、批量更新

            合理的使用批量插入.更新对性能优化有很大的作用,速度明显快了N倍.         要注意数据库连接串后面要新增:&allowMultiQueries=true,表示一个sql ...

  10. log4j日志记录级别是如何工作？

    级别p的级别使用q,在记录日志请求时,如果p>=q启用.这条规则是log4j的核心.它假设级别是有序的.对于标准级别它们关系如下:ALL < DEBUG < INFO < WA ...