在具有多个摄像头的移动设备上选择默认的后置摄像头

Question

I have implemented some JavaScript codes to allow user to scan QR code from a Progressive Web App (PWA).

Used QRScanner library: https://github.com/mebjas/html5-qrcode

    var html5QrCode = new Html5Qrcode("qrScanner");
    const config = { fps: 15, qrbox: 200 };
    
    function qrCodeSuccessCallback(successMessage) {
       console.log(successMessage)
    };
    function qrCodeFailedCallback(failedMessage) {
       return;
    }
    html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback, qrCodeFailedCallback)

The problem is on multiple rear camera devices like the Huawei P30 Pro, the JavaScript automatically selects the telephoto lens.

Would like to know are there any solutions to make it automatically selects the device's default stock camera lens?

Extra info

An alternative way could be having drop down list for user to select their desired camera lens (similar to this demo here ) But trying to avoid it as it will be a downside on the UI/UX for needing user to manually select it in a try and error basis.

It is possible to get all camera lenses, but it doesn't have any fields to uniquely distinguish which camera is the normal default rear camera in order for me to filter the "devices" It only contains the cameraId and the label.

// This method will trigger user permissions
Html5Qrcode.getCameras().then(devices => {
  console.log(devices)  // list of devices, which the ID can be used to initialize the camera.
   // e.g. 0: {id: "ed3fb96551169649ccf26f4b7858515ea168a5060463e4e7780f2ade48d30150", label: "HP HD Camera (04ca:706d)"}

Answer 1

In case someone else have this problem, I implemented the following and it seems to work on phones with multiple cameras.

HTML code using bootstrap 4

<div class="form-row justify-content-md-center">
    <div class="form-group col-md-4 col-sm-4">
        <div class="justify-content-md-center" id="reader" width="300px" height="300px"></div>
    </div>
</div>

My javascript

$(document).ready(function () {

Html5Qrcode.getCameras().then(devices => {
        if (devices && devices.length) {
            var cameraId;
            var cameraLabel;
            if (devices.length === 1) {
                cameraId = devices[0].id;
            } else {
                cameraId = devices[1].id;
                //This is for cellphones with 4 cameras. Usually the first 2 detected are the front so in my case selecting the third in the list worked.
                if (cameraLabel.includes("front")) {
                    cameraId = devices[2].id;
                }
            }

            const html5QrCode = new Html5Qrcode("reader");
            html5QrCode.start(
                cameraId,
                {
                    fps: 10,    
                    qrbox: 250  
                },
                qrCodeMessage => {
                    //Things you want to do when you match a QR Code
                },
                errorMessage => {
                    // parse error, ignore it.
                })
                .catch(err => {
                    // Start failed, handle it.
                });

        }
    }).catch(err => {

    });

})