在网页中打开多个摄像机答案

【问题标题】：Open Multiple Video Camera in a web Page在网页中打开多个摄像机
【发布时间】：2020-10-08 10:56:33
【问题描述】：

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

例如：

Droid 摄像头和 USB 摄像头 = 有效
Droid cam 和 System Camera（内置）= 工作
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。

首先我想知道这可能吗？

【问题讨论】：

标签： javascript webrtc getusermedia

【解决方案1】：

在深入研究问题后，我发现了真正的问题和解决方案。真正的问题是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) return resolve();
              else funSync();
          }
          funSync();
      } catch (e) {
          reject(e);
     }
   })
});

【讨论】：