камера не появляется при развертывании на buildfire

#javascript #camera #qr-code #barcode-scanner #buildfire

Вопрос:

Я разрабатываю сканер QR-кодов с https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js на строительном огне. отлично работает над разработкой, но при развертывании на рынке enter code here t камера не появляется. это мой код.

 //const qrcode = window.qrcode;

    enter code here

const video = document.createElement("video");
const canvasElement = document.getElementById("qr-canvas");
const canvas = canvasElement.getContext("2d");

const qrResult = document.getElementById("qr-result");
const outputData = document.getElementById("outputData");
const btnScanQR = document.getElementById("btn-scan-qr");

let scanning = false;

qrcode.callback = res => {
    if (res) {
        outputData.innerText = res;
        scanning = false;

        video.srcObject.getTracks().forEach(track => {
            track.stop();
        });

        qrResult.hidden = false;
        canvasElement.hidden = true;
        btnScanQR.hidden = false;
    }
};

buildfire.services.camera.barcodeScanner.scan(
    {
        preferFrontCamera: true,
        showFlipCameraButton: true,
        formats: "QR_CODE,PDF_417",
    },

    btnScanQR.onclick = () => {
            navigator.mediaDevices
                .getUserMedia({ video: { facingMode: "environment" } })
                .then(function(stream) {
                    scanning = true;
                    qrResult.hidden = true;
                    btnScanQR.hidden = true;
                    canvasElement.hidden = false;
                    video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
                    video.srcObject = stream;
                    video.play();
                    tick();
                    scan();
                });
    }
    );
    
         function tick() {
             canvasElement.height = video.videoHeight;
                 canvasElement.width = video.videoWidth;
             canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
    
              scanning amp;amp; requestAnimationFrame(tick);
         }
    
        function scan() {
              try {
                 qrcode.decode();
             } catch (e) {
            setTimeout(scan, 300);
            }
         }
 

Комментарии:

1. поставьте .catch для .getUserMedia обещания — у меня была аналогичная проблема (в vue PWA), но с использованием .enumerateDevices — примерно в 99% случаев я получал отказ или результат, в котором говорилось, что камер не было — я вводил задержку и повторял попытку после первого отказа (улова) или если камеры не были обнаружены … и тогда это работает в 100% случаев

2. Происходит ли это с вами или вашими пользователями? Я не вижу, чтобы вы сначала проверяли наличие разрешений.

3. @Браво, я добавил .catch, который все еще не работает. не могли бы вы, пожалуйста, дать мне пример кода с обоими? .Перечислите устройства

4. @Daniel_Madain как проверить наличие разрешений.

5. @Bravo когда я пытаюсь использовать .enumerateDevices, я получаю эту ошибку «Не удалось преобразовать значение в «MediaStream»».