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

Question

我已经实现了一些 JavaScript 代码，以允许用户从 Progressive Web App (PWA) 扫描二维码。

使用的 QRScanner 库： 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)

问题是在华为 P30 Pro 等多个后置摄像头设备上，JavaScript 会自动选择长焦镜头。

想知道是否有任何解决方案可以使其自动选择设备的默认库存相机镜头？

额外信息

另一种方式也可以是具有下拉列表，让用户选择自己想要的相机镜头（类似这样的演示在这里），但设法避免它，因为它会在UI / UX不利的一面手动需要用户在尝试选择它和误差基础。

可以获取所有相机镜头，但它没有任何字段来唯一区分哪个相机是正常的默认后置相机，以便我过滤“设备”它只包含cameraId和标签。

// 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

如果其他人有这个问题，我实现了以下内容，它似乎适用于具有多个摄像头的手机。

使用引导程序 4 的 HTML 代码

<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>

我的 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 => {

    });

})