mebjas / html5-qrcode

A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
https://qrcode.minhazav.dev
Apache License 2.0
4.93k stars 963 forks source link

Problem Reading a low contrast Kind of QR Code #535

Open apimio opened 2 years ago

apimio commented 2 years ago

Guys ..please ..I have a very big issue. I have some years using the library, working perfectly with it, but now I have a issue with some kind of QR codes. The size of each QR code is about 8x8 cms., but the contrast is lower (some examples attached). The librery is not reading some QR codes. I'd change some config parameter (even I tried useBarCodeDetectorIfSupported not official options). This my current code

const aformatsToSupport = [
   Html5QrcodeSupportedFormats.QR_CODE,
];

const html5QrCode = new Html5Qrcode("qr-reader", { formatsToSupport: aformatsToSupport, 
               experimentalFeatures: { useBarCodeDetectorIfSupported: true } 
            }
);
const qrCodeSuccessCallback = (decodedText, decodedResult) => {
                                //console.log(`Leimos`, decodedText);
                                //console.log(`Resultado`, decodedResult);                               
 };

var ActiveCamera = function(btn) {
                                var config = { fps: 500, qrbox: 250, formatsToSupport: aformatsToSupport, experimentalFeatures: { useBarCodeDetectorIfSupported: true} };

                                // back camera
                                html5QrCode.start({ facingMode: "environment" }, config, qrCodeSuccessCallback);

 }

exampleqr1 exampleqr2

If I read any other QR code from a site, QR app generator , I don´t have any problem. If I test reading the QR with native App, even directly from phone camera I dont have any issue, it's just with using the library.

Thanks a Lot for your help!!!!

liushengqi000 commented 2 years ago

I think you need to pre process the pictures before recognition. I can't decode this QR code on other websites.

canvas is useful

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext('2d')
function animate(){
    ctx.drawImage(video , 0 , 0 , vw , vh);
    var img=ctx.getImageData(0,0,50,50);
    ...
}
apimio commented 2 years ago

Thanks a lot. Finally .. I found a wait to fix the issue. Sadly, I had to change our implementations by qr-scanner library.

mebjas commented 1 year ago

@apimio what was the fix?