Using the ZBar barcode scanning suite in the browser with WebAssembly | Hacker News Reader

Using the ZBar barcode scanning suite in the browser with WebAssembly

barkeywolf.consulting

97 pointsakbarnama26 comments

QR codes are very easy to scan in-browser, but 1D barcodes are significantly more challenging. ~75% of the cannabis industry deals with Metrc, which forces companies to place 1D Code-128 barcode tags on everything they grow or manufacture. As a result, I've spent a lot of time investigating ways to scan these barcodes with a phone camera in a cross-browser webpage.

Ultimately, after much experimentation, the unavoidable conclusion is that the optical scanning solutions are junk. Connecting a crappy $20 HID bluetooth barcode scanner to a phone is so crazily better at scanning a 1D barcode than even the most massaged optical barcode scanning libraries. Industry workers that deal with these barcodes don't even bother with phone camera scanning, it's way too slow and temperamental.

At least processing scanned 1D barcodes at resolutions of 200-300 DPI can be surprisingly hard. After deskewing the tolerances of a traditional EAN barcode are always violated due to aliasing in the image.

Probably a HID scanner has the advantage of a better spatial (horizontal) resolution?

Resolution is certainly a major factor in the scanning acuity. The browser scanning issue is somewhat paradoxical: getting a clear and high-resolution image of the barcode improves scan accuracy, but to achieve this, the camera needs to get so close to the barcode that the autofocus starts to freak out and blur the barcode. Since the browser scanner is using the browser camera API, there's no good mechanism to control the autofocus. It's enough to make you want to throw your phone in the garbage.

I’m confused why you’d need to deskew 1D barcode. 2D have the fiducials meant for image warp corrections. 1D is meant for a laser to sweep across at any odd angle up to diagonal across all the bars. Why not read the pixels in 1 horizontal row of the image and use an algorithm more like the laser does? You’re looking for alternating black/white with unknown period.

This is in fact how ZBar works, see zbar/scanner.c (source: I am the original author of the ZBar QR code support, and I was pretty envious of how easy 1D codes are, conceptually).

At first I was angry when I had to switch to HID barcode readers because I couldn't get an app to do it well, but in the end I was very happy I did it because the ergonomics of a barcode reader are so much better than with a phone or webcam. Not just the mounting options available but also the projected red laser making things reflex-easy.

Has that been a part of your project yet? I ask because I can't easily imagine any situation where the workers would be more efficient or happier using a phone/webcam/etc to do the scannings

The initial idea involved a low-friction onboarding that didn't require any extra hardware - "Just use your phone to scan!". Stupid.

Turns out that workers would rather manually key in the last 5 numbers of a barcode to look it up than screw around with a poorly behaved camera. For the current version of the platform, it's either dedicated hardware scanning or manual ID search, the phone scanning wastes everybody's time.

I'm not sure what they use to do it, but I'm amazed by the "Lose It!" app's barcode scanning feature. It'll scan correctly in the first fraction of a second that a barcode is visible on-screen with bad lighting, motion blur, weird/reflective colors, and crinkling.

Native apps use Android/iOS scanning libraries that are much more effective than the in-browser options. They are still nowhere near as good as hardware scanners.

I built a home-grown scanner like this one (not with ZBar though) for my asset tracking web app (www.assetbots.com) and agree that for 1D barcodes a cheap bluetooth or USB scanner is hard to beat.

We support both (camera and external), but surprisingly a lot of our customers find the camera good enough. Code 128 is our second-most scanned symbology behind QR.

A big factor in my industry was scanning damaged barcodes, which was frequent since they're attached to indoor/outdoor plants and physical boxes that get moved around. They get weathered and scraped.

If there's even slight damage to the barcode, forget the browser scanners, you can scan that thing until the next Olympics and not get a read. HID scanners don't skip a beat.

There’s also the experimental https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Det... — already live in Chrome.

I really wish mdn samples showed output. As is semi-typical, the examples show console.log of the results, but no sample output is provided.

I'm mainly curious whether position information is provided, and whether or not multiple barcodes can be detected at once. Digging further I see the output is an array and cornerPoints are provided, but i keep feeling like these samples only show 50% of what I want to see.

I like to look at API specs to clear questions like this, e.g.

https://wicg.github.io/shape-detection-api/#barcode-detectio... BarcodeDetector#detect returns a sequence of detected barcodes, so depending on the implementation and input quality it should able to extract multiple barcodes.

https://wicg.github.io/shape-detection-api/#dictdef-detected... each DetectedBarcode has boundingBox/cornerPoints.

This would be awesome. I wish it at least worked on Safari iOS. (Firefox seems unlikely: https://bugzilla.mozilla.org/show_bug.cgi?id=1553738)

We have a web app that does QR scanning for event badges, using a JS library, but it's painfully slow compared to the camera app.

Would be interested to know the time it takes to scan a barcode. (Compared to a hardware scanner.)

The answer to that is: It depends.

You can run barcode detection at 30fps on a 1080p video using any modern PC, no problem at all.

But high performance industrial barcode scanners have certain features that would be undesirable in any other application. A greyscale-only sensor for maximum sensitivity, jittery autofocus and autoexposure to respond fast when something appears right in front of the lens, autofocus switching attention so everything in view gets a chance at being in focus, built-in illumination to help avoid motion blur, and so on.

So although the software can provide a good framerate, a laptop webcam may still perform worse than a dedicated barcode scanner.

(zbar is a mixture of good and bad - if you want to experience software barcode detection for yourself your phone's app store probably offers 'scandit' which is closed source but performs pretty well)

Laptop cameras seem to be about 20 years behind cell phone cameras in image quality, my experience is that it’s almost certain that the camera in a PC laptop burns out in 2 years. I’ve had them go bad in macbooks too but I think they hold up better. I’ve never seen a mobile device camera fail without the device failing completely.

Wow, I don’t think I’ve ever experienced a camera burning out on any device, I wonder what you’re skiing with your laptop camera that its burning out so quickly

It might be living in a house which is rather humid and dusty.

I've had two in the past 5 years. One with inverted colors and noise on the image from Logitech and another one from a Predator notebook that could very well be a cabling issue. These days I consider cameras disposable.

I can't tell you about this library in WASM, but I know that ZXing on Android (integrated in Binary Eye [1]) can scan a 1D or 2D barcode instantly (to my human eyes) on my Poco F3, it's fast enough that I need to be careful when scanning serial numbers off of hard drives to scan a specific barcode

My (some what old) iPhone 11 scans a QR code from a full frame from the camera within 30-50ms using this, or some similar WASM solution.

(2018)

Webassembly isn't THAT "new and shiny" anymore in 2024 :)

Hopefully there's an API to access the back camera on phones instead? The front really doesn't have the resolution necessary for many barcodes.

eBay did a similar experiment with ZBar in WebAssembly in 2019: https://innovation.ebayinc.com/tech/engineering/webassembly-...

Reply on news.ycombinator.com