Question

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

使用的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自动选择了远摄镜头。

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

其他信息

另一种方法可能是下拉列表供用户选择所需的相机镜头（类似于此演示here），但要避免使用它，因为这会导致需要用户使用的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

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

使用 bootstrap 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 => {

    });

})

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

其他信息

1 个答案: