html5调用摄像头实例-程序员宅基地

技术标签: html5  

最近在学习在做HTML5的项目,看了博客上html5调用摄像头拍照的文章,但各有瑕疵。于是自己查阅书籍写了一个demo,主要分三步,废话不多说上代码。

HTML代码部分:

<!--video用于显示媒体设备的视频流,自动播放-->   
<video  id="video" autoplay style="width: 480px;height: 320px"></video>
<!--拍照按钮-->
<div>
    <button id="capture">拍照</button>
</div>
<!--描绘video截图-->
<canvas id="canvas" width="480" height="320"></canvas>

接下来是js代码部分:

<script>  
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var capture = document.getElementById('capture');
    var context = canvas.getContext('2d');
    function getUserMediaToPhoto(constraints,success,error) {
        if(navigator.mediaDevices.getUserMedia){
            //最新标准API
            navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error);
        }else if (navigator.webkitGetUserMedia) {
            //webkit核心浏览器
            navigator.webkitGetUserMedia(constraints,success,error);
        }else if(navigator.mozGetUserMedia){
            //firefox浏览器
            navigator.mozGetUserMedia(constraints,success,error);
        }else if(navigator.getUserMedia){
            //旧版API
            navigator.getUserMedia(constraints,success,error);
        }
    }
    //成功回调函数
    function success(stream){
        //兼容webkit核心浏览器
        var CompatibleURL = window.URL || window.webkitURL;
        //将视频流转化为video的源
        video.src = CompatibleURL.createObjectURL(stream);
        video.play();//播放视频
    }
    function error(error) {
        console.log('访问用户媒体失败:',error.name,error.message);
    }
    if(navigator.mediaDevices.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.getUserMedia){
        getUserMediaToPhoto({video:{width:480,height:320}},success,error);
    }else{
        alert('你的浏览器不支持访问用户媒体设备');
    }
    capture.addEventListener('click',function() {
        // 将video画面描绘在canvas画布上
        context.drawImage(video,0,0,480,320);
    })
 </script>
值得注意的是:

使用的时候打开摄像头一定要上server上打开,否则没办法使用!因为打开的是属于网络的webcam,需要在server上打开。

目前好像chrome和opera还有大多数移动设备支持HTLM5打开摄像头,我这个是在chrome上测试成功的。

还有一点,如果没成功,很可能是你不小心关闭了chrome打开摄像头的权限,你重新启用权限就可以啦!

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/binquan_liang/article/details/79489989

智能推荐

Linux网络之配置DHCP中继2_ensp中cloud vmnet2-程序员宅基地

文章浏览阅读364次。文章目录Linux之DHCP中继一、实验步骤1、eNSP中创建几个设备2、Cloud1设置绑定VMnet33、连接各设置,并启动4、SW2配置5、SW1配置6、虚拟机配置连网后,安装DHCP的包7、网卡绑定VMnet38、修改网卡信息9、配置完成重启网卡,不成功就重启Linux10、目前拼自身的网卡是通的,其它网卡不通11、查看DHCP配置文件12、复制文件13、编辑配置文件14、关闭访火墙15、开启DHCP服务16、ping10网段和20网段拼通17、设置PC1和PC2为DHCP模式18、DHCP获取IP_ensp中cloud vmnet2

mysql学习思路总结_mysql的学习思路-程序员宅基地

文章浏览阅读3.2k次,点赞6次,收藏3次。相信大家已经读了笔者三篇单机存储到mysql的思考有什么感悟呢,希望大家发表一下,共同学习提高总结一下三篇思考笔者只是想引导大家学习导致表观现象的内部原理mysql底层:存储结构->索引优化mysql并发事务乐观锁悲观锁->隔离性、sql语句在不同隔离级别下执行的差异、当前读和快照读的差异mysql日志->持久性原子性、异常恢复以及主从架构..._mysql的学习思路

MapReduce---自定义分区类实现全排序_d)任务l:新建custompartitionandfullsortsorter对象,实现reduc-程序员宅基地

