Open Multiple Video Camera in a web Page

I have a web page that is trying to play multiple video stream from two web cam that is attached with the system. Three Cameras attached with my system , one in an in-build camera in the system, second is a usb camera and third is a droid cam client. I can’t play video from system cam and usb cam at a time, I mean droid cam always playing but only one of the other camera at a time.

for example:

1. Droid cam and USB Cam = works
2. Droid cam and System Camera( in built) = works
3. Usb and System Camera = not working

My Code is

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

Error : could’t load ‘camera label’

two camera stream added in the window object one is always Droid Cam.

first of all I want know is this possible?

Answer

After digging into the issue i found the real problem and a solution. the real problem was asynchronous behavior of java script. so i rewrite the loop. This will help others who facing the similar issue.

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