Today, barcodes are everywhere, and for good reason. These little images of black and white stripes or pixels are powerful data carriers that can connect you to important information – with a simple scan.
Since technological 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 have already covered two of the most popular examples: ML Kit and ZXing.
This time, we will put five popular open-source web libraries under the microscope: ZXing, 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 – the process of creating, building, and maintaining 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 without download.
- 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, eliminating the need to adapt for 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 downloaded first.
Open-source barcode scanners for the web
Open-source projects are based on collaboration. Anyone can view, contribute, modify, and distribute it. As such, this type of software not only promotes community-driven engagement but also requires it. Users collectively improve and adapt the software rather than relying on a single company.
This means that it is generally free. However, users usually have to rely on community-driven support for troubleshooting, bug fixes, and other questions. This lack of dedicated professional support might be challenging depending on the app use case, especially as it requires technical expertise and time on your part.
That being said, let’s dive in and examine the most popular open-source barcode scanning libraries for web development:
- ZXing
- QuaggaJS
- Html5-qrcode
- ZBar
- jsQR
ZXing
ZXing, pronounced as zebra crossing, is a popular open-source barcode image processing library designed to read and generate both 1D and 2D barcodes.
Key features and benefits
Its core is Java-based. However, there are ports in other languages for web integration. It can decode barcodes from images or live camera streams.
Since ZXing primarily focuses on encoding and decoding barcodes, developers have to build their own user interface or use platform-specific ports that include UI components.
Supported barcodes
The original ZXing library supports many barcode types, among them QR Code, Code 128, EAN-13, and Data Matrix. In this way, it covers a substantial part of product, industrial, and 2D barcode symbologies.
Limitations
However, there are some drawbacks to this popular barcode scanning library.
Most notably, ZXing is officially in maintenance mode. It is no longer under active development, and only security patches are accepted from its developer community. Although the ZXing core library remains functional, it receives no feature updates.
This sets off a chain reaction: The library might struggle with new mobile platforms or barcode symbologies, without official fixes in sight. Notably, some users report issues with newer operating systems and devices, such as Android 14 or the iPhone 14 Pro Max.
In community forums, users report that ZXing-based barcode scanners might 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 solution |
| Uses camera or image scanning? | 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 renowned for its precise documentation and integration tutorials that allow for seamless integration into any website or web application.
QuaggaJS provides basic UI in the form of a bounding box, but doesn’t offer any special scanning features, such as multi-scanning.
Supported barcodes
QuaggaJS is known for its reliable scanning of 1D barcodes, which is its biggest drawback at the same time. The library only supports 1D barcodes, and not the more compact and data-dense 2D barcodes. As 2D barcodes are becoming increasingly popular, this is likely to cause issues in the future.
Limitations
Although the original library is no longer maintained, it is continued in Quagga2.
Despite this, like with other open-source projects, some users report performance issues. In certain cases, poor lighting and damaged barcodes seem to pose a challenge to scan accuracy. Although the library appears to perform reliably in desktop environments, there have been reports of the scanner breaking on mobile websites, especially with iPhones.
When facing issues like this, developers have to rely on community support and delayed answers in time-critical situations.
Summary: QuaggaJS
| Supported barcodes | EAN-13, EAN-8, Code 128, Code 39, Code 93, UPC-A, UPC-C, 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 basic UI elements like a bounding box, but a complete UI must be built |
| Uses camera or image scanning? | 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 ready-built UI, which makes it simple to use – and easy to integrate, thanks to extensive documentation and 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 image files, and runs in most desktop and mobile browsers.
One of html5-qrcode’s key benefits is that it is unaffected by the size and position of the barcode, since it works with a barcode locator that searches for barcode-like patterns in images. This brings with it a flexible bounding box that changes size and position based on the barcode, not the other way around.
It has a relatively big bundle size, which might make the library overkill for simple use cases.
Supported barcodes
html5-qrcode is capable of scanning both common 2D codes, such as QR Code and Data Matrix, as well as many common 1D barcodes, like UPC and EAN variants.
Limitations
Under the hood, html5-qrcode uses zxing-js, a barcode library that is no longer officially supported. This not only limits the types of barcodes it can scan, but also means that no further barcodes or fixes will be added to the library in the future.
Users report that the camera initialization fails on Samsung phones in the Chrome browser, and due to a lack of maintenance, developers need to build the fix 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, but not actively developed |
| Language(s) | JavaScript |
| Offers UI? | Provides a simple and complete UI for scanning |
| Uses camera or image scanning? | Both live stream (primary feature) and static image files |
ZBar (WebAssembly-built)
ZBar offers users 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. Experienced 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.
Although ZBar provides powerful scanning functionality, developers generally have to build their own custom UIs and camera setups.
Supported barcodes
The library is primarily known for supporting a wide range of 1D barcodes, on a level comparable to QuaggaJS and html5-qrcode. However, its 2D barcode support is mainly limited to QR Code.
Limitations
Although the project is still actively maintained, updates are few and far between. Community support persists mainly through user discussions, community contributions, and forks such as zbar-wasm.
This might cause 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 |
| Uses camera or image scanning? | Both live stream and static image files |
jsQR
jsQR is a lightweight, pure JavaScript library designed specifically for decoding QR codes from images or video frames. Like the other JavaScript libraries, 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 does not include 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 manual camera integration.
Supported barcodes
jsQR only supports QR codes. On the one hand, this makes it deliver great performance. On the other hand, real-world applications often require scanning several barcode types.
Limitations
jsQR is maintained with a stable community presence and ongoing contributions, offering reliable QR code scanning in JavaScript with minimal ongoing development.
Summary: jsQR
| Supported barcodes | Only QR codes |
| Based on another library? | Standalone library |
| Maintenance status | Actively maintained |
| Language(s) | JavaScript |
| Offers UI? | No, as a pure decoding library, the developer must build the UI |
| Uses camera or image scanning? | Both live stream and static image files |
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 disadvantages that qualify – and disqualify – them for specific operations.
Ask yourself the following questions:
- What barcode types do I need to scan?
- How active is the development and support?
- Does it meet privacy and offline requirements?
- How scalable and future-proof is the solution?
- Will I use it for a personal project or a bigger project?
- What is my budget?
Considerations for choosing an open-source project
Generally, all the introduced open-source barcode scanner libraries 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: Specializes in 1D barcodes, which it scans reliably. At the same time, this restricts its usability, as 2D barcodes are becoming increasingly important.
- Html5-qrcode: Offers a complete solution with UI and supports camera and image files, perfect for when you want to quickly integrate it into your project. However, the resulting larger size might be overkill for simple projects.
- ZBar: Delivers a solid performance for 1D barcodes, making it suitable for general use cases, such as inventory.
- jsQR: Works especially well with uploaded images, which can be useful for processing barcoded documents. If you need your scanner to scan a physical barcode, jsQR might not be the best choice, as it requires manual camera integration.
Comparing them side by side can help you make an informed decision. 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 | ✅ | ❌ | ✅ | ❌ | ❌ |
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 ideal lighting conditions. They thrive on community engagement, and contributing might be exactly what you’re looking for.
This makes them great for personal projects, small-scale internal tools, or apps where barcode scanning is a secondary feature. At the same time, open-source projects are more prone to performance issues, and fixing them requires patience and a deep understanding of the respective library.
If your project needs bullet-proof barcode scanning even in less-than-ideal conditions for mission-critical applications, a commercial solution might be what you’re looking for. These solutions enable you to react to new trends in scanner hardware and come with expert support right when you need it.
Our experience as a Barcode Scanner SDK provider has shown that switching from free and open-source software to a commercial solution can truly elevate a business’s operations.
Take Krónan, an Icelandic discount grocery chain. Switching from ML Kit to the Scanbot Barcode Scanner SDK not only brought barcode scanning support for the more specific DataBar, but also fixed a critical issue involving accidental scans – something that the Krónan team achieved in collaboration with the Scanbot SDK developers.
“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 leverages on-device processing – no connection to third-party servers, no usage-tracking. This helps you comply with strict data security regulations, such as CPRA and GDPR, and also ensures uninterrupted performance in areas with spotty connectivity.
It supports all common 1D and 2D barcodes, and many more. Even more specific barcodes, such as the USPS Intelligent Mail Barcode, can be scanned. The SDK also includes data parsers for 2D barcodes that contain structured data, such as the PDF417 on US driver’s licenses.
All of this is included in a flat annual fee. This fixed-price model enables you to calculate your costs accurately and grow your business operations without growing expenses.
Start testing today
Experience for yourself how the Scanbot Barcode Scanner SDK performs and try 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! 🤳