文章浏览阅读815次。排序是MapReduce的核心技术,排序分为部分排序,全排序和二次排序。部分排序:调用默认的HsshPartitioner,不需要操作,每个reduce聚合的key都是有序的。全排序:对reduce输出的所有的key实现排序 方法1:设置一个reducde 方法2:自定义分区类实现全排序下面以统计每年的最高气温为例进行示例:注_d)任务l:新建custompartitionandfullsortsorter对象,实现reduce输出结果的全排序

Qt4_使用Qt样式表_qt4定制表格-程序员宅基地

文章浏览阅读1.2k次。使用Qt样式表Qt的样式表主要是受到了CSS的启发,但同时也适用于窗口部件。样式表由影响窗口部件给制的样式规则组成。这些规则是普通文本。由于在运行时会解析样式表,所以可以通过制定样式表的方式来尝试设计不同的Qt应用程序:使用-stylesheet file.qss命令行参数、使用Qt设计师的样式表编辑器,或者在开发应用程序时嵌入一个QTextEdit。样式表作用于上层的当前激活的QStyle上(例如,QWindowsVistaStyle或者QPlastiqueStyle)。因为创建样式表不引入任何子类,_qt4定制表格

房价预测问题——神经网络的TensorFlow实现-程序员宅基地

文章浏览阅读584次。房价预测问题的tensorflow库直接实现,本来想输出r2,但是不太清楚怎么使用tensorflow直接输出r2,所以就用了lossimport tensorflow as tftf = tf.compat.v1tf.disable_v2_behavior()from sklearn.datasets import fetch_california_housingfrom sklearn.model_selection import train_test_splitfrom sklear.

递归中的引用传递和常引用传递-程序员宅基地

文章浏览阅读2.1k次,点赞5次,收藏10次。通过递归加深引用传递和常引用传递的区别,同时加深递归回溯的过程void process(string& str) { if (str.size() >= 5) { cout << str << ",return" << endl; return; } cout << str<<endl; str += ...

随便推点

SpringBoot配置及mybatis整合_springboot整合mybatis,不适用starter,自行配置-程序员宅基地

文章浏览阅读198次。一、Maven创建SpringBoot_springboot整合mybatis,不适用starter,自行配置

zoj 浙大ACM1005_浙江大学ac-程序员宅基地

文章浏览阅读529次。 额,这个题目其实以前就做过,当时感觉好复杂啊,所以就没有仔细想过。今天重新拾起久违的ACM,发现此题貌似当需要容量大于A罐容量时,只要沿着从B罐向A罐的方向一直进行,就会有最后的结果(小于A罐时方向相反)。终于明白,有些事,远没有你想想的那么复杂。。。。。 #include using namespace std;int main(){ int Ca,Cb,Cc,Ra,Rb; _浙江大学ac

vulhub漏洞复现-Tomcat_vulhub tomcat-程序员宅基地

文章浏览阅读3.2k次。TomcatTomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选思路我们首先要了解下Tomcat的下两个函数org.apache.jasper.servlet.JspServlet:默认处理jsp,jspx文件请求,不存在PUT上传逻辑,无法处理PUT请求org.apache.catalina.servlets.DefaultServlet:默认处理静态文件(除jsp,jspx之外_vulhub tomcat

Feign 和 OpenFeign 两者区别_fegion与openfegion区别-程序员宅基地

文章浏览阅读2.8w次,点赞20次,收藏48次。Feign 和 OpenFeign 两者区别:Feign是Springcloud组件中的一个轻量级Restful的HTTP服务客户端,Feign内置了Ribbon,用来做客户端负载均衡,去调用服务注册中心的服务。Feign的使用方式是:使用Feign的注解定义接口,调用这个接口,就可以调用服务注册中心的服务 <!--feign--> <dependency> <groupId>org.springframework.clo_fegion与openfegion区别

不正确退出会话后,怎么删除有问题会话(ora-01013)_01013:user-程序员宅基地

文章浏览阅读2.9k次。这是一个故事~~鄙人在玩pl/sql时候遇到了点小问题,我的操作在sqlplus上进行,如下SQL> set serveroutput on;DECLARE v_deptno emp.deptno%TYPE; v_increment NUMBER(4); v_empno emp.empno%type;BEGIN v_empno:=&x; SELECT deptno INTO_01013:user

推荐文章

热门文章

相关标签