JavaScript多USB摄像头视频流创建并行化失效问题求助

在Windows系统的Chrome浏览器中，通过JavaScript从6个USB摄像头捕获图像时，尽管使用async/await和Promise.all尝试并行初始化视频流，但实际耗时与串行方式无差异，无法达到预期并行效果。以下是简化代码及初始化日志：

// 获取已连接摄像头列表
const getCameraList = async () => {
  const devices = await navigator.mediaDevices.enumerateDevices();
  return devices.filter(device => device.kind === 'videoinput');
}

// 初始化单摄像头视频流
const initializeStreams = async (camera) => {
  const constraints = {
    audio: false,
    video: { deviceId: camera.deviceId },
  };
  return await navigator.mediaDevices.getUserMedia(constraints)
}

// 从流中捕获图像
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;
  }))
}

// 主流程
const main = async () => {
  try {
    const cameras = await getCameraList();

    // 问题所在：并行化未生效
    const streams = await Promise.all(cameras.map(initializeStreams));

    // 捕获图像同样存在并行化问题
    await captureImages(streams);
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

main();

流初始化日志：

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

核心原因与优化方案 #

1. 浏览器/系统层面限制 #

Chrome在Windows平台下对getUserMedia的并行请求存在隐性限制，同时USB摄像头若共享同一USB控制器，带宽不足会导致系统串行处理设备初始化请求。

2. 分批次并行初始化 #

避免一次性发起所有流请求，改为分批次并行处理，降低浏览器和系统的瞬时负载：

// 修改主流程中的流初始化逻辑
const main = async () => {
  try {
    const cameras = await getCameraList();
    const streams = [];
    const batchSize = 2; // 根据硬件性能调整批次大小

    // 分批次并行初始化流
    for (let i = 0; i < cameras.length; i += batchSize) {
      const batch = cameras.slice(i, i + batchSize);
      const batchStreams = await Promise.all(batch.map(initializeStreams));
      streams.push(...batchStreams);
    }

    // 分批次并行捕获图像
    const images = [];
    for (let i = 0; i < streams.length; i += batchSize) {
      const batch = streams.slice(i, i + batchSize);
      const batchImages = await Promise.all(batch.map(async (stream) => {
        const videoTrack = stream.getVideoTracks()[0];
        if (!videoTrack) return;
        const imageCapture = new ImageCapture(videoTrack);
        return await imageCapture.takePhoto({});
      }));
      images.push(...batchImages);
    }
  } catch (error) {
    console.error("An error occurred:", error);
  }
}

3. 优化视频约束参数 #

降低每个流的资源占用，让系统能同时处理更多流：

const initializeStreams = async (camera) => {
  const constraints = {
    audio: false,
    video: {
      deviceId: camera.deviceId,
      width: { ideal: 640 }, // 降低分辨率
      height: { ideal: 480 },
      frameRate: { ideal: 10 }, // 降低帧率
    },
  };
  return await navigator.mediaDevices.getUserMedia(constraints)
}

4. 硬件层面优化 #

• 将摄像头分散连接到不同的USB控制器（如主板前置/后置接口、USB3.0与USB2.0接口分开），避免带宽竞争。
• 更新摄像头驱动至最新版本，减少设备初始化延迟。

内容的提问来源于stack exchange，提问作者Ehsan Nazeri