Блог

У меня есть веб-страница, которая пытается воспроизвести несколько видеопотоков с двух веб-камер, подключенных к системе. Три камеры, подключенные к моей системе, одна из встроенных камер в системе, вторая — usb-камера, а третья — клиент droid cam. Я не могу воспроизводить видео с системной камеры и USB-камеры одновременно, я имею в виду, что droid cam всегда воспроизводит, но только одну из других камер одновременно.

например:

1. Droid cam и USB Cam = работает
2. Droid cam и системная камера (встроенная) = работает
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`);
}
  

Ошибка: не удалось загрузить «метку камеры»

два потока камер, добавленных в объект window, всегда являются камерой Droid.

прежде всего, я хочу знать, возможно ли это?

После изучения проблемы я нашел реальную проблему и решение. реальной проблемой было асинхронное поведение java script. поэтому я переписываю цикл. Это поможет другим, кто сталкивается с подобной проблемой.

 $(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);
     }
   })
});