如何为官方Mediapipe人脸检测解决方案添加摄像头选择功能？

核心实现逻辑 #

通过浏览器媒体设备接口枚举所有摄像头，主动排除OBS虚拟摄像头后，指定目标设备ID初始化视频流，即可避免随机调用虚拟摄像头的问题。

具体实现步骤 #

• 首先调用浏览器navigator.mediaDevices.enumerateDevices()接口获取所有可用媒体设备，过滤出类型为videoinput的摄像头设备
• 遍历摄像头设备列表，排除设备名称包含OBS、virtual等关键字的虚拟摄像头，优先匹配内置物理摄像头
• 初始化MediaPipe摄像头实例时，将筛选得到的目标设备ID传入配置项，替换默认的自动选流逻辑

代码示例 #

1. 摄像头筛选函数 #

// 筛选内置物理摄像头，排除OBS等虚拟摄像头
async function getValidCameraDeviceId() {
  // 枚举所有媒体设备
  const allDevices = await navigator.mediaDevices.enumerateDevices();
  // 过滤出所有摄像头设备
  const cameraList = allDevices.filter(item => item.kind === "videoinput");
  if (cameraList.length === 0) return null;

  // 排除虚拟摄像头，可根据自己设备的实际名称调整筛选关键词
  const builtinCamera = cameraList.find(camera => {
    const label = camera.label.toLowerCase();
    return !label.includes("obs") && !label.includes("virtual");
  });

  // 未匹配到符合条件的摄像头时默认使用第一个设备
  return builtinCamera ? builtinCamera.deviceId : cameraList[0].deviceId;
}

2. 修改MediaPipe摄像头初始化逻辑 #

// 替换原示例中的摄像头初始化代码
async function initFaceDetectionCamera(videoElement) {
  const targetDeviceId = await getValidCameraDeviceId();
  const camera = new Camera(videoElement, {
    onFrame: async () => {
      await faceDetection.send({ image: videoElement });
    },
    width: 1280,
    height: 720,
    // 传入指定摄像头ID，替换默认自动选择逻辑
    deviceId: targetDeviceId
  });
  camera.start();
}

注意：浏览器要求先获取摄像头权限才会返回设备的真实名称，所以首次使用时可以先申请一次基础摄像头权限，拿到权限后再枚举设备筛选，之后用匹配到的设备ID重新初始化摄像头即可。

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