Today, barcodes are everywhere, and for good reason. These little images of black and white stripes or pixels are powerful data carriers that connect you to vital information with just a simple scan.
Since advances in image processing allowed smartphones to become high-performance barcode scanners, numerous free and open-source barcode scanning libraries have popped up. In a previous article, we already covered two of the most popular: ML Kit and ZXing.
This time, we will look at five popular open-source web libraries: ZXing ports, QuaggaJS, html5-qrcode, ZBar, and jsQR.
Let’s start with a quick overview of why web development might be better suited for your project than native development.
Why choose web development?
More and more businesses are choosing web development – websites and web apps – over native apps. Several benefits are driving this trend:
- Cross-platform compatibility: Web apps are accessible via any browser on multiple devices and platforms.
- Faster development: Building a single, platform-agnostic web app instead of several native solutions allows smaller teams to roll out releases more quickly.
- Easier maintenance and updates: Updates are deployed on the server and instantly available to all users, whereas native apps require app store approval and downloads for updates.
- Consistent user experience: Web apps provide a uniform interface regardless of device. There is no need to adapt to each operating system’s design guidelines.
- Increased reach and visibility: Web apps can be found and indexed by search engines. They can be used instantly without needing to be installed first.
Open-source barcode scanners for the web
Anyone can view, contribute, modify, and distribute open-source code. As such, this kind of software project both promotes and depends on community engagement. The users collectively maintain and improve the software rather than relying on a single company.
Open-source software is generally free. However, users will have to rely on community support for troubleshooting, bug fixes, and other questions. This takes time – and often considerable technical expertise. Depending on the use case of your app, this absence of professional support can be a major obstacle.
That said, let’s dive in and take a look at the most popular open-source barcode scanning libraries for web development:
- ZXing
- QuaggaJS
- html5-qrcode
- ZBar
- jsQR
ZXing
ZXing, pronounced “zebra crossing”, is a popular open-source barcode image processing library for reading and generating both 1D and 2D barcodes.
Key features and benefits
The original library is Java-based. However, there are ports in other languages for web integration. It can decode barcodes from both images and live camera streams.
Since ZXing is a low-level library focused on encoding and decoding barcodes, developers have to build their own user interface. Alternatively, they can use platform-specific ports that do include UI components.
Supported barcodes
The original ZXing library supports a substantial range of product, industrial, and 2D barcode symbologies, among them QR Code, Code 128, EAN-13, and Data Matrix (see the table below).
However, there are some drawbacks.
Limitations
Most notably, ZXing is officially in maintenance mode. It is no longer under active development, and only security patches are accepted by its developer community. Thus, although the ZXing core library remains functional, it receives no feature updates.
The library may therefore struggle with new mobile platforms or barcode symbologies, without official fixes in sight. Notably, users have reported issues with newer operating systems and devices, such as Android 14 or the iPhone 14 Pro Max.
In community forums, users have also noted that ZXing-based barcode scanners struggle with damaged, blurry, and tiny barcodes, or when scanning in low light.
Summary: ZXing
| Supported barcodes | UPC-A, UPC-E, EAN-8, EAN-13, ITF (Interleaved 2 of 5), Code 39, Code 93, Code 128, Codabar, QR Code, Data Matrix, Aztec, PDF417, MaxiCode, RSS-14, RSS-Expanded |
| Based on another library? | No, it’s a foundational library |
| Maintenance status | Actively maintained, but no active development |
| Language(s) | Based on Java, with ports to many other languages |
| Offers UI? | No, developers must build their own |
| Input source? | Both live stream and static image files |
QuaggaJS
QuaggaJS locates and decodes various 1D barcode symbologies in the user’s camera stream.
Key features and benefits
The JavaScript-only library is well-documented, and there are integration tutorials that aid seamless integration into any website or web application.
QuaggaJS provides basic scanning functionality as well as a basic UI in the form of a bounding box. It doesn’t offer any advanced features, such as multi-scanning.
Supported barcodes
QuaggaJS is known for its reliable scanning of 1D barcodes (see table below). It does not, however, support any of the more compact and data-dense 2D barcodes. As 2D barcodes are increasingly popular, this lack is likely to cause issues in the future.
Limitations
Although development of the original library has ended, the Quagga2 fork is being actively maintained.
Nonetheless, as with other open-source projects, some users report performance issues. Poor lighting and damaged barcodes, in particular, negatively impact scan accuracy. Additionally, though the library appears to perform reliably in desktop environments, there have been reports of the scanner breaking in mobile browsers, especially on iPhones.
Summary: QuaggaJS
| Supported barcodes | EAN-13, EAN-8, Code 128, Code 39, Code 93, UPC-A, Codabar, ITF (Interleaved 2 of 5), 2 of 5 |
| Based on another library? | No, it’s a standalone library |
| Maintenance status | Quagga2 fork is actively maintained |
| Language(s) | JavaScript |
| Offers UI? | Provides only basic UI elements like a bounding box |
| Input source? | Both live stream and static image files |
html5-qrcode
As we mentioned in the beginning, ZXing has many community-maintained ports – and html5-qrcode is one of them. Based on zxing-js, this web app scans 1D and 2D barcodes with just a few lines of HTML and JavaScript code.
Key features and benefits
It comes as a complete solution with a ready-built UI, which makes it simple to use – and easy to integrate, thanks to extensive documentation and accessible integration tutorials. This makes it a good choice for quick prototyping or personal projects.
html5-qrcode supports scanning from the camera live stream as well as from image files, and runs in most desktop and mobile browsers.
One of html5-qrcode’s advantages is that it is agnostic to the size and position of the barcode, since it includes a barcode locator that searches for barcode-like patterns in images. This lets it use a flexible bounding box that changes size and position based on the barcode, rather than relying on a fixed finder frame.
Its end-to-end barcode scanning approach may make the library overkill for simple use cases, and also results in a relatively large bundle size.
Supported barcodes
html5-qrcode is capable of scanning both common 2D codes, such as QR Code and Data Matrix, many common 1D barcodes, like UPC and EAN variants.
Limitations
Under the hood, html5-qrcode uses zxing-js, a JavaScript port of the ZXing barcode library that is no longer maintained. html5-qrcode itself, too, is currently unmaintained.
This not only limits the types of barcodes it can scan, but also means that no further barcodes or fixes will be added to either library in the future.
Some users have, for instance, reported that the camera initialization fails on Samsung phones in Chrome. Develpers will need to find fixes for such issues themselves.
Summary: html5-qrcode
| Supported barcodes | QR Code, Aztec, Code-39, Code-93, Code-128, ITF (Interleaved 2 of 5), EAN-13, EAN-8, PDF417, UPC-A, UPC-E, DataMatrix, MaxiCode, RSS-14, RSS-Expanded |
| Based on another library? | Built on ZXing, presents as a standalone solution |
| Maintenance status | In maintenance mode, without developer activity |
| Language(s) | JavaScript |
| Offers UI? | Provides a simple, but complete UI for scanning |
| Input source? | Both live stream (primary feature) and static image files |
ZBar (WebAssembly-built)
ZBar offers barcode reading from various sources, such as video streams and image files. Written in C, it can be compiled into WebAssembly (WASM), a technology that lets high-performance code run inside the browser. Developers can compile it themselves or opt for one of the ready-made WASM packages, such as zbar-wasm.
Key features and benefits
The open-source library provides orientation detection, enabling it to read barcodes in both horizontal and vertical orientations. Furthermore, it can detect multiple barcodes per frame, allowing users to scan multiple barcodes simultaneously.
ZBar provides powerful scanning functionality, but it is a low-level library. Developers generally have to build their own custom UIs and camera setups.
Supported barcodes
The library is supports a wide range of 1D barcodes, similar to QuaggaJS and html5-qrcode. However, its 2D barcode support is limited to QR Code.
Limitations
Although the project is still actively maintained, updates are few and far between. Community support is offered mainly through user discussions, community contributions, and forks such as zbar-wasm.
There are some indications of performance issues on newer device models. For instance, users have reported issues on iOS devices, particularly the iPhone 14 Pro and Pro Max.
Summary: ZBar
| Supported barcodes | EAN-13, EAN-8, UPC-A, UPC-E, Code 128, Code 93, Code 39, Codabar, ITF (Interleaved 2 of 5), QR Code |
| Based on another library? | Standalone library |
| Maintenance status | The official project is largely dormant, but community-driven forks are active |
| Language(s) | Primarily C, with bindings to other languages |
| Offers UI? | Has GUI bindings for toolkits like Qt and GTK+ for custom UI building |
| Input source? | Both live stream and static image files |
jsQR
jsQR is a lightweight, pure JavaScript library designed specifically for decoding QR codes from images, including video frames. Its simplicity and efficiency make it a popular choice among open-source barcode scanning libraries.
Key features and benefits
jsQR takes raw image data and locates, extracts, and parses any QR code found in the image.
As a standalone QR code decoding library, it has no built-in support for accessing the device camera or managing camera streams. Consequently, developers need to use other web APIs to capture a video from the camera and then extract the image data from the video frames. However, the jsQR demo and documentation provide examples of how to set up such a manual camera integration.
Supported barcodes
jsQR only supports QR codes. On the one hand, this makes it deliver great performance with a small footprint. On the other hand, real-world applications often require scanning several barcode types.
Limitations
jsQR development is dormant. It is currently a reliable option for QR code scanning in JavaScript, but this may change as browsers and operating systems evolve.
Summary: jsQR
| Supported barcodes | Only QR codes |
| Based on another library? | Standalone library |
| Maintenance status | Dormant |
| Language(s) | JavaScript |
| Offers UI? | None. |
| Input source? | Static images, video frames can be provided |
Which barcode scanner should you use?
Finding the right barcode scanner for your project always requires extensive testing. Each library has its own perks and flaws that qualify – or disqualify – them for specific applications.
To start with, ask yourself the following questions:
- Which barcode types do I need to scan?
- How active is development, and what kind of support can I expect?
- Does it meet my privacy and offline requirements?
- How scalable and future-proof is the solution?
- Will I use it for a personal project or a commercial project?
- What is my budget?
Considerations for choosing an open-source project
All the open-source barcode scanner libraries we’ve mentioned excel in specific use cases.
- ZXing: The project is popular for its versatility. It supports a wide range of 1D and 2D barcodes, including more complex types like Data Matrix and PDF417.
- QuaggaJS/Quagga2: Specializes in 1D barcodes, which it scans reliably. At the same time, this restricts its future usefulness, as 2D barcodes are becoming increasingly important.
- html5-qrcode: Offers a complete solution with UI and supports camera streams and image files, perfect for quickly implementing barcode scanning in your project. However, it might be overkill for simple projects.
- ZBar: Delivers a solid performance on 1D barcodes, and also reads QR Codes. It’s suitable for general use cases, such as inventory.
- jsQR: Works well for reading QR Codes in image files, which can be useful for processing barcoded documents. If you need your scanner to scan a physical QR Codes, jsQR might not be the best choice, as it requires manual camera integration.
In the following table, you can see at a glance which barcodes the respective libraries support.
| Barcode types | ZXing | QuaggaJS | html5-qrcode | ZBar | jsQR |
| UPC-A | ✅ | ✅ | ✅ | ✅ | ❌ |
| UPC-E | ✅ | ❌ | ✅ | ✅ | ❌ |
| EAN-8 | ✅ | ✅ | ✅ | ✅ | ❌ |
| EAN-13 | ✅ | ✅ | ✅ | ✅ | ❌ |
| ITF (Interleaved 2 of 5) | ✅ | ✅ | ✅ | ✅ | ❌ |
| 2 of 5 | ✅ | ✅ | ❌ | ❌ | ❌ |
| Code 39 | ✅ | ✅ | ✅ | ✅ | ❌ |
| Code 93 | ✅ | ✅ | ✅ | ✅ | ❌ |
| Code 128 | ✅ | ✅ | ✅ | ✅ | ❌ |
| Codabar | ✅ | ✅ | ❌ | ✅ | ❌ |
| RSS-14 | ✅ | ❌ | ✅ | ❌ | ❌ |
| RSS-Expanded | ✅ | ❌ | ✅ | ❌ | ❌ |
| QR Code | ✅ | ❌ | ✅ | ✅ | ✅ |
| DataMatrix | ✅ | ❌ | ✅ | ❌ | ❌ |
| Aztec | ✅ | ❌ | ✅ | ❌ | ❌ |
| PDF417 | ✅ | ❌ | ✅ | ❌ | ❌ |
| MaxiCode | ✅ | ❌ | ✅ | ❌ | ❌ |
| SQ Code (Secure-QR-Code) | ✅ | ❌ | ❌ | ✅ | ❌ |
Open-source libraries are typically free to use, which is a significant advantage if you have a limited budget. These solutions often perform well with high-quality standard barcodes in good lighting conditions.
This makes them great for personal projects, small-scale internal tools, or apps where barcode scanning is a minor feature. At the same time, open-source projects are prone to performance issues. Absent formal support, fixing them requires patience and a deep understanding of the respective library. However, contributing might actually be exactly what you’re looking for, and these libraries thrive on community engagement.
If your project needs bullet-proof barcode scanning under real-world conditions for mission-critical applications, you are usually better off choosing a commercial solution. Such solutions enable you to keep up with developments in barcode technology, including new symbologies and changes in scanner hardware, especially mobile devices. Moreover, they come with expert support right when you need it.
Our experience as a Barcode Scanner SDK provider has shown us that switching from free and/or open-source software to a commercial solution can truly elevate a business’s operations.
Take Krónan, an Icelandic grocery chain. Moving from ML Kit to the Scanbot Barcode Scanner SDK not only enabled DataBar code scanning, but also let the Krónan team address a major source of user frustration: unintentional scans of barcodes in the background. A barcode size filter, created in collaboration with the Scanbot SDK developers, now prevents these spurious scans
“With ML Kit, we couldn’t read DataBar codes at all. We solved this by switching to the Scanbot SDK, which not only added DataBar support, but also fixed a critical issue involving accidental barcode scans. It only took us a few weeks from testing to roll-out, not least thanks to the excellent support from the Scanbot SDK developers.” Hörður Már Jónsson, Head of Digital Development @Krónan
Scanbot SDK at a glance
The Scanbot Barcode Scanner SDK exclusively uses on-device processing. Consequently, there are no connections to third-party servers, nor is there any usage tracking. For one, this helps you comply with strict data security regulations, such as CPRA and GDPR. For another, it ensures uninterrupted performance in areas with spotty connectivity.
The SDK supports all common 1D and 2D barcodes, as well as a large range of niche industry barcodes – the USPS Intelligent Mail Barcode, for instance. The SDK also includes data parsers for 2D barcodes that contain structured data, such as the PDF417 on US driver’s licenses.
Thanks to our customizable Ready-to-Use UI components, you can build a functioning barcode scanner web app in minutes.
All of this is included in a flat annual fee. The fixed-price model enables you to calculate your costs accurately – and to grow your business operations without increasing your expenses.
Start testing today
Experience the Scanbot Barcode Scanner SDK’s performance for yourself by trying our free barcode scanner demo apps. You can also integrate the Scanbot SDK into your app with a free trial license and test it without restrictions for seven days.
If you want to build your own barcode scanning app in just a few minutes, you can do so thanks to the Web Barcode Scanner SDK and its Ready-to-Use UI Components.
First, create an index.html with some boilerplate code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>Web Barcode Scanner</title>
</head>
<body>
</body>
</html>To set up your barcode scanner, do the following:
- Create a button that calls up the scanning interface when clicked.
- Include a
<p>element on the page for displaying the scanning result. - Import the Scanbot Web SDK using a CDN.
- Process the scan result before displaying it on the page.
The result will look something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
/>
<title>Web Barcode Scanner</title>
</head>
<body style="margin: 0">
<button id="start-scanning">Start scanning</button>
<p id="result"></p>
<script type="module">
import "https://cdn.jsdelivr.net/npm/scanbot-web-sdk@7.0.0/bundle/ScanbotSDK.ui2.min.js";
const sdk = await ScanbotSDK.initialize({
enginePath:
"https://cdn.jsdelivr.net/npm/scanbot-web-sdk@7.0.0/bundle/bin/barcode-scanner/",
});
document
.getElementById("start-scanning")
.addEventListener("click", async () => {
const config =
new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration();
const scanResult = await ScanbotSDK.UI.createBarcodeScanner(config);
if (scanResult?.items?.length > 0) {
document.getElementById("result").innerText =
`Barcode type: ${scanResult.items[0].barcode.format} \n` +
`Barcode content: "${scanResult.items[0].barcode.text}" \n`;
} else {
document.getElementById("result").innerText = "Scanning aborted by the user";
}
});
</script>
</body>
</html>You can then simply open the file in your browser or serve it via localhost to get started scanning barcodes.
To learn more about how to customize the barcode scanner, head over to the documentation.
Happy scanning! 🤳
