当前位置 博文首页 > 程序员石磊：高拍仪、浏览器获取获取多摄像头，切换摄像头
前段时候接到一个需求，新增功能：根据当前电脑绑定了几个摄像头，获取相应摄像头列表， 并选择摄像头拍摄。
翻阅网上的各种资料，没有找到方法，最后借鉴了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;
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)
}
最后的成功就是点击绑定人脸的时候，判断电脑上有几个摄像头设备，如果有多个，弹窗提示用户选择摄像头，然后进行拍照。
cs