8 ms·

Using the ZBar barcode scanning suite in the browser with WebAssembly

97 points by akbarnama 3y ago

mhb 3y ago
Would be interested to know the time it takes to scan a barcode. (Compared to a hardware scanner.)
- michaelt 3y ago
  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)
  - PaulHoule 3y ago
    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.
    - nolongerthere 3y ago
      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
      - PaulHoule 3y ago
        It might be living in a house which is rather humid and dusty.
      - DoctorDabadedoo 3y ago
        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.
- yonatan8070 3y ago
  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
- steinso 3y ago
  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.
chkuendig 3y ago
(2018) Webassembly isn't THAT "new and shiny" anymore in 2024 :)
admp 3y ago
There’s also the experimental https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Det... — already live in Chrome.
- jauntywundrkind 3y ago
  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.
  - admp 3y ago
    I like to look at API specs to clear questions like this, e.g. https://wicg.github.io/shape-detection-api/#barcode-detection-api 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-detectedbarcode https://wicg.github.io/shape-detection-api/#dictdef-detected... each DetectedBarcode has boundingBox/cornerPoints.
- deleted 3y ago
  [deleted]
- mgbmtl 3y ago
  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 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.
kylejrp 3y ago
eBay did a similar experiment with ZBar in WebAssembly in 2019: https://innovation.ebayinc.com/tech/engineering/webassembly-at-ebay-a-real-world-use-case/ https://innovation.ebayinc.com/tech/engineering/webassembly-...
mfrisbie 3y ago
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.
- sllabres 3y ago
  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?
  - mfrisbie 3y ago
    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.
  - TheJoeMan 3y ago
    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.
Groxx 3y ago
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.

97 points by akbarnama 3y ago

mhb 3y ago

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

michaelt 3y ago
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)
- PaulHoule 3y ago
  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.
  - nolongerthere 3y ago
    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
    - PaulHoule 3y ago
      It might be living in a house which is rather humid and dusty.
    - DoctorDabadedoo 3y ago
      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.
yonatan8070 3y ago
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
steinso 3y ago
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.

chkuendig 3y ago

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

admp 3y ago

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

jauntywundrkind 3y ago
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.
- admp 3y ago
  I like to look at API specs to clear questions like this, e.g. https://wicg.github.io/shape-detection-api/#barcode-detection-api 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-detectedbarcode https://wicg.github.io/shape-detection-api/#dictdef-detected... each DetectedBarcode has boundingBox/cornerPoints.
deleted 3y ago
[deleted]
mgbmtl 3y ago
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 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.

kylejrp 3y ago

eBay did a similar experiment with ZBar in WebAssembly in 2019: https://innovation.ebayinc.com/tech/engineering/webassembly-at-ebay-a-real-world-use-case/ https://innovation.ebayinc.com/tech/engineering/webassembly-...

mfrisbie 3y ago

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.

sllabres 3y ago
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?
- mfrisbie 3y ago
  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.
- TheJoeMan 3y ago
  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.

Groxx 3y ago

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.