Poor performance of html5-qrcode as compared to quaggaJS and scandit

[ghevge]

Hi,

I'm looking for a bare code JavaScript library for one of my projects, and after running some tests in between scandit, quaggaJS and html5-qrcode, html5-qrcode falls on the third place, relatively far from the other two, at both quality and speed of scans.

The appealing part of html5-qrcode would be that it seems to be actively maintained, while scandit (which BTW is the best, performance wise ) is close source and commercial; and quaggaJS is not as good as scandit (close though) but is open sourced, unfortunately not maintained much anymore.

Though my question: Why html5-qrcode performance is so bad ? and any chance to get it at the levels, at least of quaggaJS any time soon ?

Thanks

PS: Please don't take my comments above as offensive, I'm just trying to take a rational decision in my chose.

[ghevge]

For the record, my tests were focused on the UPC bar code scanning

[IlyaDiallo]

Did you try the useBarCodeDetectorIfSupported option ?

[ghevge]

I've just enabled useBarCodeDetectorIfSupported per your suggestion, but I'm seeing the same behavior.

This is how my code looks like:

function showScan() {
	getDialogContentContainer().innerHTML = getHtml5BrcodeReaderView();
	initHtml5BarcodeReader();
	enableVeil();
}

function getHtml5BrcodeReaderView() {
	result = `<div id="qr-reader" style="width: 600px"></div>`;
	return result;
}
function onHtml5ScanSuccess(decodedText, decodedResult) {
    console.log(`Code scanned = ${decodedText}`, decodedResult);
    alert(`${JSON.stringify(decodedText)}  ===== ${JSON.stringify(decodedResult)}`);
}

function initHtml5BarcodeReader() {
	const formatsToSupport = [
		Html5QrcodeSupportedFormats.UPC_A,
		Html5QrcodeSupportedFormats.UPC_E,
		Html5QrcodeSupportedFormats.UPC_EAN_EXTENSION
	];
	let config = {
	  fps: 2,
	  qrbox: {width: 400, height: 400},
	  rememberLastUsedCamera: true,
	  // Only support camera scan type.
	  supportedScanTypes: [Html5QrcodeScanType.SCAN_TYPE_CAMERA],
	  formatsToSupport: formatsToSupport,
	  useBarCodeDetectorIfSupported: true
	};

	let html5QrcodeScanner = new Html5QrcodeScanner(
	  "qr-reader", config, /* verbose= */ false);
	html5QrcodeScanner.render(onHtml5ScanSuccess);
}

Not sure if you played with scandit lib, but just to make an idea how good it is, you can try this demo: https://websdk-label-demo.scandit.com/

I'm playing with a Gatorade Zero bottle, which has the code bar a little warped. Scandit returns the scan results almost immediately, when the whole bar code shows in the image, you don't even have to bring it close. Html5-qrcode rarely returns the scan results, after moving the bottle a while in front of the camera.

[IlyaDiallo]

Not sure if you played with scandit lib, but just to make an idea how good it is, you can try this demo: https://websdk-label-demo.scandit.com/

No I didn't. If you see no changes in performances, maybe that's because your browser has no native scanner for that barcode type. Which browser are you using ?

[ghevge]

Chrome is up to date Version 107.0.5304.88 (Official Build) (64-bit)
On a windows 10 system.
html5-qrcode V 2.2.8

[ghevge]

This is an image that quaggaJS scans correctly, but html5-qrcode is not able to read

[ghevge]

Sounds like Chrome doesn't support barcode detection in windows: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API

[IlyaDiallo]

Sounds like Chrome doesn't support barcode detection in windows: https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API

Indeed, but Android should be the main platform for barcode reading I guess ?

[ghevge]

I'm looking for something that works on any platform / browser

[IlyaDiallo]

They all work on every platform. Scandit is in another league since it's a commercial offer (why buy it if it's not better ?).
Comparing this lib with quaggaJS, you should give more weight to the performances on the most common platform, for instance if html5-qrcode is faster on Chrome/Android but slower on Windows then it's better overall.

[ghevge]

What I mean by "performance" I refer to the quality of scan results, not how resource eager they are. This "performance" will translate in the end user frustration. The better the performance the least frustrated end user will be .

[mebjas]

Thanks for doing performance eval and feedbacks.

How did you eval the speed of scan? Also, do you need the library to be fastest or to be able to return result in acceptable time frame?

Trying to be fastest decoding library out there is not the goal of this project. However, having a good end user experience certainly is.

[ghevge]

Well, I've did an end user approach testing on the 3 libraries I've mentioned above: how much time I have to play with the object in front of the camera, in order to get a read, and how correct that read result is.

I haven't collected any matrixes, but I can tell you that I had the worst experience with the html5-qrcode. Like, a lot of times, not being able to read anything. An example being the image I've attached above.

If you want to play with the other 2 libraries to see the difference you can try these demo apps:
quaggaJS : https://serratus.github.io/quaggaJS/examples/live_w_locator.html
Scandit: https://websdk-label-demo.scandit.com/

As I've mentioned before, the experience I had with the 3 libraries, considering speed of read and accuracy can be ordered like this:

1. scandit (this one is almost flawless and very fast to scan)
2. quaggaJS (relatively fast but also sometimes generates invalid reads)
3. html5-qrcode (quite far from the other two mentioned above, often not reading anything at all, after moving the barcode in all directions in front of the camera for seconds )

[IlyaDiallo]

What I mean by "performance" I refer to the quality of scan results, not how resource eager they are. This "performance" will translate in the end user frustration. The better the performance the least frustrated end user will be .

OK but still you should test on Android with the native reader option to evaluate that configuration. Both html5-qrcode (non-native) and quaggaJS are based on zxing, so reading quality should be similar, except for orientation management. From the quaggaJS doc:

This is not yet another port of the great zxing library, but more of an extension to it. This implementation features a barcode locator which is capable of finding a barcode-like pattern in an image resulting in an estimated bounding box including the rotation. Simply speaking, this reader is invariant to scale and rotation, whereas other libraries require the barcode to be aligned with the viewport.

[mebjas]

@ghevge would you mind doing one more eval using this branch - https://github.com/mebjas/html5-qrcode/tree/performance/minified (html5-qrcode.min.js)

I have implemented some todos I wanted to verify earlier.

[ghevge]

I can give it a try tomorrow. Will let you know

[ghevge]

Hey, I have run some tests with the version you provided, but I'm not feeling any difference from the previous version. Still not able to read the bar code on my Gatorade bottle. Plus the code bar I've attached above, is still not getting read.

[ghevge]

This is another barcode that doesn't get read by html5-qrcode lib. It seems that if the barcodes are a bit distorted (bended, wrinkled , lighted un uniformly), the library is not able to read them at all.

[vlassie66]

Bended, wrinkled , lighted un uniformly is no problem. Try it with another phone.

[mebjas]

Update (version 2.3.1 - #588): Fixed UPC-A and UPC-E scanning issues in zxing-js dependency. It doesn't improve performance but starts to detect these codes reliably.

It'd be nice if we can verify the latest version of library for the stated issues. I'll continue to make improvements with your feedbacks!

Will target performance next (version 2.4.x?)

[karincaceres]

Hi, here trying to scan pdf147 barcodes from a license.. when I zoom in it in a big screen I can scan perfect but from the license it doesn´t. Is there a way to zoom the camera scanner?