ericblade / quagga2

An advanced barcode-scanner written in Javascript and TypeScript - Continuation from https://github.com/serratus/quaggajs
MIT License
758 stars 85 forks source link

Unable to scan barcode with low resolutions using mobile device #290

Open m2pathan opened 3 years ago

m2pathan commented 3 years ago

Hi, I am not able to scan some sample barcodes (code 128) using the mobile device camera whereas we are able to scan it using the laptop's webcam. Do I need to change/update any configuration to support the mobile device? Actual the barcode images are too small and with low-resolution quality. sample barcode: https://determined-fermi-064edc.netlify.app/not-working2.jpg

github-actions[bot] commented 3 years ago

Thank you for filing an issue! Please be patient. :-)

ericblade commented 3 years ago

hmm.. what resolution? what are the parameters you're using to init Quagga?

Since your image has multiple barcodes, which could easily confuse the locator, I'd suggest turning off the locator, and setting I believe the "area" parameters, so that a specific area of the viewport is used for the detection area.. that would allow you to put the barcode you want to scan into a specific area of the viewport, rather than relying on the library to figure out where the barcodes are. It's computationally less expensive, and probably more accurate in cases like this, when the user is putting the barcode into a specific zone.

But definitely please post back the parameters that you're using, and an image like this would be excellent to have in the test suite.

ericblade commented 3 years ago

oh, also, if you happen to know the encoding for each of the barcodes, that'd be handy to know too, so I know what I"m trying to get out of it :-D

m2pathan commented 3 years ago

Hi @ericblade , i have used the default config for Quagga init:

inputStream: {
        name: 'Live',
        type: 'LiveStream',
        target: null,
        constraints: {
            width: { min: 640 },
            height: { min: 480 },
            aspectRatio: { min: 1, max: 2 },
            facingMode: 'environment', // or user
        },
        singleChannel: false // true: only the red color-channel is read
    },
    locator: {
        patchSize: 'medium',
        halfSample: true
    },
    locate: true,
    numOfWorkers: 4,
    decoder: {
        readers: ['code_128_reader']
    }
ericblade commented 3 years ago

hmm. well, it seems it's a particularly difficult image to decode, as i literally crashed a couple of other barcode readers, and neither quagga nor a couple of others i tried were able to figure it out .

this one did, surprisingly, all the way: https://demo.dynamsoft.com/DBR/BarcodeReaderDemo.aspx

my advice would be to try without locator, and also try higher resolution. if none of that works, perhaps simply covering up all the area around the barcode you're trying to read.

unfortunately, i'm not really a great person to discuss imaging with, i'm much more of a maintainer here than an expert in image processing. I'd hoped some experts would show up by now. ;-)

what does amaze me is that quagga isn't even locating a possible barcode, i think the barcode information here is just entirely too dense. :|

julienboulay commented 3 years ago

@m2pathan @ericblade,

Following an issue on the angular wrapper for Quagga2 https://github.com/julienboulay/ngx-barcode-scanner/issues/53, I succeeded to read the barcode with the config given by @m2pathan, with an iPhone SE. @m2pathan could you give us more info about your device, please ?

ericblade commented 3 years ago

Cheers @julienboulay !

Increasing resolution might well do the trick then.

I am curious what webcam you used that was able to read, also. I've had significant difficulty with most USB cams unless they featured a very good autofocus.

tinnielam commented 3 years ago

You might set a default resolution and a fallback resolution. 640 x 480 is most likely blurry. Try 1080p for better results... ( it doesn't affect performance at all... even on older devices.)

constraints: { width: { min: 640, ideal: 1920, max: 4096 }, height: { min: 480, ideal: 1080, max: 2400 }, },