文档章节

HTML5调用摄像头实例

尼阿卡
 尼阿卡
发布于 2016/04/05 17:24
字数 394
阅读 1381
收藏 4

HTML布局:

   该布局比较简陋,video标签主要是用来实时显示摄像头画面的,canvas则是点击拍照后显示的某一瞬间的画面

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

js实现:

<script type="text/javascript">	
        //为window对象扩展addEventListener方法
	window.addEventListener("DOMContentLoaded", function() {  
	    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);   
	        };  
		  
	    // 解决兼容性问题 
	    if(navigator.getUserMedia) { // edge,IE  
	    	//alert("支持navigator.getUserMedia");
	        navigator.getUserMedia(videoObj, function(stream) {  
	            video.src = stream;  
	            video.play();  
	        }, errBack);  
	    } else if(navigator.webkitGetUserMedia) { // chrome 
	    	//alert("支持navigator.webkitGetUserMedia");
	        navigator.webkitGetUserMedia(videoObj, function(stream){  
	            video.src = window.webkitURL.createObjectURL(stream);  
	            video.play();  
	        }, errBack);  
	    }  
	    else if(navigator.mozGetUserMedia) { // Firefox 
	    	//alert("支持navigator.mozGetUserMedia");
	        navigator.mozGetUserMedia(videoObj, function(stream){  
	            video.src = window.URL.createObjectURL(stream);  
	            video.play();  
	        }, errBack);  
	    }  
	    // 触发拍照动作  
	    document.getElementById("snap").addEventListener("click", function() {  
		 context.drawImage(video, 0, 0, 640, 480);  
	    }); 

	}, false);   
</script>

注意事项:不同浏览器下正确打开方式

    1.谷歌浏览器下直接打开文件绝对地址无法实现调用摄像头,要放在apache服务器文件中才能打开(windows 下安装wampserver)?

    2.火狐浏览器可以直接打开,也可以在apache下打开

    3.win10的edge浏览器不管是直接打开还是在apache下都无法调用摄像头,会出现闪退的情况

    4.最后惊喜的发现chrome和firefox所得的图片都是反的!!!

© 著作权归作者所有

尼阿卡
粉丝 3
博文 24
码字总数 8902
作品 0
珠海
程序员
私信 提问
基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

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

gbin1
2012/12/12
3.5K
2
HTML5在线摄像头应用

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

长平狐
2012/06/08
433
0
基于HTML5实现的超酷摄像头(HTML5 webcam)拍照功能 - photobooth.js

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

gbin1
2012/12/10
7
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
4
0
HTML5(目前)无法帮你实现的五件事

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

虫虫
2011/12/12
3.9K
22

没有更多内容

加载失败,请刷新页面

加载更多

Kylin构建Cube过程详解

1 前言 在使用Kylin的时候,最重要的一步就是创建cube的模型定义,即指定度量和维度以及一些附加信息,然后对cube进行build,当然我们也可以根据原始表中的某一个string字段(这个字段的格式...

大数据技术进阶
19分钟前
4
0
Git保存密码

保存密码 $ git config --global credential.helper store 参数 --global 设置全局,如果用 --local 则只设置当前库 要注意保存时是用明文保存的,所以不要在公用电脑使用...

编程老陆
21分钟前
4
0
ofcms 说明文档

一、模板说明 项目概述 java 版CMS系统、基于java技术研发的内容管理系统、功能:栏目模板自定义、内容模型自定义、多个站点管理、在线模板页面编辑等功能、代码完全开源、MIT授权协议。 技术...

kuchawyz
28分钟前
4
0
理解CSS相对定位和固定定位

本文转载于:专业的前端网站➦理解CSS相对定位和固定定位 前面的话   一般地,说起定位元素是指position不为static的元素,包括relative、absolute和fixed。前面已经详细介绍过absolute绝对...

前端老手
38分钟前
4
0
iOS Xcode升级包地址(感谢大神)

下载地址:DeviceSupport

_____1____
52分钟前
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部