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

智能推荐

koa如何进行token设置和进行token过期验证_koa token-程序员宅基地

文章浏览阅读1.4k次。koa如何进行token设置和进行token过期验证_koa token

DPDK中文编程指南_dpdk编程指南-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏15次。编程指南1. 简介 1.1. 文档地图 1.2. 相关刊物 2. 概述 2.1. 开发环境 2.2. 环境适配层EAL 2.3. 核心组件 2.3.1. 环形缓冲区管理(librte_ring) 2.3.2. 内存池管理(librte_mempool) 2.3.3. 网络报文缓冲区管理(librte_mbuf) 2.3.4. 定时器管理(librte_timer) 2.4. 以太网轮询驱动架构 2.5. 报文转发算法支持 2.6. 网络协议_dpdk编程指南

CSI300 ARIMA模型走势分析源程序_可能遇到了收斂问题:optim信息code=1-程序员宅基地

文章浏览阅读2.3k次。R语言CSI数据的ARIMA模型建立过程。有ARIMA模型调整的方法。_可能遇到了收斂问题:optim信息code=1

linux sudo 命令详解_sudo hraddr=-程序员宅基地

文章浏览阅读2.1k次。“Sudo”是Unix/Linux平台上的一个非常有用的工具,它允许系统管理员分配给普通用户一些合理的“权利”,让他们执行一些只有超级用户或其他 特许用户才能完成的任务,比如:运行一些像mount,halt,su之类的命令,或者编辑一些系统配置文件,像/etc/mtab,/etc /samba/smb.conf等。这样以来,就不仅减少了root用户的登陆次数和管理时间,也提高了系统安全性。_sudo hraddr=

win7安装python3.7_解决win7操作系统Python3.7.1安装后启动提示缺少.dll文件问题-程序员宅基地

文章浏览阅读95次。错误提示图片首先,我的操作系统是win7旗舰版,安装Python3.7.1之后启动时,提示如图错误,网上比较多的是两种处理方法:(1)安装Windows补丁程序(2)安装VC redit.exe第一种方案我这边下载了KB3118401、KB2999226,但是双击安装的时候安装不了;第二种方案大家都推荐的是安装v++2015,也安装成功了,但是安装后仍然报错。然后看着网上的推荐时间都比较早,我这边..._win7 python 3.86提示缺少.dll

Oracle学习(1)-程序员宅基地

文章浏览阅读122次。1、 数据库的简介英文DabaBase,是一种软件产品,用于存储数据,管理数据的存储仓库(容器)。把数据库理解为U盘。U盘或者硬盘是实物,数据库是软件产品。Java语言的应用领域(1) 桌面级程序应用开发Client客户端-架构 Client/Server服务器-架构的程序(2)互联网程序应用开发Browser浏览器/Server服务器-架构的程序淘宝网页 www.tao...

随便推点

贝壳钱包sig分析_pws/8.3.1.0.8-程序员宅基地

文章浏览阅读1.3k次。15951088268 147852lj18031529044----18031529044.. 随便输了条帐号,分析登陆sig===========================================POST https://api.account.meitu.com/oauth/access_token.json HTTP/1.1Unlogin-Tok..._pws/8.3.1.0.8

YOLOV5 训练自己的数据集_torchvision0.9.2-程序员宅基地

文章浏览阅读688次。1.环境Ubuntu 20.04显卡驱动 470.74CUDA 11.5查看Ubuntu版本号cat /proc/version查看显卡驱动版本nvidia-smi查看CUDA版本nvcc --version2.代码模型下载下载模型git clone https://github.com/ultralytics/yolov5下载预训练模型建议在模型文件夹下新建一个weights,放置下载的预训练模型权重..._torchvision0.9.2

支持串口上传图片和数据到服务器的4G低功耗摄像头方案_串口摄像头接入平台-程序员宅基地

文章浏览阅读1.6k次。当今网络信息自动化的时代,通过网络进行远程监控和远程数据采集成为一种最经济最可靠的方式。但由于部分场景现场监控并不需要过多的检测,只需定时返回现场环境即可,4G串口摄像头极大的方便这方面的需求。不需过多的流量,及能反馈现场环境。针对目前野外的环境,无电无网情况下,需要使用全网通的4G网络,低功耗也是4G模块的硬伤,寻觅了很久,朋友介绍过合方圆的4G低功耗模块G8100B,该模块的特点是功耗同比其它模块降低了%50的功耗,能很好地控制整个产品的功耗。刚好合方圆原厂也提供有4G低功耗摄像头方案,在厂家的技_串口摄像头接入平台

安卓开发用红米手机进行调试_红米手机配合安卓开发-程序员宅基地

文章浏览阅读1.5k次。要想要红米手机连接电脑并被91助手、360手机助手等成功识别,手机必须打开USB调试模式,但是在安卓4.2版本中,系统的USB调试模式不是非常简单地被打开的。对于红米手机,其预装的就是4.2操作系统,故不能直接打开USB调试模式。_红米手机配合安卓开发

QML BOOK 第十章 Networking_qmlscene 一次只能加载一个文件吗-程序员宅基地

文章浏览阅读1.9k次,点赞2次,收藏6次。11. NetworkingQt5在C++中有丰富的网络相关的类。例如在http协议层上使用请求回答方式的高级封装类如QNetworkRequest,QNetworkReply,QNetworkAccessManageer。也有在TCP/IP或者UDP协议层封装的低级类如QTcpSocket,QTcpServer和QUdpSocket。还有一些额外的类用来管理代理,网络缓冲和系统网络配置。_qmlscene 一次只能加载一个文件吗

java.lang.IndexOutOfBoundsException: Inconsistency detected. Invalid item position 6(offset:6).state-程序员宅基地

文章浏览阅读2.3k次。如果你在界面中使用了RecyclerView,并且添加了上拉加载和下拉刷新的功能的话,一定对这个异常不会陌生。因为这个异常就时常发生在刷新清除数据的时候,刚好上拉加载的也调用了notifyDataSetChange();然后就会跑出如下异常:java.lang.IndexOutOfBoundsException: Inconsistency detected. Invalid item_inconsistency detected. invalid item position 6(offset:6)

推荐文章

热门文章

相关标签