We created this article in partnership with Pixelverse. Thank you for supporting the partners who make SitePoint possible.
Barcodes are ubiquitous in almost any business that deals with physical items. Whether it’s a parcel going out for delivery, serial numbers on devices, concert tickets or receipts, chances are there’s at least one barcode involved. Android Barcode Scanner
Traditionally, these barcodes were read using dedicated scanning equipment that transmits the barcode value to an application that consumes it, either via a cable connection or a wireless link like Bluetooth. The scanner emulates a keyboard and sends the characters in the barcode as virtual key presses.
But these days, everyone is carrying a smartphone in their pocket — a high-powered, connected computing device with a camera. Developers can build apps with a UI tailored to their specific use case, scan barcodes using the camera and directly link it to data in the cloud. Some examples include:
In the beginning, these apps were implemented as native apps for Android and iOS. With the modern Web’s capabilities, these apps can now instead be run on a platform everybody knows: the web browser.
STRICH is a JavaScript library that brings real-time 1D/2D barcode scanning to the browser. Behind the strange-sounding name (Strich is German for “line” or “stroke”, the building blocks of barcodes) is a lean library distributed via npm — with zero dependencies, allowing for easy integration into any web app. The built-in scanning UI provides user-friendly features like camera selection, tap-to-focus and flashlight (for low-light conditions), further accelerating development. Typescript bindings are available, along with well-maintained reference documentation.
All commonly used barcode types are supported:
STRICH leverages technologies like WebGL and WebAssembly to perform the heavy lifting of processing the camera stream and achieving native-like performance in locating and decoding barcodes. This allows for highly efficient and reliable scanning of barcodes.
Launched in early 2023, STRICH is a relatively young product and under constant development. The current focus is on improving recognition rates for existing barcode types under difficult conditions (uneven lighting, out-of-focus codes, damaged codes etc.), but support for less common barcode types such as Micro QR is also in the works.
Opting for web apps instead of native apps offers some unique advantages, which we’ll go into now.
Instead of having to build for multiple platforms (iOS and Android, possibly Windows) natively or using a hybrid framework like Ionic/Capacitor or Xamarin, you can just build a web app from a single codebase. With recently added and now widely supported PWA capabilities like Push Notifications and Install to Home Screen, there’s often no good reason for developing a native app, especially for in-house apps.
If you’re building an app to scan barcodes, chances are you’re building an in-house app. These apps are typically only used by employees, and publishing to Apple’s App Store or Google Play can be a real hassle:
The last point in particular is a common hurdle, as these types of apps often require connectivity to internal backends or authentication credentials that can’t be mocked for testing. Rejected app updates, frequent manual intervention and inexplicable delays in publishing are common — not to mention the risk of a business-critical app being removed from the App Store because someone forgot to act on an email.
Web apps, in comparison, are easy to distribute and don’t require specialized Android or iOS resources or personnel. Deploying a web app is typically automated using a CI/CD pipeline, with no user interaction or delays involved. A web app is always up to date, there’s no review process, and you’re in complete control of the distribution channel.
Going “no app” is also increasingly seen as a positive differentiator, as users are becoming tired of installing apps on their phone’s crowded home screen — especially ones they don’t use on a daily basis.
Offering a delightful browser-based experience with no extra hoops to jump through is appreciated, especially by tech-savvy folks. And with Progressive Web Apps (PWAs), you can still add Install to Home Screen or offline capabilities.
For in-house apps, having a QR code displayed in a prominent location is an easy way to launch your app, as almost everyone is familiar with the concept of scanning a QR code to open a website after the pandemic.
Building an app that scans barcodes is very easy with STRICH. To illustrate, we’ll build a ticket scanner app.
STRICH requires a valid license key to use. To obtain a key, you need to create an account in the Customer Portal and start the free trial. You then specify the URLs under which your app is reachable and create the key.
In the example below, we’re adding three URLs: one for development, one for a staging environment, and one for production.
Note: apps that require camera access need to be served from a secure context, which means the connection needs to be secure (HTTPS) or via localhost. Tools like ngrok make this easy by mapping a local port to a publicly accessible URL with an automatically generated TLS certificate. But you don’t need them if you’re comfortable setting up certificates yourself.
Once you’ve obtained the license key for your app, you can go ahead and install the SDK. If you’re using npm to manage your dependencies, you can use npm install just like with any other dependency:
Then, in your application’s startup code, provide the license key to the StrichSDK.initialize() method:
When the promise resolves, the SDK is ready to use.
Now we can start implementing the actual barcode scanning flow.
For this article, we’ll build a simple ticket scanner. The app will scan the barcode on a ticket, display the ticket number, validity and information on the holder. Looking up the latter would probably involve an HTTP request, which we’ll omit for the sake of simplicity.
Most scanning apps adopt a split-screen layout, where the upper part contains the camera preview and the lower part provides process context, result display and actions. Our ticket scanning app will adopt a layout composed of the following elements:
Header: Displays a title for guidance.
Scanning Area: Where the camera feed will be shown.
Data: The scanned ticket number along with the name and age of the holder, which might have been fetched from a service.
Actions: A set of actions to take after scanning a ticket. Actions should be located at the bottom of the screen to provide easy thumb access.
With the layout in place, we can start putting together some HTML, CSS and JavaScript.
The HTML for the app is shown below. I’ve omitted the styling as it‘s not very interesting. The full source code of the example is available on GitHub:
Let’s write some JavaScript to connect a barcode reader to the HTML. The element that will host the barcode reader has an ID value of scanner, so it can be referenced through a CSS selector #scanner. Assuming our tickets have Code 128 barcodes (the most common type, except for the EAN/UPC codes used in retail), we’ll configure the BarcodeReader as follows:
We store a reference the newly created BarcodeReader in a variable so we can access it later.
When a barcode is detected, we’ll invoke displayTicket() to display its the ticket number, along with some mock data on the ticket holder. In a real-life app, this would be the place where we would issue an HTTP request using the fetch API and look up data associated with the ticket from a database.
Here, we just display the values, pause the scanning and enable the action buttons. The action buttons will clear the displayed values and resume the barcode scanning:
To keep things as simple as possible, I’ve chosen to put the entire app in a single HTML file, with the CSS styles and JavaScript code inlined in the HTML. This is certainly not a recommended practice, but it keeps the example lean and serves as a useful reminder that web app development can be this simple!
The single HTML file in its entirety is available on GitHub.
Here’s a demo of the app doing its work:
In this article, I’ve shown how to create a simple ticket scanning app that uses the STRICH Barcode Scanning SDK. Web apps offer compelling advantages over native apps, especially for in-house apps that don’t need to be in the App Store. Modern web browsers, combined with a capable SDK like STRICH, make creating user-friendly barcode scanning apps fast, cost-efficient and fun.
Software entrepreneur, husband and father. Computer vision enthusiast. Building STRICH, the barcode scanning library for the web.
company tablet This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.