如何将网络摄像头选择添加到官方 mediapipe 人脸检测解决方案？

Posted 2023-03-16

【中文标题】如何将网络摄像头选择添加到官方 mediapipe 人脸检测解决方案？

【英文标题】：How to add webcam selection to official mediapipe face detection solution?

【发布时间】：2021-10-24 13:47:33

【问题描述】：

https://google.github.io/mediapipe/solutions/face_detection#javascript-solution-api

这是通过 Google 使用 mediapipe 将 face detection 添加到网站上的网络摄像头提要的最简单方法。

我的笔记本电脑也有inbuilt webcam 和一台OBS virtual webcam。当我在笔记本电脑上尝试此示例代码时，有时虚拟网络摄像头会被我的网页随机拾取。

如何将网络摄像头选择添加到此示例代码中，以避免自动选择虚拟网络摄像头？

【参考方案1】：

请试试这个（提供完整文章的链接）

const video = document.getElementById('video');
const button = document.getElementById('button');
const select = document.getElementById('select');

function gotDevices(mediaDevices) 
select.innerhtml = '';
select.appendChild(document.createElement('option'));
let count = 1;
mediaDevices.forEach(mediaDevice => 
if (mediaDevice.kind === 'videoinput') 
  const option = document.createElement('option');
  option.value = mediaDevice.deviceId;
  const label = mediaDevice.label || `Camera $count++`;
  const textNode = document.createTextNode(label);
  option.appendChild(textNode);
  select.appendChild(option);

);

来源：Select Camera Javascript Mediapipe