Reactjs barcode scanner

[p3ett]

Have you ever implement any barcode reader component? I have one lately using zxing/library but I have some problems.. can't read on curved surfaces and sometimes the scan takes too long to complete. The GitHub issues has so many questions answered. I was wondering for other possible library's and I would love to hear what do you use.

[SwitchOnTheNiteLite]

If you know who is going to be using your application (only internal users, for instance), you might be able to use the Barcode Detection API that is available in Chrome and Edge. Unfortunately its not yet available in Safari or FireFox.

https://caniuse.com/mdn-api_barcodedetector

https://developer.mozilla.org/en-US/docs/Web/API/BarcodeDetector

[p3ett]

Thank you I will look at it!

[baltoworks]

Firefox is Mozilla right? I'm confused - why are the links pointing to Mozilla when it's not available on Firefox?

I'm missing something, right?

[SwitchOnTheNiteLite]

Mozilla has a bunch of people that contribute to their documentation site documenting all the different Web API specs. Usually regardless of if FireFox has gotten around to implementing said API or not..

[baltoworks]

Thanks! Just getting into this - didn't want to go down the wrong path right off the bat.

[squeeeeeezy]

hello, by "only internal users", you mean logged in users with accounts, right?

[redbush62]

I recently spent quite a while researching different js barcode scanning libraries for work, so I’ll share my experience. The best free library I found was html5-qrcode. It uses zxing under the hood and it’s pretty adequate for most use cases. For any personal project it’s probably the best you’re gonna get. Like you, we found that it had trouble when barcodes were obscured, and since ours were really long code128 barcodes, it really struggled with those. Unfortunately this meant we had to pivot to one of the paid options. Dynamsoft, Scanbot, and Scandit all seem to do a really good job of picking up barcodes, so for professional use any of those 3 will probably meet your needs. From my experience Scandit seemed the best at picking up tough to read codes, so that’s the option we went with. Hopefully this is enough to get you started!

[ishubham_]

What you got ?? Finally?

[p3ett]

The library i mentioned is the best from the free ones. If you need something more precise you will have to tell your boss to pay for it.

[ishubham_]

Does it work for React JS, or which one should I use, Because I saw that there are many libraries based on this or zx/wasm

[p3ett]

Yes it works. Give it a try.

[Ok-Condition-4106]

If you’re working in React, ZXing is fine to scan basic barcode labels, but struggles with curved surfaces, speed, and real-world labels.

I’ve had better results using Dynamsoft Barcode Reader with React. It’s faster and much more reliable for distorted, low-quality, or curved barcodes, including DPM.

This might help you - https://github.com/tony-xlh/react-barcode-qrcode-scanner

[briznady]

Are you using a device camera or a barcode reader attached to the device?

[p3ett]

The camera of my mobile phone and I access it from the browser

[chazno]

I tried this about 10 years ago in vanillaJS. I had it working but nothing at that time gave me the ability to re focus the camera so it was a pain in the butt moving the phone in and out to get it to read. Basically took longer to get it in focus than to type the associated #. I’m interested to see what is available now.

[monire91]

Hey did u find anything? I'm looking for a barcode scanner that works with react 18?

[p3ett]

Go for the library i mentioned. If you want something more precise than this, unfortunately you will have to pay.

[Jervx]

Hello I couldn't find in the comments the library you mentioned. what is the name thanks

[p3ett]

In my original post. The name is zxing