I have a Samsung Galaxy S22 Ultra and I'm trying to use navigator.mediaDevices to (1) list all the cameras and (2) show output from any of the cameras.

Here are the device labels when I list all the cameras on my device:

• camera2 1, facing front
• camera2 3, facing front
• camera2 2, facing back
• camera2 0, facing back

As I understand it the phone has 5x total cameras:

• a 108MP wide camera
• a 12MP ultrawide camera
• a 10MP telephoto
• a 10MP periscope telephoto
• front camera.

So 4x of the cameras are rear facing and 1x is front facing. So why is it that navigator.mediaDevices.enumerateDevices() returns something else completely different?

My next question is... when I use any of the deviceIds that navigator.mediaDevices.getUserMedia() returned I get the front facing camera view on my phone, even if I select a deviceId who's label is "facing back". What's up with that?

Here's my code:

<script>
navigator.mediaDevices.getUserMedia({video: true});

var getCameraSelection = async () => {
  var devices = await navigator.mediaDevices.enumerateDevices();
  var videoDevices = devices.filter(device => device.kind === 'videoinput');
  const options = videoDevices.map(videoDevice => {
    return `<li><a href="#" onclick="useCamera('${videoDevice.deviceId}')">${videoDevice.label}</a></li>`;
  });
  document.querySelector('#output').innerHTML = '<ul>' + options.join('') + '</ul>';
};

getCameraSelection();

var useCamera = async (deviceId) => {
  const stream = await navigator.mediaDevices.getUserMedia({
    deviceId: deviceId,
    video: true
  });
  var video = document.querySelector('video');
  video.srcObject = stream;
  video.play();
  return false;
};
</script>

<div id="output"></div>
<video autoplay></video>