文档章节

HTML5 Camera(摄像头) 和 Video(视频)控制

UIkitAPP
 UIkitAPP
发布于 2015/04/06 10:51
字数 506
阅读 216
收藏 2

最近写了一个上传头像的功能,主要是使用了HTML5的方法来开发.主要从两个方面处理.一是通过input文件控件,二是通过摄像头,今天我们主要是从摄像头来处理.那我们开始怎么从浏览器中获取摄像头的操作.

首先我们先编写HTML代码

<video id="video" width="640" height="480" autoplay></video>
<button id="snap">拍照</button>
<canvas id="canvas" width="640" height="480"></canvas>

首要确认下你的浏览器是否支持video和canvas,否则是不支持这个功能的,我们创建了一个640x480的视频和画板.

下面我们加入javascript代码来控制video

window.addEventListener("DOMContentLoaded", function() {	// 获取基本的元素,设置.
	var canvas = document.getElementById("canvas");	
        var context = canvas.getContext("2d");	
        var video = document.getElementById("video");	
        var videoObj = { "video": true };	
        var errBack = function(error) {		
            console.log("Video capture error: ", error.code); 
	};	// 获取摄像头的方式
	if(navigator.getUserMedia) { // 标准
		navigator.getUserMedia(videoObj, function(stream) {
			video.src = stream;
			video.play();
		}, errBack);
	} else if(navigator.webkitGetUserMedia) { // WebKit浏览器
		navigator.webkitGetUserMedia(videoObj, function(stream){
			video.src = window.webkitURL.createObjectURL(stream);
			video.play();
		}, errBack);
	}	else if(navigator.mozGetUserMedia) { // Firefox浏览器
		navigator.mozGetUserMedia(videoObj, function(stream){
			video.src = window.URL.createObjectURL(stream);
			video.play();
		}, errBack);
	}
}, false);

现在的浏览器获取摄像头流的方式是不一样的,因为之前没有统一的标准,浏览器商使用各自处理方式,所以我们获取相关元素后,做相关的处理.

其实在这里,浏览器会提示你是否允许或拒绝使用摄像头,点允许就可以显示到页面上了,否则就不可以.

下面我们对摄像头进行拍照,给拍照按钮,加入事件

document.getElementById("snap").addEventListener("click", function() {
	context.drawImage(video, 0, 0, 640, 480);
});

也就是将数据放入到画板中,这样就显示了拍照的图片了.通过画板获取图片的64位数据,然后通过这个数据进行上传功能.拍照和上传头像就可以完成了

本文属于吴统威的博客原创文章,转载时请注明出处及相应链接:http://www.wutongwei.com/front/infor_showone.tweb?id=103


本文转载自:http://www.wutongwei.com/front/infor_showone.tweb?id=103

共有 人打赏支持
UIkitAPP
粉丝 2
博文 19
码字总数 8218
作品 0
深圳
程序员
私信 提问
如何使用HTML5实现拍照上传应用

在HTML5规范的支持下,WebApp在手机上拍照已经成为可能。在下面,我将讲解Web App如何用手机进行拍照,显示在页面上并上传到服务器。 1、 视频流 HTML5 The Media Capture API提供了对摄像头...

彭博
2012/04/12
1K
0
HTML5在线摄像头应用

最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制。在线摄像头嘛,就那两种实现的方式:cab或者flash。 暂且不论本人从没学过的flash(事实上我已经做了一个f...

长平狐
2012/06/08
347
0
HTML5 Video/Canvas拍照初级

通过HTML5 Video和Canvas实现拍照的功能,功能很简单;另外,因为用到了getUserMedia()函数,目前只能在Chrome和Opera里使用,详见:Can I use getUserMedia/Stream API? 演示地址:HTML5 W...

Xiaopeng
2012/10/30
0
1
扣丁学堂HTML5培训课程怎么样

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

扣丁学堂
2018/06/01
0
0
HTML 5 Video 的未来

HTML5 video的世界里,将来会发生什么?Opera公司的Bruce Lawson为您揭示那些即将上架的新鲜货,并指导您如何把这些新特性应用到您的站点上。 这篇文章最早是在.net杂志的issue 224上刊登 HT...

oschina
2012/08/06
5.7K
9

没有更多内容

加载失败,请刷新页面

加载更多

计算游戏权重代码

$list = [ [ 'pt' => 1, //权重序号 'pv' => 0, //权重值 ], [ 'pt' => 2, 'pv' => 10, ], [ 'pt' => 3, ......

我才是张先生
13分钟前
5
0
智能分单算法

算法描述 目前在物流,企业用工等领域,都有着大量的通过算法对接到的订单进行智能分配的需求。本文模拟的是用户下订单,然后商家接到订单,由配送人员进行派送的场景。在实际的应用中类似于...

鱼煎
15分钟前
0
0
即将开源 | 2亿用户背后的Flutter应用框架Fish Redux

背景 在闲鱼深度使用 Flutter 开发过程中,我们遇到了业务代码耦合严重,代码可维护性糟糕,如入泥泞。对于闲鱼这样的负责业务场景,我们需要一个统一的应用框架来摆脱当下的开发困境,而这也...

阿里云云栖社区
20分钟前
0
0
Ubuntu上搭建比特币运行环境

Ubuntu版本:16.04.3 Bitcoin Core版本:0.16 1. 比特币运行依赖的开源库 (1)必须依赖的库 库 目的 描述 libssl 加密 随机数生成,椭圆曲线加密算法 libboost 工具 线程库,数据结构等 li...

LoSingSang
25分钟前
1
0
IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

zhaowei121
30分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部