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

我已经实现了一些JavaScript代码，允许用户从渐进式Web应用程序（PWA）中扫描二维码

使用的QRScanner库：

问题在于，在华为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)"}

---

如果其他人有这个问题，我实现了以下功能，并且似乎可以在有多个摄像头的手机上使用

使用bootstrap4的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>

---

})

我认为这种方法使用的是硬编码索引值，这并不真正合适，因为不同的手机型号的普通（不是广角、微距等）相机镜头可能有不同的索引。我一直在寻找一种方法来检测哪个索引代表普通相机。

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

$(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 => {

    });