[Feature Request] high-density QR codes that support 1 kilobyte data capacity

[junlicn]

Is your feature request related to a problem? Please describe.
I have been using your html5-qrcode library to scan QR codes with a webcam, and I find it to be a great tool. However, I have encountered some issues when trying to scan high-density QR codes, particularly those that encode 1k~2k bytes of data or more.

It seems that the library is not able to correctly identify and decode these high-density QR codes, even when using a high-resolution camera and optimizing the lighting conditions.

Describe the solution you'd like
Therefore, I would like to request a feature to support high-density QR codes in the html5-qrcode library. Specifically, it would be great if the library could handle QR codes with a data capacity of 1k bytes or more, as these are becoming increasingly common in my use case.

Thank you for considering my request. Please let me know if you have any questions or need further information.

Describe alternatives you've considered

Additional context

[JL102]

FYI I've been investigating this for myself, and I believe I know the reason. I've got a fork and I'm trying to figure out how to shoehorn a solution into the code.

I believe the reason it does not work with high-resolution cameras is because of the way html5-qrcode creates and samples the HTML video element. It creates a video element with the same pixel size as the parent element, and as such, it gets downsampled from the camera's HD stream. Then, it samples the video by copying it into a canvas element, once again with the pixel size of the parent element.

I'm sure this was done to enable smooth performance, but unfortunately a side effect of that decision is that high density QR codes are not supported. I'll update you in this thread if I make any headway.

[mebjas]

@JL102 thanks for the investigation.

Please let me know if you find more.

I plan to add support for this by adding option to set resolution support in the library, as well as for users to update (if using Html5QrcodeScanner).

[mebjas]

@junlicn

That said, 1KB still sounds fairly high to me. Can you add some test samples here? Have you tested if they work with file based scans?

[JL102]

As promised, here's the code from my tests: https://github.com/JL102/html5-qrcode

I was able to get html5-qrcode to scan at a much higher resolution. By default, if no video constraints are specified, the video stream is set to 640x480. To get the video stream to go at a higher resolution, I set the videoContraints' width to 9999. (Source: https://stackoverflow.com/a/47613536) Here's my specific config:

const config: Html5QrcodeCameraScanConfig = {
	fps: 1, // Optional, frame per seconds for qr code scanning
	disableFlip: false,
	videoConstraints: {
		facingMode: 'environment',
		width: 9999,
	},
}

Using a low fps because scanning such a high res image takes a long time.

Then, I had to modify html5-qrcode to increase the size of the scanning canvas. I made it set the qrbox w/h to whichever is higher: parent w/h or video stream w/h.

But unfortunately, it still doesn't scan.

Using Firefox's usb developer tools, I grabbed this image straight from the canvas:

Here's a digital copy that's not from my camera:

I can get both to scan with my phone's native qr code scanner app (though the top one can be a bit finnicky, maybe because of the Moire effect.)

I can only guess that it's caused by some flaw in the zxing library. Since I was using Firefox, and Firefox doesn't support the BarcodeScanner API yet, I it was using zxing. I tried to test it quickly on Opera (my main browser on my phone) but the video stream didn't load and I didn't feel like debugging why (cuz I don't have Opera on my desktop).

@junlicn I did a quick search for qr code scanners written in WebAssembly and I found this one: https://github.com/maslick/koder and the live demo managed to scan my larger qr codes! I'm gonna look into using that module in the app I'm developing.

@mebjas Feel free to use the code I wrote in my branch if you'd like. I only tested it with the qrbox disabled (i.e. scanning the whole video at once, instead of having a smaller scan box) so you'll have to do some work to support the higher res video with the qr box enabled.

There's probably some potential here for using the Koder webassembly scanner with your wrapper code, since I see it was designed with modularity in mind. It seems to run a lot faster than zxing, which is nice.

[ROBERT-MCDOWELL]

Year ago I was suggesting to use a worker to minimize latency and async slow down, maybe it's time now to do it.
concerning koder it looks indeed promising but what an horror when I saw on its README "supporting EU Digital Covid Certificate validator (vaccination, test"... just for that I won't go there....:-\ and btw, html5-qrcode can easily be compiled in wasm and use a C++ scan library that will replace xzing

[JL102]

Hey, just as an update, I'd like to correct an error regarding my previous assertions that scanning a high density QR code requires a significantly higher camera resolution. After completing my implementation using Koder, I discovered that it has no issues scanning my qr codes at a low video resolution, i.e. 640-840 pixels wide. All that upping the resolution does is significantly increase the amount of time it takes to scan.

[maslick]

Year ago I was suggesting to use a worker to minimize latency and async slow down, maybe it's time now to do it. concerning koder it looks indeed promising but what an horror when I saw on its README "supporting EU Digital Covid Certificate validator (vaccination, test"... just for that I won't go there....:-\ and btw, html5-qrcode can easily be compiled in wasm and use a C++ scan library that will replace xzing

Hey @ROBERT-MCDOWELL, I'm the author of Koder. The reason I added EU Digital Covid certificate validator was that back then I had to travel a lot, so I thought I'd add this feature into Koder and share with people so that they could validate their certificates before travelling (to be extra sure their vaccine or negative test certificate is valid and not expired), and without using native apps provided by EU state members. Now, I understand this feature isn't needed anymore, so perhaps I will remove it in a future version.

Either ways, Koder is just a demo project showing such tech as WASM, Webworker and Media Capture browser API for scanning QR/bar codes. You can use it as a basis for your web apps. It's also open source with a permissive MIT license.

I am working on a similar project called Kameroon [1][2]. It's a light-weight version of Koder with some additional features:

• It uses two web workers, working in parallel. First worker uses Zbar C++ library, the other uses Zxing C++ library (both are compiled into WASM). Zxing offers some additional QR/bar code types support (e.g. PDF417, Aztec, DataMatrix)
• The second feature entails the capability to delegate QR/bar code scanning and recognition to Kameroon, thereby relieving developers from the task of integrating QR/bar code scanning functionality into their web application. See details here. Example here [3].

[1] https://github.com/maslick/kameroon
[2] https://kameroon.web.app
[3] https://kameroon-demo.web.app

[maslick]

Hey, just as an update, I'd like to correct an error regarding my previous assertions that scanning a high density QR code requires a significantly higher camera resolution. After completing my implementation using Koder, I discovered that it has no issues scanning my qr codes at a low video resolution, i.e. 640-840 pixels wide. All that upping the resolution does is significantly increase the amount of time it takes to scan.

Correct, the lower the resolution - the shorter the scan time. I use 320x430 px and it works just fine. Additionally, I reduce the scan area by using a crosshair, which makes the image size fed into Webworker even smaller: the square one is 217x200 px, while the rectangular one is 298x192 px.