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
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.
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
BarcodeDetectorrepresents an underlying accelerated platform's component for detection of linear or two-dimensional barcodes in images. It provides a single
detect()operation on an
ImageBitmapSourcewhich result is a
By providing high-performance…