Using BarcodeDecoder in javascript

In the past the APIs like MediaDevices.getUserMedia(), local file reading API made it fairly easy to capture images and process them. This made libraries like @mebjas/html5-qrcode possible — which today allows developers to easily integrate QR code or bar code scanning capabilities to their web applications. Several developers have used the library to build Android applications using Cordova. Now the Web Platform Incubator Community Group has come with a draft for shape detector APIs which aims at providing access to accelerated shape detectors (like human faces, QR codes, bar codes, etc) for still images and live image feeds. This is particularly exciting for mobile devices which today comes with hardware chips which are highly performant at certain tasks like detecting faces, barcodes, texts etc. In this article, I have explained how to use the new BarcodeDetector library and how it can be used directly with html5-qrcode and what kind of performance improvement we see when compared to ZXingJS library.

Figure: QR Code scanning is used extensively in the post Covid19 world to enable, contact less information sharing.

This new API is part of the new capabilities project. Barcode detection has launched in Chrome 83. If the APIs evolve in future this article would be updated.

BTW, If you are interested in a web based QR Code or barcode scanner try out: https://scanapp.org.

Important notes

The Shape detector APIs are still in draft and not a W3C standard not it is on the W3C Standards Track. The feature can still be turned on in the library as it'd fallback to using ZXing based detector if BarcodeDectector library is not available.

The Barcode Detection API

BarcodeDetector represents an underlying accelerated platform's component for detection of linear or two-dimensional barcodes in images. It provides a single detect() operation on an ImageBitmapSource which result is a Promise.

Source: wicg.github.io/shape-detection-api/

The draft proposal expects core system APIs like com.google.android.gms.vision.barcode, CIQRCodeFeature or VNDetectBarcodesRequest to act as underlying components.

By providing high-performance…