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.
