在网页中打开多个摄像机

Question

我有一个网页试图播放来自系统附带的两个网络摄像头的多个视频流。我的系统附带了三个摄像头，一个在系统内置摄像头中，第二个是 USB 摄像头，第三个是机器人摄像头客户端。我无法同时播放来自系统摄像头和 USB 摄像头的视频，我的意思是机器人摄像头一直在播放，但一次只能播放其他摄像头中的一个。

例如：

Droid cam 和 USB Cam = 有效
机器人摄像头和系统摄像头（内置）= 有效
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`);
}

错误：无法加载 'camera label'

在 window 对象中添加了两个摄像头流，一个始终是 Droid Cam。

首先我想知道这可能吗？

Answer 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);
     }
   })
});

在网页中打开多个摄像机

Open Multiple Video Camera in a web Page

javascript

webrtc

getusermedia