求助：getUserMedia展示本机摄像头只能展示两个吗？为什么第三个会报错？

Question

navigator.mediaDevices.getUserMedia 方法最多只能获取两个摄像头数据吗？

这边有一个设备有三个摄像头。使用navigator.mediaDevices.enumerateDevices方法获取到设备列表之后，循环调用getUserMedia,结果就是前两个可以展示在video标签中，第三个调用getUserMedia时会报错：DOMException: Could not start video source。

调整过展示顺序，三个摄像头的确没问题，谁第三个加载谁就不行。

html中有三个video标签，id分别是v0,v1,v2。 下面是js的调试代码。第三个getUserMedia会报错。好无奈啊。

export default {
    data(){
        return {

        }
    },
    mounted(){
        this.test();
    },
    methods:{
        async test(){
            let arr = await navigator.mediaDevices.enumerateDevices();
            console.log(arr);
            let list = [];

            for(let i=0;i<arr.length;i++){
                let di = arr[i];
                if(di.kind === 'videoinput'){
                    list.push({
                        video: {
                            deviceId:di.deviceId
                        }
                    });
                }
                
                /*if(window.stream){
                    window.stream.getTracks().forEach(function(track) {
                        track.stop();
                    });
                }*/
            }            
            
            navigator.mediaDevices.getUserMedia(list[0]).then((stram)=>{
                let element1 = document.getElementById("v0");
                element1.srcObject = stram;
            }).catch((e)=>{
                console.log('Error',list[0],e)
            });

            navigator.mediaDevices.getUserMedia(list[1]).then((stram)=>{
                let element2 = document.getElementById("v1");
                element2.srcObject = stram;
            }).catch((e)=>{
                console.log('Error',list[1],e)
            });

            navigator.mediaDevices.getUserMedia(list[2]).then((stram)=>{
                let element3 = document.getElementById("v2");
                element3.srcObject = stram;
            }).catch((e)=>{
                console.log('Error',list[2],e)
            });

        },
    }
}

Answer 1

export default {
    data(){
        return {}
    },
    mounted(){
        this.test();
    },
    methods:{
        async test(){
            let devices = await navigator.mediaDevices.enumerateDevices();
            console.log(devices);
            let videoInputs = devices.filter(device => device.kind === 'videoinput');

            if (videoInputs.length < 3) {
                console.log('Not enough video inputs available.');
                return;
            }

            const startVideoStream = async (deviceId, elementId) => {
                try {
                    let stream = await navigator.mediaDevices.getUserMedia({ video: { deviceId } });
                    document.getElementById(elementId).srcObject = stream;
                } catch (error) {
                    console.log(`Error accessing video input ${deviceId}:`, error);
                }
            };

            await startVideoStream(videoInputs[0].deviceId, 'v0');
            await startVideoStream(videoInputs[1].deviceId, 'v1');
            await startVideoStream(videoInputs[2].deviceId, 'v2');
        },
    }
}