1

I am developing a QRcode scanner with https://rawgit.com/sitepoint-editors/jsqrcode/master/src/qr_packed.js on buildfire. is working fine on development but when deployed on markeenter code heret place the camera is not popping up. this is my code.

//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 && requestAnimationFrame(tick);
         }
    
        function scan() {
              try {
                 qrcode.decode();
             } catch (e) {
            setTimeout(scan, 300);
            }
         }
  • put a `.catch` for `.getUserMedia` promise - I had a similar issue (in a vue PWA) but with using `.enumerateDevices` - about 99% of the time I would get a rejection or a result stating that there were no cameras - I put in a delay and retry after first rejection (catch) or if no cameras were detected ... and then it works 100% of the time – Bravo Aug 04 '21 at 06:57
  • Is this happening with you or your users? I dont see that you are checking for permissions first. – Daniel_Madain Aug 04 '21 at 15:55
  • @Bravo i have added the .catch still not working. can you please give me an example code with both? .enumeratDevices – Chidiebere Ojingwa Aug 05 '21 at 22:19
  • @Daniel_Madain how do I check for permissions. – Chidiebere Ojingwa Aug 05 '21 at 22:23
  • @Bravo when I try using .enumerateDevices I get this error "Failed to convert value to 'MediaStream'." – Chidiebere Ojingwa Aug 05 '21 at 22:38
  • I wasn't suggesting you use enumerateDevices – Bravo Aug 05 '21 at 23:37
  • Did you try something like this navigator.getUserMedia({ audio: true, video: true},function (stream) { if(stream.getVideoTracks().length > 0 && stream.getAudioTracks().length > 0){ //code for when none of the devices are available }else{ // code for when both devices are available } }); – Daniel_Madain Aug 06 '21 at 23:30

0 Answers0