Difficulty achieving parallelization when creating video streams from multiple USB cameras in JavaScript

Question

I am trying to capture images from six USB cameras using JavaScript (chrome , windows). I have implemented three functions: one to retrieve the list of connected cameras, another to initialize video streams, and a third to capture images from these streams. Despite using async/await and the map function, I am facing an issue with the parallelization of stream creation.

The problem is that the time it takes to create the streams does not show any improvement when compared to a sequential approach. It seems like the stream creation is not happening in parallel as intended.

Here's a simplified version of my code:

    // Function to get the list of connected cameras
    const getCameraList = async () => {
      const devices = await navigator.mediaDevices.enumerateDevices();
      return devices.filter(device => device.kind === 'videoinput');
    }

    // Function to initialize video streams
    const initializeStreams = async (camera) => {
      const constraints = {
        audio: false,
        video: { deviceId: camera.deviceId },
      };
      return await navigator.mediaDevices.getUserMedia(constraints)
    }

    // Function to capture images from streams
    const captureImages = async (streams) => {
      const result = await Promise.all(streams.map(async (stream) => {
        const videoTrack = stream.getVideoTracks()[0];
        if (!videoTrack) return;

        const imageCapture = new ImageCapture(videoTrack);
        const blob = await imageCapture.takePhoto({});
        return blob;
      }))
    }

    // Main function to orchestrate the process
    const main = async () => {
      try {
        const cameras = await getCameraList();

        // The issue is here: parallelization is not effective
        const streams = await Promise.all(cameras.map(initializeStreams));

        // same issue here: parallelization is not effective
        await captureImages(streams);
      } catch (error) {
        console.error("An error occurred:", error);
      }
    }

    main();

And here are the log results for initializing streams:

13:40:05.921  Cam3: 6524.796142578125 ms
13:40:11.737  Cam6: 12340.535888671875 ms
13:40:13.050  Cam5: 13652.81201171875 ms
13:40:18.869  Cam1: 19471.5029296875 ms
13:40:24.712  Cam2: 25313.91796875 ms
13:40:30.521  Cam4: 31123.049072265625 ms


13:40:30.521  load streams: 31124.97021484375 ms

I would appreciate any suggestions on how to achieve effective parallelization during the creation of video streams. Thank you!

Answer 1

Some worker or any Video SDK will be required for achieving parallelisation, one such website is videosdk.live