Selecting the default stock rear camera on mobile devices with multiple camera

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

Used QRScanner library:

    var html5QrCode = new Html5Qrcode("qrScanner");
    const config = { fps: 15, qrbox: 200 };
    function qrCodeSuccessCallback(successMessage) {
    function qrCodeFailedCallback(failedMessage) {
    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)"}

164 thoughts on “Selecting the default stock rear camera on mobile devices with multiple camera”

Leave a Comment