Scan Barcodes and Create QR Code using Salesforce LWC

Welcome folks!

This blog post demonstrates the Salesforce Capabilities to Scan Barcodes as well as ability to Create QR codes out of a given text content, all using Lightning Web Components.

Salesforce had released a BarcodeScanner API which supports barcode scanning natively on LWC for mobile devices using the Salesforce Mobile App. Since it is supported natively, no need to worry about maintaining any 3rd party Javascript, Locker services, performance issues for reading a barcode.

This Salesforce LWC Component contains methods to Scan any of the Supported Bar Code Types by Salesforce and also, separately provides an ability via ES6 JavaScript file to Create a QR Code out of user-entered string content.

QR Code Generation can be done on Desktop or Mobile experience whereas the Bar Code scanning works in Salesforce Mobile App only.

Below are the App Screenshots on how this LWC works –

Mobile View below


Desktop View below (Scanning of barcode is disabled)

Examples of Scanned Bar Code examples on Mobile App below

The Codebase of this LWC can be obtained in the Github Repository shared below –

https://github.com/WaseemAliSabeel/lwc-barcode

The official documentation of the API is stated here .

Another interesting feature that it provides is to allow Continuous Bar Code scanning, along with Single Scan as well. More on it in the official documentation here

Thanks for reading!

Yours wisely,
Waseem