在网页中打开多个摄像机

问题描述

我有一个网页正在尝试从系统附带的两个网络摄像头播放多个视频流。我的系统附带了三台摄像机，一台在系统的内置摄像机中，第二台是USB摄像机，第三台是droid cam客户端。我不能一次播放来自系统cam和usb cam的视频，我的意思是droid cam一直在播放，但是一次只能播放另一个摄像机。

例如：

1. Droid cam和USB Cam =有效
2. Droid cam和System Camera（内置）=可以使用
3. Usb和系统摄像头=不起作用

我的代码是

let devices = await navigator.mediaDevices.enumerateDevices();

if (devices.length > 0) {
    log(`Available Device Count ${devices.length}`);       

    for (const device of devices) {
        let localContraints = { audio: false }

        if (device.kind === "videoinput") {
            localContraints.video = { deviceid: device.deviceid ? { exact: device.deviceid } : undefined };

            var newStream = await navigator.mediaDevices.getUserMedia(localContraints).catch(err => console.log(err + device.label));
            if (newStream) {
                console.log(`Device Added ${device.label}`);
                window.stream.addTrack(newStream.getVideoTracks()[0]);
            }                    
        }
    }

}
else {
    log(`No Devices Available`);
}

错误：无法加载“相机标签”

添加到窗口对象中的两个摄像机流始终是Droid Cam。

首先我想知道这可能吗？

解决方法

深入研究问题之后，我发现了真正的问题和解决方案。真正的问题是Java脚本的异步行为。所以我重写了循环。这将帮助其他面临类似问题的人。

$(document).ready(async () =>{
    let leftVideo = document.querySelector('video#left');
    let rightVideo = document.querySelector('video#right');
    let middleVideo = document.querySelector('video#middle');
    let videoElemArray = [leftVideo,middleVideo,rightVideo]

    let devices = await navigator.mediaDevices.enumerateDevices();

    let i = 0;
    let videoIndx = 0;

    await new Promise(async (resolve,reject) => {
      try {
          if (devices.length == 0) return resolve();
              let funSync = async () => {

                  if (devices[i].kind === "videoinput") {
                      var newStream = await navigator.mediaDevices.getUserMedia({ audio: false,video: { deviceId: devices[i].deviceId } });
                      videoElemArray[videoIndx].srcObject = newStream;
                      videoIndx++;
                  }
                  i++;
                  if (i == devices.length) resolve();
              else funSync();
          }
          funSync();
      } catch (e) {
          reject(e);
     }
   })
});