Блог

Я реализовал некоторые коды JavaScript, позволяющие пользователю сканировать QR-код из прогрессивного веб-приложения (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)
  

Проблема в том, что на устройствах с несколькими камерами заднего вида, таких как Huawei P30 Pro, JavaScript автоматически выбирает телеобъектив.

Хотелось бы знать, существуют ли какие-либо решения, позволяющие автоматически выбирать стандартный объектив камеры устройства?

Дополнительная информация

Альтернативным способом может быть наличие выпадающего списка, в котором пользователь может выбрать желаемый объектив камеры (аналогично этой демонстрации здесь) Но стараюсь избегать этого, поскольку это будет недостатком пользовательского интерфейса / пользовательского интерфейса, поскольку пользователю необходимо вручную выбирать его методом проб и ошибок.

Можно получить все объективы камеры, но в нем нет полей, позволяющих однозначно определить, какая камера является обычной камерой заднего вида по умолчанию, чтобы я мог фильтровать «устройства» Он содержит только 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)"}
  

На случай, если у кого-то еще возникнет эта проблема, я реализовал следующее, и, похоже, это работает на телефонах с несколькими камерами.

HTML-код с использованием bootstrap 4

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

    });
  

})