如何通过HTML5与JavaScript调用USB工业内窥镜摄像头而非内置摄像头？

完全可以通过HTML5 MediaDevices API（也就是你用的getUserMedia）切换到外接的工业内窥镜摄像头，你当前的问题大概率是指定的deviceId不正确，或者没有正确枚举到外接设备。下面是具体解决步骤：

1. 先枚举所有可用视频设备，确认内窥镜的真实ID #

你之前硬编码的deviceId可能不是外接摄像头的正确ID，先运行以下代码获取所有视频设备的详细信息：

async function listVideoDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(device => device.kind === 'videoinput');
  
  // 打印所有视频设备到控制台
  videoDevices.forEach(device => {
    console.log(`设备名称: ${device.label}, 设备ID: ${device.deviceId}`);
  });
}
// 调用函数获取设备列表
listVideoDevices();

运行后，在浏览器控制台里找对应工业内窥镜的设备项（通常label会显示设备的品牌或名称），复制它的deviceId备用。

2. 修正getUserMedia的约束配置 #

用正确的设备ID替换原来的硬编码值，建议用exact关键字强制匹配指定设备，同时可以适当放宽分辨率限制避免设备不兼容：

const constraints = {
  audio: false,
  video: {
    deviceId: { exact: '这里替换成内窥镜的真实deviceId' },
    width: { ideal: 1280, max: 1920 },
    height: { ideal: 720, max: 1080 }
  }
};

3. 完整可运行的测试代码 #

下面是结合设备枚举和视频捕获的完整代码，你可以直接使用：

<video width="1280" height="720"></video>
<p onclick="startCapture()">开始捕获</p>
<script>
async function getTargetDevice() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevices = devices.filter(d => d.kind === 'videoinput');
  
  // 可以根据设备名称筛选，比如包含"内窥镜"关键词
  const endoscope = videoDevices.find(d => d.label.includes('内窥镜'));
  // 如果找不到名称匹配的，默认取第二个设备（假设第一个是内置前置摄像头）
  return endoscope || videoDevices[1];
}

async function startCapture() {
  try {
    const targetDevice = await getTargetDevice();
    if (!targetDevice) {
      console.error('未检测到外接内窥镜设备');
      return;
    }

    const constraints = {
      audio: false,
      video: {
        deviceId: { exact: targetDevice.deviceId },
        width: { ideal: 1280 },
        height: { ideal: 720 }
      }
    };

    const mediaStream = await navigator.mediaDevices.getUserMedia(constraints);
    const video = document.querySelector('video');
    video.srcObject = mediaStream;
    video.onloadedmetadata = () => video.play();
  } catch (err) {
    console.error(`${err.name}: ${err.message}`);
  }
}
</script>

额外注意事项 #

• 确保页面运行在HTTPS环境下（localhost开发环境除外），getUserMedia需要安全上下文才能正常工作。
• 检查平板的系统权限：确保已经授予浏览器访问摄像头的权限，并且外接USB内窥镜在系统层面已被正确识别（第三方应用能正常使用说明系统层面没问题）。
• 如果浏览器枚举不到设备，尝试重启浏览器或重新插拔内窥镜，有些设备需要重新触发系统识别。

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