浏览器不支持摄像头采集,摄像头设备搜索

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

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

1. 先通过 navigator.getUserMedia 调用起本地的摄像头

2. 调用成功之后获取到本地电脑所有的摄像头设备列表

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;

3. 判断摄像头数量，如果 > 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) }

4. 监听摄像头的选择。

// 保存摄像头 form.on('submit(videoBox)', function(data){ var selectValue = data.field.allvideo layer.close(videoIndex); if (typeof currentStream !== 'undefined') { stopMediaTracks(currentStream); } const videoConstraints = {}; if (selectValue === '') { videoConstraints.facingMode = 'environment'; } else { videoConstraints.deviceId = { exact: selectValue }; } var constraints = { video: videoConstraints, }; openMedia(constraints) return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。 }); openMedia（）方法是调用用户媒体设备，访问摄像头拍照。 function openMedia(constraints){ //调用用户媒体设备, 访问摄像头 getUserMedia(constraints, successMedia, errorMedia);} function getUserMedia(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) { //firfox浏览器 navigator.mozGetUserMedia(constraints, success, error); } else if (navigator.getUserMedia) { //旧版API navigator.getUserMedia(constraints, success, error); } }