如何使用JavaScript获取计算机中附带的摄像机列表？

Question

我想显示连接到用户计算机的摄像机列表,当他们选择一个时,在HTML5 <video>标签中显示来自该摄像机的流视频.

如何获取连接到用户计算机的摄像机列表？

Answer 1

也许Navigator.getUserMedia()(使用WebRTC)是你正在寻找的,虽然我没有看到任何会直接告诉你什么设备可用(设备列表没有暴露给你的代码 - 它呈现给用户)当要求访问可用硬件的权限时).

另请注意浏览器支持:Chrome 21 +,Firefox 20 +,Opera 12+,不支持IE和Safari.

Answer 2

仅适用于镀铬和边缘

<script>
     navigator.mediaDevices.enumerateDevices().then(function (devices) {
            for(var i = 0; i < devices.length; i ++){
                var device = devices[i];
                if (device.kind === 'videoinput') {
                    var option = document.createElement('option');
                    option.value = device.deviceId;
                    option.text = device.label || 'camera ' + (i + 1);
                    document.querySelector('select#videoSource').appendChild(option);
                }
            };
        });
</script>
 <select id="videoSource"></select>