文档章节

使用HTML5技术控制电脑或手机上的摄像头

lotozhou
 lotozhou
发布于 2015/12/14 13:40
字数 739
阅读 70
收藏 8

移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API,但慢慢的,这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API,它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头,并提取截屏图形。

HTML代码

下面的代码里我写了一部分注释,请阅读:

<!--
	理想情况下我们应该先判断你的设备上是否
	有摄像头或相机,但简单起见,我们在这里直接
	写出了HTML标记,而不是用JavaScript先判断
	然后动态生成这些标记
-->
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>

在写出上面这些标记前应该判断用户的客户端是否有摄像头支持,但这里为了不那么麻烦,这里直接写出了这些HTML标记,需要注意的是我们这里使用的长宽是640×480。

JavaScript代码

因为我们是手工写出的HTML,所以下面的js代码会比你想象的要简单了很多。

// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
	// Grab elements, create settings, etc.
	var canvas = document.getElementById("canvas"),
		context = canvas.getContext("2d"),
		video = document.getElementById("video"),
		videoObj = { "video": true },
		errBack = function(error) {
			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);
	}
	else if(navigator.mozGetUserMedia) { // Firefox-prefixed
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
}, false);

一旦判断出用户浏览器支持getUserMedia ,下面就非常简单了,只需要将那个video元素的src设置为用户的摄像头视频直播连接。这就是用浏览器访问摄像头需要做的所有的事情!

拍照的功能只能说是稍微复杂一点点。我们在按钮上加入一个监听器,将视频画面画到画布上。

// 触发拍照动作
document.getElementById("snap")
       .addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

当然,你还可以在图片上加一些滤镜效果….我还是把这些技术放到以后的文章里再说吧。但至少你可以将这个画布图像转换成一张图片。

以前我们需要使用第三方的插件才能从浏览器里访问用户的摄像头,这不免有些复杂。现在只需要HTML5的画布技术和javaScript,我们就能简单快速的操作用户的摄像头。不仅仅还是访问摄像头,而且是因为HTML5的画布技术及其强大,我们可以给图片上加入各种迷人的滤镜效果。现在,在浏览器里用自己的摄像头给自己拍张照片吧!



© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
手机网站-企业移动互联网推广新模式

做为公司网络部的负责人,我一直重视网络营销及推广。在公司过去五年从事网络推广经历中,学到很多东西也取得了一定的成绩。每一个中小企业都希望花最少的钱带来最好的推广效果,所以作为企业...

yztxw
06/26
0
0
HTML5定稿了,为什么原生App世界将被颠覆

2007年W3C(万维网联盟)立项HTML5,直至2014年10月底,这个长达八年的规范终于正式封稿。 过去这些年,HTML5颠覆了PC互联网的格局,优化了移动互联网的体验,接下来,HTML5将颠覆原生App世界...

程序袁_绪龙
2015/01/05
0
0
扣丁学堂HTML5培训课程怎么样

  在如今,随着移动互联网技术的发展和进步,比如HTML5在移动互联端的应用,让更多人了解到它的丰富性趣味性便利性,但HTML5就包括这些么?扣丁学堂HTML5培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
关于“HTML5 的未来 - HTML5 还能走多远”一文的一些看法

关于“HTML5 的未来 - HTML5 还能走多远”一文的一些看法   读了“HTML5 的未来 - HTML5 还能走多远”一文,觉得有些观点有失偏颇,可能会误导很多人,造成很多错误理解,必须纠正一些错误...

gaowenli
2013/02/04
0
0
手机版网站起码要实现一些基本的功能

手机版网站起码要实现一些基本的功能吧: 1.页面的适用性问题。对于移动终端,有不一样的分辨率与屏幕尺寸,如果还像电脑端的设计还限制网页的宽度为1003px或其他像素值,字体大小 还用12px或...

roockee
2014/04/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

自定义Maven插件功能

自定义maven插件 创建一个maven 项目 通过上述方式创建,会自动引入maven-plugin-api 依赖和打包方式;如下 <packaging>maven-plugin</packaging><dependency> <groupId>org.apache.mave......

春哥大魔王的博客
29分钟前
2
0
和平之翼代码生成器SMEU版5.0-7.0项目代号初稿兼征求意见

现在,和平之翼代码生成器SMEU 4.0 宝船 Treasure Ship已经开始研发。是规划下一代代码生成器项目代号和功能清单的时候了。 宝船: 这是我初步的计划,欢迎您的意见: 和平之翼SMEU 5.0 福船...

火箭船
40分钟前
1
0
0016-Avro序列化&反序列化和Spark读取Avro数据

1.简介 本篇文章主要讲如何使用java生成Avro格式数据以及如何通过spark将Avro数据文件转换成DataSet和DataFrame进行操作。 1.1Apache Arvo是什么? Apache Avro 是一个数据序列化系统,Avro提...

Hadoop实操
51分钟前
1
0
访问日志不记录静态文件、切割和静态元素过期时间

11月16日任务 11.22 访问日志不记录静态文件 11.23 访问日志切割 11.24 静态元素过期时间 1. 访问日志不记录静态文件 示例一: 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用...

hhpuppy
57分钟前
2
0
day151-2018-11-18-英语流利阅读-待学习

后双十一时代阿里将何去何从? Daniel 2018-11-18 1.今日导读 “这么便宜,我要买下来,统统都要买下来!” 这个双十一,你剁手了吗?据说阿里巴巴天猫在刚过去的双十一里单日销售额再创新高...

飞鱼说编程
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部