Teaching web applications to read QR codes and barcodes
On one of our projects, we were faced with the need to add barcode scanning to the web application for product accounting. We checked all the available solutions that offer the ability to read barcodes online from a web application, and we talk about their pros and cons in the article.
We explore the technology behind barcode detection, discussing its applications, the algorithms involved, and how it's implemented in various industries. The article provides insights into the challenges of barcode recognition and the solutions available to overcome them.
Barcodes and QR codes are almost everywhere. We buy goods, pay bills, and even make purchases with them. Therefore, our customers require barcode scanner software solutions. On one of our projects in 2020, we were faced with the need to add barcode scanning to the Loreal Academy web application for product accounting. As a result, we checked all the available solutions that offer the ability to read barcodes online from a web application, and we will talk about their pros and cons below.
If the main product is a mobile application, there is no recognition problem. Most modern smartphones have separate cores for processing graphics and video, and then the main application can use their power to recognize codes.
However, most corporate software and CRMs are web applications, so B2B requires browser-based barcode reader software solutions. Teaching a web application to read barcodes was a very difficult task a couple of years ago, since it is impossible to access computing power through a browser. More often, businesses chose separate devices for this purpose, which worked well, but was quite expensive. Later, smartphones came to the rescue, but they required a separate application that needed to be synchronized with the main system. There are also paid services and huge libraries, and we will talk about them and other SDKs for decoding barcodes below.
JavaScript libraries for image recognition
How do they work? Usually, these free JavaScript QR code scanner libraries are easily integrated into web applications, but they typically do not work well. They try to recognize bitmap images from the camera right in the browser, but they are very unreliable at this task. For example, one of the popular JS QR code decoder libraries in our tests gave only one correct recognition out of five. Also, a huge disadvantage of this type of free barcode reader software is its gigantic size, which affects the performance of the entire application.
Pros: easy integration, low cost or free
Cons: extremely low percentage of correct recognitions
Paid services
How do they work? They allow you to scan a QR code with a browser by delegating recognition to a third-party service that processes your images on their servers for a fee. An external API, similar to payment gateways, is simply added to the application. The main issue is paying for this service on time. Fees vary by plan and provider; for example, you can pay by the number of scans or by time. But this kind of barcode scanning software is usually quite expensive.
Pros: easy integration, high performance
Cons: high costs, strict payment schedule
Standalone application
How does it work? You can create a barcode reader application in React Native that will pass information to the main system. In this case, recognition is reliable, but the system is incohesive. The user has to exit the main application, switch to the application for recognition, and generally use a mobile device. Authorization may also be required. This reduces the speed of work. You can, of course, make a full-fledged mobile version of the main web application, but this is a long, expensive task and requires further support. There is also the option to create a small application that will only take on the function of reading codes.
Pros: high percentage of recognition, flexibility, huge customization options
Cons: development time, need for further support, cost
Shape Detection API
How does it work? This is an API developed by Mozilla that allows you to access your computer's computing resources through a browser. In general, the tool can be used to recognize any images and even faces, and there is a separate Barcode Detection API for barcodes, made on the same platform. This free barcode scanner API for web applications is currently available on all Chromium-based browsers.
It is free of charge and does an excellent job of recognizing even blurry images. Our Loreal Academy project was one of the first to use it. It went into production a week after the release of the API. Before that, we tested the beta version, and it turned out that this was the easiest and most convenient option.
Pros: free, high recognition rate
Cons: not supported by all browsers (compatibility can be checked here)
Conclusion
The introduction of the Shape Detection barcode scanning API has revolutionized the market for browser-based barcode reading solutions. It can compete with both paid services and free solutions, due to easy integration and a high percentage of correct recognitions. Plus, with the growth in popularity, the algorithm is constantly being improved. Perhaps, other companies will soon develop similar solutions for barcode scanning in browsers, offering more features or code formats.
If you are looking for the best solutions for corporate software, please contact us using the form below, and our experts will determine which tools are ideal for your project.
Surprisingly, barcodes have been a headache for web application developers for quite some time. Probably, the pandemic and the explosive popularity of delivery services influenced the development of tools for their recognition. It's great that we were among the first to test and implement a new API in a project for our client.
