高拍仪、浏览器获取获取多摄像头，切换摄像头

最新推荐文章于 2024-04-08 10:40:56 发布

转载最新推荐文章于 2024-04-08 10:40:56 发布 · 2.8k 阅读

9 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/yjie970715/article/details/105787582

文章标签：

#高拍仪 #摄像头 #拍照

web前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种方法，用于获取当前电脑上所有已连接摄像头的列表，并允许用户从中选择一个进行拍照操作。通过使用navigator.getUserMedia和navigator.mediaDevices.enumerateDevices API实现。

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

翻阅网上的各种资料，没有找到方法，最后借鉴了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)
                                }