Scanning Barcode or QR Code in an Angular App with Zxing

This is a very simple component for adding QR code or Barcode read functionality to an Angular WebApp, this will work for practically any device with a camera and a browser. It is a requisite to use HTTPS for production environments so the user is prompted for permission to allow camera usage.

The component will work in the following way, when accesed, on the left side (or upper view in mobile) will be the camera square ready for scanning the presented codes and on the right side (or lower view in mobile) it will show the information read from the QR code and additionally some information retrieved from backend through a service.

Initial screen with camera activated ready for scanning QR codes.

Screen showing information previously scanned, when green button is clicked then a new QR code can be scanned.

So, as the first step we install the package into our app with NPM and after that we need to import ZXing on the module.

npm i @zxing/ngx-scanner@latest --save