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

Question

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

这是使用 Google 的 mediapipe 将 人脸检测 添加到网站上的网络摄像头源的最简单方法。

我的笔记本电脑还有

inbuilt webcam

和一个

OBS virtual webcam

。当我在笔记本电脑上尝试此示例代码时，有时我的网页会随机拾取虚拟网络摄像头。

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

Answer 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);
}
});
}

来源：选择相机Javascript Mediapipe

Answer 2

要指定在网页中使用哪个网络摄像头，尤其是在处理多个源（例如内置网络摄像头和 OBS 的虚拟网络摄像头）时，您可以通过添加选择所需视频输入设备的功能来增强 MediaPipe 人脸检测示例。

以下是如何将网络摄像头选择功能添加到 JavaScript 中的 MediaPipe 人脸检测示例：

枚举媒体设备：首先，您需要列出所有可用的视频输入设备（网络摄像头），以便用户可以从中进行选择。

更新视频源：用户选择网络摄像头后，更新 MediaPipe 人脸检测代码使用的视频源。