如何实现同时调用笔记本内置摄像头与外接USB摄像头并分别显示视频流？

Hey there! The problem you're facing is that your current code asks the browser for any video stream twice, so it just uses the default camera both times. To get separate feeds from your built-in and USB camera, we need to explicitly target each device using its unique ID. Here's how to fix it:

Step-by-Step Explanation #

• First, we need to list all available video input devices using navigator.mediaDevices.enumerateDevices(). This gives us details like device IDs and labels (so we can tell which camera is which).
• Then, we'll filter these devices to identify your built-in camera (usually labeled something like "Integrated Camera") and your USB camera.
• Finally, we request a stream for each specific device by passing its ID in the video constraints of getUserMedia().

Working Code Example #

<video id="cameraModule1" width="480" height="360" autoplay playsinline></video>
<video id="cameraModule2" width="480" height="360" autoplay playsinline></video>

<script>
async function setupCameras() {
  try {
    // Trigger permission prompt first (required to see device labels)
    await navigator.mediaDevices.getUserMedia({ video: true });
    
    // Fetch all connected media devices
    const devices = await navigator.mediaDevices.enumerateDevices();
    
    // Filter to only keep video input devices
    const videoDevices = devices.filter(device => device.kind === 'videoinput');
    
    if (videoDevices.length < 2) {
      alert("Looks like you don't have two cameras connected!");
      return;
    }

    // Assign devices (adjust label checks based on your camera names)
    let builtInCameraId, usbCameraId;
    videoDevices.forEach(device => {
      if (device.label.includes('Integrated') || device.label.includes('Built-in')) {
        builtInCameraId = device.deviceId;
      } else {
        usbCameraId = device.deviceId;
      }
    });

    // Fallback if labels are unclear (use first and second detected devices)
    if (!builtInCameraId) builtInCameraId = videoDevices[0].deviceId;
    if (!usbCameraId) usbCameraId = videoDevices[1].deviceId;

    // Load stream for built-in camera
    const builtInStream = await navigator.mediaDevices.getUserMedia({
      video: { deviceId: { exact: builtInCameraId } }
    });
    document.querySelector('#cameraModule1').srcObject = builtInStream;

    // Load stream for USB camera
    const usbStream = await navigator.mediaDevices.getUserMedia({
      video: { deviceId: { exact: usbCameraId } }
    });
    document.querySelector('#cameraModule2').srcObject = usbStream;

  } catch (error) {
    console.error("Error accessing cameras:", error);
    alert("Please make sure you've granted camera permissions and have two cameras connected.");
  }
}

// Run setup when the page loads
setupCameras();
</script>

Key Notes #

• Permission Handling: We first request a generic video stream to trigger the browser's permission prompt. Without this, device labels might be hidden for privacy reasons.
• Device Labels: The label checks (includes('Integrated')) are examples—you can tweak them based on your camera's actual label (check the console log of videoDevices if you're unsure).
• exact Constraint: Using deviceId: { exact: deviceId } ensures the browser uses the exact camera we want, instead of falling back to the default.
• playsinline Attribute: Added to video elements to prevent unwanted fullscreen behavior on mobile devices.

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