高拍仪、浏览器获取获取多摄像头，切换摄像头

前段时候接到一个需求，新增功能：根据当前电脑绑定了几个摄像头，获取相应摄像头列表，并选择摄像头拍摄。

翻阅网上的各种资料，没有找到方法，最后借鉴了H5页面转换前后摄像头的方法，记录如下。

先通过 navigator.getUserMedia 调用起本地的摄像头
调用成功之后获取到本地电脑所有的摄像头设备列表

        navigator.mediaDevices.enumerateDevices().then(function(devices) {console.log(devices)devices.forEach(function(device) {if(device.kind == 'videoinput'){videoArr.push({'label': device.label,'id': device.deviceId})}});return videoArr;}).catch(function(err) {layer.msg(err.name + ": " + err.message);});return videoArr;

判断摄像头数量，如果 > 1 生成一个摄像头列表下拉框给用户选择。

if(videoArr.length > 1){var html = '<option value="">请选择摄像头</option>';for( var i = 0 ; i <videoArr.length; i++){html +=`<option value="${videoArr[i].id}">${videoArr[i].label}</option>`}videoArr = []$('#allvideo').html(html)form.render()videoIndex =layer.open({type: 1,shade: 0.4,area:['50%'],title: '选择摄像头',content: $('#videoBox'),})}else{openMedia(constraints)}

监听摄像头的选择。

if(videoArr.length > 1){var html = '<option value="">请选择摄像头</option>';for( var i = 0 ; i <videoArr.length; i++){html +=`<option value="${videoArr[i].id}">${videoArr[i].label}</option>`}videoArr = []$('#allvideo').html(html)form.render()videoIndex =layer.open({type: 1,shade: 0.4,area:['50%'],title: '选择摄像头',content: $('#videoBox'),})}else{openMedia(constraints)}

openMedia（）方法是调用用户媒体设备，访问摄像头拍照。

if(videoArr.length > 1){var html = '<option value="">请选择摄像头</option>';for( var i = 0 ; i <videoArr.length; i++){html +=`<option value="${videoArr[i].id}">${videoArr[i].label}</option>`}videoArr = []$('#allvideo').html(html)form.render()videoIndex =layer.open({type: 1,shade: 0.4,area:['50%'],title: '选择摄像头',content: $('#videoBox'),})}else{openMedia(constraints)}

最后的成功就是点击绑定人脸的时候，判断电脑上有几个摄像头设备，如果有多个，弹窗提示用户选择摄像头，然后进行拍照。

高拍仪、浏览器获取获取多摄像头，切换摄像头相关推荐

在网页中调用摄像头实现拍照上传 - 高拍仪二次开发
在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行.护照办理中心.税务等,我们可能会注意到办公桌上摆着这样一台机器.办公人员用它拍摄各种证件.文件.表格,有时候还 ...
c++ 二次开发良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...
来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562 在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的 ...
5分钟集成桌面摄像头或高拍仪到Web程序
简介桌面摄像头几乎是每台个人电脑必备的附件之一.实时聊天,远程协助等很多的桌面应用可以直接调用摄像头.然而在目前将桌面搬到云端的技术热潮中,在浏览器中直接集成摄像头也是一个热门需求.类似的实际应用场 ...
云桌面摄像头（高拍仪）重定向问题说明
传统的摄像头重定向模式: 在云桌面的使用场景,通常会遇到USB摄像头不能用的问题.如下图所示,插在云终端或者瘦客户机上的USB摄像头,通过网络重定向到远端的虚拟机中使用. 传统的USB摄像头重定向应用 ...
Html5高拍仪SDK支持谷歌百度火狐 360 QQ IE等浏览器
为响应客户要求及技术发展新趋势,我司高拍仪WEB控件包已支持谷歌.火狐.百度.360.QQ.IE10及以上等支持HTML5的浏览器. http://www.imgexpress.cn/news/34- ...
linux 内核高拍仪,高拍仪开发控件 | Dynamsoft Camera SDK
基于浏览器的摄像头.高拍仪控件 Dynamsoft Camera SDK 提供了 JavaScript API,帮助您在浏览器里轻松地从 USB(USB Video Class,即 UVC) 视频捕获 ...
泛微E9下紫光G750高拍仪集成总结
最近做了一个E9和紫光高拍仪集成的开发,经过探索,初见成效,做下记录,也希望能对大家有所帮助. 采用的方式为base64上传图片,将图片上传到服务器物理路径后,调用E9生成到知识模块中,并更新到流程表 ...
良田高拍仪集成vue项目
一.硬件及开发包说明: 产品型号为良田高拍仪S1800A3,集成b/s系统,适用现代浏览器,图片使用BASE64数据.开发包的bin文件下的video.flt文件需要和高拍仪型号的硬件id对应,这个可 ...
web端刷卡器_web工程集成身份证读卡器，高拍仪
接到个模块,要在已有的web工程里集成身份证读卡器,高拍仪等硬件.一时摸不着头脑,网上搜了下,发现都写的高端到看不懂.后来找了个已成功集成的web工程研究了下,发现弱爆了.这种硬件设备都已经做好了对w ...
android设备外接高拍仪
最近在研究android设备外接摄像头,手边正好有个高拍仪,就顺手试了一下,没想到高拍仪也能成功预览 1.应该并不是所有的android设备都能支持 2.用otg线连接的,没有修改android系统 ...

高拍仪、浏览器获取获取多摄像头，切换摄像头

高拍仪、浏览器获取获取多摄像头，切换摄像头相关推荐

最新文章

热门文章