前段时候接到一个需求,新增功能:根据当前电脑绑定了几个摄像头,获取相应摄像头列表, 并选择摄像头拍摄。
翻阅网上的各种资料,没有找到方法,最后借鉴了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)}
最后的成功就是点击绑定人脸的时候,判断电脑上有几个摄像头设备,如果有多个,弹窗提示用户选择摄像头,然后进行拍照。