Menu
I would like to have a camera view, which uses device's camera and detects barcodes' data. How can it be done in a React app?
Not for React Native. It has to work both on desktop and mobile using browser.
940
1. 3D Touch the Chrome app icon and choose Scan QR Code. 2. Pull down to reveal the Spotlight search box, search for "QR" and select Scan QR Code from Chrome's listing.
As long as you use a barcode library implemented in JavaScript, you can make your web apps work on both desktop and mobile. I've written an article - How to Build Web Barcode Scanner Using React and Webcam which shows you how to build such an app from scratch using Dynamsoft JavaScript Barcode SDK.
Physical barcode scanners act as a keyboard, so if you set focus to the text field where you want the code to be placed by default, once you scan the code, it will appear in the text field, the scanner can be configured to add an (Enter) or (Tab) at the end, so that you can handle this to process the scanned value. – Bilal Dec 19 '18 at 19:00
Scan barcodes from your websites using any camera-equipped device. Whether your app is used by your employees or by your customers, you just want it to work – quickly and reliably. That’s why we developed our Barcode Reader for the Web using machine-learning algorithms. You can now benefit from:
1. Create a react application First of all, create a simple react application using the create-react-app. Run the following command to create an app. 2. Install quaggaJS package Run the following command to install quaggaJS to implement a barcode scanner.
As long as you use a barcode library implemented in JavaScript, you can make your web apps work on both desktop and mobile.
I've written an article - How to Build Web Barcode Scanner Using React and Webcam which shows you how to build such an app from scratch using Dynamsoft JavaScript Barcode SDK.
Dynamsoft JavaScript Barcode SDK is commercial software. If you want to use open-source SDK for free, you can use ZXing as the substitution.
Here is the source code:
https://github.com/yushulx/zxing-cpp-emscripten
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
