在具有多個攝像頭的移動設備上選擇默認的后置攝像頭

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

    });

})