文档章节

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

lotozhou
 lotozhou
发布于 2015/12/14 13:40
字数 739
阅读 68
收藏 8
点赞 0
评论 0

移动设备和桌面电脑上的客户端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
粉丝 8
博文 51
码字总数 51524
作品 0
苏州
程序员
手机网站-企业移动互联网推广新模式

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

yztxw
06/26
0
0
扣丁学堂HTML5培训课程怎么样

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

扣丁学堂
06/01
0
0
HTML5定稿了,为什么原生App世界将被颠覆

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

程序袁_绪龙
2015/01/05
0
0
关于“HTML5 的未来 - HTML5 还能走多远”一文的一些看法

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

gaowenli
2013/02/04
0
0
WEB前端开发学习HTML5到底有多厉害?

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
05/23
0
0
手机版网站起码要实现一些基本的功能

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

roockee
2014/04/03
0
0
面向移动设备的HTML5开发框架梳理

很久以前整理了篇将手机网站做成手机应用的JS框架。时隔一年多,很多新的技术已经出现,下面再来总结下还有哪些框架是适合面向手机设备的开发的。 1、jQuery Mobile jQuery Mobile 是 jQuery...

凯文加内特
2015/01/26
0
0
基于HT for Web的Web SCADA工控移动应用

在电力、油田燃气、供水管网等工业自动化领域Web SCADA的概念已经提出了多年,早先年的Web SCADA前端技术大部分还是基于Flex、Silverlight甚至Applet这样的重客户端方案,在HTML5流行前VML和...

xhload3d
2015/03/18
0
2
HTML5定稿一周年,你必须要重新认识HTML5了

作者简介:王安,DCloud CEO,HTML5产业专家,W3C会员。 去年此时,W3C定稿了HTML5。我曾发表一篇文章《HTML 5终于定稿,为什么原生App世界将被颠覆》,这文章转载量很大,它阐述了HTML5的来...

SomaLihq
06/27
0
0
HTML5从入门到精通,零基础学员必看

学习html5从入门到精通,零基础新手也能看懂,无论你是唱歌,画画的艺术生,还是学习机械专业的工科生,或者大学读的文学学科。先了解HTML5可以实现的功能有哪儿些? 1. HTML5可以同时在多种...

课工场CC老师
2017/11/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

大数据教程(2.13):keepalived+nginx(多主多活)高可用集群搭建教程【自动化脚本】

上一章节博主为大家介绍了目前大型互联网项目的keepalived+nginx(主备)高可用系统架构体系,相信大家应该看了博主的文章对keepalived/nginx技术已经有一定的了解,在本节博主将为大家分享k...

em_aaron
1分钟前
0
0
Git 2.18版本发布:支持Git协议v2,提升性能

在最新的官方 Git 客户端正式版2.18中添加了对 Git wire 协议 v2 的支持,并引入了一些性能与 UI 改进的新特性。在 Git 的核心团队成员 Brandon Williams 公开宣布这一消息前几周,Git 协议 ...

六库科技
6分钟前
0
0
Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
43分钟前
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
54分钟前
2
0
将博客搬至CSDN

AHUSKY
今天
1
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
5
0
Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
今天
1
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
今天
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部