Tuesday, June 2FreeJQuery

Angular QR-Code scanner component : ngx-Scanner

zxing ngx scanner

Zxing-ngx-scanner is an angular QR-Code scanner component using zxing-ngx-scanner.

Features of zxing ngx scanner

  • Supports continuous scanning.
  • Supports iOS 11 (only in Safari via HTTPS –> see Limitations below).
  • There is a configurable delay of 1500ms after each successful scan before a new QR-Code can be detected.
  • Nice devs behind it.

For More Angular Plugins Click

Recently, I needed to implement the function of detecting and reading a QR code using a camera device in my Angular Web application project.

So I researched which npm package is best for me to implement the function of decoding QR code.

The list of npm packages which are I found is this.

  • jsQR
  • instascan
  • zxing-typescript
  • ngx-zxing
  • qrcode-reader

The profile of my Angular SPA project is this:

  • Angular – v.5.0
  • node.js – v.8.9.3
  • npm – v.5.6.0
  • TypeScript – v.2.4.2
  • module bandler – webpack – v.2.5.1 (I don’t use angular CLI)

My best choice is “jsQR”

  • Apache-2.0

This package provides just decoding QR code feature, managing camera device, video and canvas DOM elements, are not supported.

I should implement about capturing video from camera device, preview the video stream, grab image data from the preview, and so on.

But this package works very fine, and easy to use.

you can call “jsQR” function to decode QR code.


Leave a Reply

Your email address will not be published. Required fields are marked *