BrowserQRCodeReader doesn't focus when I use rear camera

Hi! 😋

Firstly, thanks for developing this great library. My problem is the following, I’m developing a web app that allows user to scan QR codes.

===================================================================================

async function scanCode() {
    try {
      const codeReader = new BrowserQRCodeReader();

      const previewElem = document.querySelector(
        "#test-area-qr-code-webcam > video"
      );

      const controls2 = await codeReader.decodeOnceFromConstraints(
        {
          video: {
            aspectRatio: 1.7777777778,
            facingMode: 'environment',
            focusMode: 'continuous',
            frameRate: { ideal: 30, max: 60 },
            width: { min: 640, ideal: 640, max: 640 },
          },
          audio: false
        },
        previewElem
      )

      setSerialNumber(controls2.text)
    } catch (error) {
      console.log(error);
    }
 }

The result is this:

And if I just set the following config, app uses front camera and autofocus works perfectly fine but, scan codes using front camera is quite uncomfortable.

const controls2 = await codeReader.decodeOnceFromConstraints(
    {
        video: true,
        audio: false,
    },
    previewElem
)

[fydelio]

I have been playing around with library for quite some time and here is what I’ve learnt.

In the past it was easy. Smartphone had just two cameras. A front-facing and a back-facing. But now with mobiles becoming more sophisticated, suddenly they have multiple lenses, wide lenses and zoom lenses. Unfortunately the browser / smartphone / library isnt always correct when choosing a default lense (I’ve experienced problems mostly with Samsung phones), with some lenses being unusable for close up Scanning, as they are unfocused. Basically the only solution I found is providing a dropdown to the user, where he can select his lenses (and potentially store the selection in a cookie).

Curious: Did someone else come up with a different solution?

[fydelio]

Yes, of course

How to display a select box with the various lenses

var videoSourceSelect = document.getElementById('videoSourceSelect')

BrowserCodeReader.listVideoInputDevices()
.then((videoInputDevices) => {

    if (videoInputDevices.length >= 1) {
        videoInputDevices.forEach((element) => {
            const sourceOption = document.createElement('option')
            sourceOption.text = element.label
            sourceOption.value = element.deviceId
            videoSourceSelect.appendChild(sourceOption)
        })
    }
})

When loading the codeReader, do as follows:

// get the selected id of the camera
let device_id = var videoSourceSelect = document.getElementById('videoSourceSelect').value
// load the codeReader with the according device_id
const controls = await codeReader.decodeFromVideoDevice(device_id, previewElem, (result, error, controls) => {
});

If it helps (and not published yet): I’m trying to help improve the documentation. Here is a branch with a more enriched documentation. Have a look at it. You might get some more ideas (and maybe some feedback): https://github.com/fydelio/browser/tree/improved_documentation