谷歌浏览器MediaDevices.enumerateDevices() 获取媒体设备不全或者没有labei属性的问题

参考：https://www.cnblogs.com/rajan/p/12435915.html

有问题的代码

<script>
    navigator.mediaDevices.enumerateDevices()
        .then(gotDevices).catch(handleError);
    // 遍历所有的设备，包括视频和音频设备,找到双目摄像头
    function gotDevices(deviceInfos) {
        console.log(deviceInfos);
    }

    function handleError(error) {
        console.log('Error: ', error);
    }
    //访问用户媒体设备的兼容方法
    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);
        }
    }
    function success(stream) {
        console.log(stream);
    }
    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

</script>

问题现象

获取不到摄像头，在deviceInfos信息里没有摄像头。

问题原因

浏览器出于安全考虑，只对信任的域名开放核心功能的调用。要解决这个问题，先要看看浏览器是否信任该域名。打开浏览器的”设置“的页面并搜索”摄像头“的选项

没有在允许访问摄像头的范围之内，因此权限不足，label属性不可见。当然，此处也不能手动添加信任网址，怎么办？

解决方法

解决的办法就是让程序来“调用”摄像头，引导浏览器弹出询问框，我们再做允许的操作。

修改后的代码：

<script>
    //首次运行引导用户，信任域名
    var first = window.localStorage.getItem('first');
    if(first == null ){
        if (navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia) {
            //调用用户媒体设备, 访问摄像头
            getUserMedia({video: {width: 480, height: 320}}, success, error);
        } else {
            alert('不支持访问用户媒体');
        }
    }
    if(!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {
        console.log('menumerateDevices is not supported!');
    }else {
        navigator.mediaDevices.enumerateDevices()
            .then(gotDevices).catch(handleError);
    }

    // 遍历所有的设备，包括视频和音频设备,找到摄像头
    function gotDevices(deviceInfos) {
        console.log(deviceInfos);
    }

    function handleError(error) {
        console.log('Error: ', error);
    }



    //访问用户媒体设备的兼容方法
    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);
        }
    }
    function success(stream) {
        console.log(stream);
        window.localStorage.setItem('first',"false");
        window.location.reload();
    }
    function error(error) {
        console.log(`访问用户媒体设备失败${error.name}, ${error.message}`);
    }

</script>