Skip to content

Add better listVideoInputDevices check in BrowserCodeReader.ts  #141

@nicoesiea

Description

@nicoesiea

The function listVideoInputDevices (in the BrowserCodeReader.ts file) lists all the available video input devices. It could be nice to force the label with a known value to have a way to make a distinction with environemental and selfie camera.
I'm thinking on an example of code, like:

navigator.mediaDevices .enumerateDevices() .then(function (devices) {
  const videoDevices = devices.filter(
    (device) => device.kind === "videoinput"
  );
  videoDevices.forEach((device) => {

  navigator.mediaDevices
    .getUserMedia({ video: { deviceId: device.deviceId } })
    .then((stream) => {
      const track = stream.getVideoTracks()[0];
      const settings = track.getSettings();
      
      alert("Camera:" + device.label);
      alert("Settings:" + JSON.stringify(settings));

      // Hypothèse : the selfie camera are mirror option set
      if (settings.facingMode === "user") {
        alert("It seems this is selfie camera");
      } else if (settings.facingMode === "environment") {
        alert("It seems this is environmental camera.");
      } else {
        alert("Here we do not know.");
      }

      // Stop
      track.stop();
    })
    .catch((err) => {
      console.error("Error", device.deviceId, err);
    });
});
})
.catch(function (err) {
  console.error("Error to get the camera:" + err);
});

Maybe there is a better solution to do this check. I will be very happy to discover it.
Thank you in advance

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions