文档章节

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

UIkitAPP
 UIkitAPP
发布于 2015/04/06 10:51
字数 506
阅读 196
收藏 2
点赞 0
评论 0

最近写了一个上传头像的功能,主要是使用了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 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培训课程怎么样?零基础能学会么?...

扣丁学堂
06/01
0
0
HTML5 视频转换软件 Freemake Video Converter

HTML5的Video标签可以说算是HTML5的重头戏,各大浏览器都纷纷响应,现代浏览器都能支持Video标签,基于Video标签的播放器也越来越多,但问题是每个浏览器所支持的视频格式不同,想在各大浏览...

海纳百川
2013/01/14
0
1
28个你必须知道的HTML5的新特性,技巧以及技术

原文:http://net.tutsplus.com/tutorials/html-css-techniques/25-html5-features-tips-and-techniques-you-must-know/ 译文来自:http://adamlu.com/?p=584 总结一下: 1. 新的Doctype 尽管......

山哥
2012/05/10
0
0
惊艳!9个不可思议的 HTML5 Canvas 应用试验

HTML5 Video Destruction 这是一个真正抢眼的 Canvas 演示,我必须顶礼膜拜。你会看到一个可扩展的画布视频,点击视频片爆炸,但视频爆炸过程中继续播放,并能够自动回到其原来的位置。这是一...

颖辉小居
2017/10/19
0
0
12个用于播放音乐和视频文件的jQuery插件

也许有时你需要在网站上播放一些音频和视频文件,也许你正在建立一个在线社区需要有分享和播放音乐和视频的功能。下面介绍的这些免费jQuery插件也许有你需要的。 1. Acorn Media Player Acor...

V
2011/07/10
0
0
iPhone、iPad 如何播放网页调用优酷视频?

iPhone、iPad 如何播放网页调用优酷视频? 5 条评论 分享 按投票排序按时间排序 6 个回答 赞同4反对,不会显示你的姓名 寒塘渡月,借我一生 与梦私奔 http://sometime.me 陶铖、知乎用户、范红...

嘻哈开发者
2015/03/06
0
0
给网页设计师的30个HTML5学习资源

早在几个星期前,Adobe就发布了Dreamweaver CS5 HTML5 Pack的预览版下载。众所周知,HTML5在互联网领域掀起了一场大论战,并让Adobe的日子很难熬。HTML5致力于为前端开发提供全面的标记语 言...

晨曦之光
2012/03/09
0
0
HTML4与HTML5之间的10个本质区别

HTML5是目前最新的HTML规范,每一个web开发人员将会发现自己需要使用这项新的标准工作。而且,其中很多人会发现,由于HTML4与HTML5之间的区别,新建一个HTML5的网站远比从HTML4往HTML5上迁移...

晨曦之光
2012/03/09
0
0
[翻译] 通过WebRTC技术实现点对点通信

通过WebRTC技术实现点对点通信 WebRTC是一个实验性技术。 因为该技术的规格还没有稳定下来,在各浏览器中必须通过检查属性表的前缀来正确使用,例如:在Chrome中使用 webkitRTCPeerConnectio...

yunfound
2014/03/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

idea tomcat 远程调试

tomcat 配置 编辑文件${tomcat_home}/bin/catalina.sh,在文件开头添加如下代码。    CATALINA_OPTS="-Xdebug -Xrunjdwp:transport=dt_socket,server=y,suspend=n,address=7829" Idea端配......

qwfys
今天
1
0
遍历目录下的文件每250M打包一个文件

#!/usr/bin/env python # -*- utf-8 -*- # @Time : 2018/7/20 0020 下午 10:16 # @Author : 陈元 # @Email : abcmeabc@163.com # @file : tarFile.py import os import tarfile import thr......

寻爱的小草
今天
1
0
expect同步文件&expect指定host和要同步的文件&构建文件分发系统&批量远程执行命令

20.31 expect脚本同步文件 expect通过与rsync结合,可以在一台机器上把文件自动同步到多台机器上 编写脚本 [root@linux-5 ~]# cd /usr/local/sbin[root@linux-5 sbin]# vim 4.expect#!/...

影夜Linux
今天
0
0
SpringBoot | 第九章:Mybatis-plus的集成和使用

前言 本章节开始介绍数据访问方面的相关知识点。对于后端开发者而言,和数据库打交道是每天都在进行的,所以一个好用的ORM框架是很有必要的。目前,绝大部分公司都选择MyBatis框架作为底层数...

oKong
今天
12
0
win10 上安装解压版mysql

1.效果 2. 下载MySQL 压缩版 下载地址: https://downloads.mysql.com/archives/community/ 3. 配置 3.1 将下载的文件解压到合适的位置 我最终将myql文件 放在:D:\develop\mysql 最终放的位...

Lucky_Me
今天
1
0
linux服务器修改mtu值优化cpu

一、jumbo frames 相关 1、什么是jumbo frames Jumbo frames 是指比标准Ethernet Frames长的frame,即比1518/1522 bit大的frames,Jumbo frame的大小是每个设备厂商规定的,不属于IEEE标准;...

问题终结者
今天
1
0
expect脚本同步文件expect脚本指定host和要同步的文件 构建文件分发系统批量远程执行命令

expect脚本同步文件 在一台机器上把文件同步到多台机器上 自动同步文件 vim 4.expect [root@yong-01 sbin]# vim 4.expect#!/usr/bin/expectset passwd "20655739"spawn rsync -av ro...

lyy549745
今天
1
0
36.rsync下 日志 screen

10.32/10.33 rsync通过服务同步 10.34 linux系统日志 10.35 screen工具 10.32/10.33 rsync通过服务同步: rsync还可以通过服务的方式同步。那需要开启一个服务,他的架构是cs架构,客户端服务...

王鑫linux
今天
0
0
matplotlib 保存图片时的参数

简单绘图 import matplotlib.pyplot as pltplt.plot(range(10)) 保存为csv格式,放大后依然很清晰 plt.savefig('t1.svg') 普通保存放大后会有点模糊文件大小20多k plt.savefig('t5.p...

阿豪boy
今天
3
0
java 8 复合Lambda 表达式

comparator 比较器复合 //排序Comparator.comparing(Apple::getWeight);List<Apple> list = Stream.of(new Apple(1, "a"), new Apple(2, "b"), new Apple(3, "c")) .collect(......

Canaan_
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部