How to add webcam selection to official mediapipe face detection solution?

Question

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

This is simplest way to add face detection to webcam feed on website using mediapipe by Google.

My laptop have inbuilt webcam and one OBS virtual webcam also. When I try this example code on my laptop sometime virtual webcam get picked up by my webpage randomly.

How can I add webcam selection to this example code so I can avoid getting virtual webcam selected automatailly?

Answer 1

Please try this (link provided to full article)

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

Source : Select Camera Javascript Mediapipe