文档章节

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

lotozhou
 lotozhou
发布于 2015/12/14 13:40
字数 739
阅读 71
收藏 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
苏州
程序员
私信 提问
手机上面的网页调用手机的摄像头

相关资料: 1、Web调用安卓,苹果手机摄像头,本地图片和文件:http://blog.csdn.net/jwzhangjie/article/details/40391537 2、http://ask.dcloud.net.cn/question/1268 3、Android中实现网页...

ake666
2016/05/23
2
0
手机网站-企业移动互联网推广新模式

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

yztxw
2018/06/26
0
0
HTML5 标准工程师

HTML5 标准工程师 你进行JavaScript 项目的时候,有否希望其浏览器给你更丰富的API?当你想用电脑的摄像头互动你需要使用Flash时,你是否感到沮丧?如果网络是一个平台,它必须让我们建立现时...

胡一刀
2010/11/13
968
7
HTML5(目前)无法帮你实现的五件事

一直以来,很多人都专注于HTML5能够实现什么(或者是如何将各种方法连接起来,实现一个更加优雅的解决方案)。而现在,也不少人想将目光投向那些HTML5无法实现的事情。MSDN上微软员工thebeeb...

虫虫
2011/12/12
3.8K
22
基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

日期:2012-12-10 来源:GBin1.com 在线演示 WebRTC可能是明年最受关注的HTML5标准了,Mozilla为此开发了一套帮助你控制硬件的API,例如,摄像头,麦克风,或者是加速表。你可以不依赖其它的...

gbin1
2012/12/12
3.4K
2

没有更多内容

加载失败,请刷新页面

加载更多

CentOS7 yum 安装git

CentOS7 yum 安装git 1.查看系统是否已经安装git 1 git --version 2.CentOS7 yum 安装git 1 yum install -y git 3.安装成功 4.卸载git 1 yum remove git  ...

linjin200
33分钟前
1
0
vue页面闪现源码的处理方法

1.添加样式 <style type="text/css"> [v-cloak] { display: none; } </style> 2.在app id上添加v-cloak指令 <div class="wrapper wrapper-content " id="app" v-cloak>......

qiang123
37分钟前
2
0
Hyperledger Fabric 实战(十二): Fabric 源码本地调试

借助开发网络调试 fabric 源码本地调试 准备工作 IDE Goland Go 1.9.7 fabric-samples 模块 chaincode-docker-devmode fabric 源码 步骤 添加本地域名 127.0.0.1 peer 127.0.0.1 orderer 用 ...

Jonluo
38分钟前
1
0
自然语言处理hanlp的入门基础

此文整理的基础是建立在hanlp较早版本的基础上的,虽然hanlp的最新1.7版本已经发布,但对于入门来说差别不大!分享一篇比较早的“旧文”给需要的朋友! 安装HanLP HanLP将数据与程序分离,给...

左手的倒影
40分钟前
1
0
KaliLinuxNetHunter教程实施刷机解锁Bootloader

KaliLinuxNetHunter教程实施刷机解锁Bootloader 当用户将前面的工作都准备完成后,即可开始刷机。其中,整个刷机过程分为三个步骤,分别是解锁Bootloader、刷入第三方Recovery和实施刷机。为...

大学霸
41分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部