Quagga2 React18 example

[ElBambu]

Hello i need to integrate Quagga2 in a project to read a barcode that looks like this:

https://www.sociale.it/wp-content/uploads/2014/08/tessera-sanitaria-2.png

It's the barcode of an italian health insurance card which is in a code_39 format.

I tried Quagga first on this demo page

https://serratus.github.io/quaggaJS/examples/live_w_locator.html

and i managed to get it working by setting the resolution to 1920*1080, so i took the react example of Quagga2 and tried to do the same thing by setting these constraints

const defaultConstraints = {
  width: 1920,
  height: 1080,
  aspectRatio: 1920 / 1080,
  focusMode: "continuous"
};

but without much success ( i get an empty array on the result when i try to scan that barcode ( or any code_39 barcode))

Here is my codesandbox where i'm doing my tests

https://codesandbox.io/s/reactjs-quagga2-test-z9f4hl?file=/src/Scanner.js

[ericblade]

Your codesandbox just errors out with

I don't see anywhere in your code where you're specifying the reader resolution or patch size or any other parameters you set to get a successful read. Your constraints block (and I know there's a lot of bad examples out there) could stand to be updated to modern specs too, https://blog.addpipe.com/getusermedia-video-constraints/

[ElBambu]

Hmmm it's weird that it crashes, seems to be working for me :V (it's basically the react example you have just changed the defaultContraints)

i thought at first that with this i was specifying the resolution

const defaultConstraints = {
  width: 1920,
  height: 1080,
  aspectRatio: 1920 / 1080,
  focusMode: "continuous"
};

but now that you pointed it out i'm starting to think it's not, cuz it changes the sizes of the container while the resolution of the container seems to stay the same :/

[ericblade]

the constraints only tell the browser what kind of camera you want to find. Other commonly used parameters in Quagga.init

inputStream: {
    size: 800 // this is what the old demo app sets when you select a resolution, it's expecting longest side
},
locator: {
    patchSize: 'medium' // this is also commonly tweaked in the demo app
}

I'm realizing maybe the README needs to be re-organized and re-thought well before the next major update.

[ElBambu]

Hmmmm not sure i'm getting it xD

this is my Quagga.init

what else i would need to set the correct resolution

` Quagga.init(
{
inputStream: {
type: "LiveStream",
constraints: {
width: 1920,
height: 1080,
aspectRatio: 1920 / 1080,
focusMode: "continuous",
...(cameraId && { deviceId: cameraId }), // comes from props
...(!cameraId && { facingMode }) // comes from props
},
target: scannerRef.current
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers,
frequency: 10,
decoder: { readers: ["code_39_reader"] },
locate: true
},
(err) => {
Quagga.onProcessed(handleProcessed);

    if (err) {
      return console.log("Error starting Quagga:", err);
    }
    if (scannerRef && scannerRef.current) {
      Quagga.start();
      if (onScannerReady) {
        onScannerReady();
      }
    }
  }
);`

[ericblade]

In your inputStream block you should have a size: 1920 setting, if that's the width that is necessary to get it to work.
inputStream.size correlates to the "Resolution (long-side)" field in the old demo app

Also, if I remember correctly, aspect ratio is height / width rather than width / height

[ElBambu]

Hmmm i tried to update my inputStream like this

( added the size reduced the width/height of the scan area, changed aspectRatio H/W)

 inputStream: {
          type: "LiveStream",
          size: 1920,
          constraints: {
            width: 640,
            height: 480,
            aspectRatio: 1080 / 1920, // i assume this is related to the resolution rather than the width/height of the scanning area ? ( though i tried both but didn't saw any difference )
            focusMode: "continuous",
            ...(cameraId && { deviceId: cameraId }), // comes from props
            ...(!cameraId && { facingMode }) // comes from props
          },
          target: scannerRef.current
        }

But it doesn't seem to improve the resolution

[ericblade]

I'm confused as to what our goal is here now

If we're trying to improve the camera resolution, then you're probably looking for something like

      width: { ideal: 1920 },
      height: { ideal: 1080 },
      aspectRatio: { ideal: 1080/1920 },
}```

[ElBambu]

Yep that's what I'm trying to do

I want a small scan area

640*480 could be good

But i want the camera resolution to be at 1920*1080

If i put these values on the constraints parameter i just get a bigger scan area but the resolution remains poor ( hence is not able to recognize the barcode )

I can't seem to be able to get it even by trying these constraints

      width: { ideal: 1920 },
      height: { ideal: 1080 },
      aspectRatio: { ideal: 1080/1920 },

While on the other example by setting the resolution to 1920*1080 (or changing it in general ) i can clearly see a quality improvement on the scan area, i tried setting all sorts of values but i can't seem to be able to get any change :/

[ericblade]

My experience indicates that on a cell phone, typically, you get whatever resolution the maximum of the selected camera is, regardless of what you actually ask for, whereas on a PC with a single camera, it'll give you the closest resolution that camera supports (ie, if i ask for 640x480 on my USB webcam that supports multiple resolutions, I'll actually get it, instead of getting 1920x1080)

Also have experienced significant differences between how the HTML video element works between desktop and mobile, in that on desktop, the video inside the element will be resized to fit the element, whereas on mobile, the element is resized to fit the resolution of the video.

This has all been a couple of years since I've last looked at it, though, and things may be wildly different now.

Here's the block I'm currently using (and i'm noticing it doesn't have a 'size' param, so i'm curious what the default is)

            inputStream: {
                type: 'LiveStream',
                constraints: {
                    width: {
                        ideal: 1920,
                        min: 640,
                    },
                    height: {
                        ideal: 1080,
                        min: 480,
                    },
                    ...(cameraId && { deviceId: cameraId }),
                    ...(!cameraId && { facingMode: { ideal: 'environment' } }),
                },
                target: scannerRef.current,
            },
            locator: {
                patchSize: 'medium',
                halfSample: true,
            },
            numOfWorkers: 0,
            decoder: {
                // readers: ['qr-code-reader'],
                readers: ['upc_reader', 'ean_reader'],
            },
            locate: true,