The npm package of my best choice for QR code decoding on Angular SPA

Recently, I needed to implement the function of detecting and reading QR code using 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"

• https://www.npmjs.com/package/jsqr ( GitHub )
• 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.

Only I should do is create a TypeScript type definition file manually, like this.

// jsQR.d.ts
declare module 'jsQR' {
  export default function jsQR(imageData: Uint8ClampedArray, width: number, height: number): {
        data: string
  } | null;
}

After import this package as this,

import jsQR from "jsQR";

you can call "jsQR" function to decode QR code.

When you call "jsQR" function with the image data of QR code to arguments, you can get the result of decoding as return value.

That's all.

This API is very simple. You don't need to register a call back, or use "Promise", etc.

Can't use - "instascan"

• https://www.npmjs.com/package/instascan ( GitHub )
• MIT

This package is looks very popular in the result of my google searching.

This package provides everything you need to implement a QR code decoding feature.

What I have to do is just mark up video tag and bind it.

It sounds very good for me.

Therefore, at the beginning of my research, this package was the most influential candidate.

But, after installing this package into my project, the build error was reported from webpack, like this:

ERROR in ./node_modules/instascan/src/zxing.js
Module not found: Error: Can't resolve 'fs' in '/Users/enzo/Copy/projects/elevenyellow/coinfy/node_modules/instascan/src'
resolve 'fs' in '/Users/enzo/Copy/projects/elevenyellow/coinfy/node_modules/instascan/src'

I found a workaround this error from google search.

https://github.com/schmich/instascan/issues/121#issuecomment-357757911

I edited "webpack.config.js" to apply to the workaround, then the build error was gone.

But, next, I ran into a runtime error from browser like this:

Error: Zone.js has detected that ZoneAwarePromise `(window|global).Promise` has been overwritten.
Most likely cause is that a Promise polyfill has been loaded after Zone.js (Polyfilling Promise api is not necessary when zone.js is loaded. If you must load one, do so before loading zone.js.)

This error means this package conflict to "zone.js".

"zone.js" is needed to the project for dependency of Angular.

This error made me to decide don't use this package.

"istascan" is still great package, and very useful, I think.

But it is not compatible with Angular SPA.

Can't use - "zxing-typescript"

• https://www.npmjs.com/package/zxing-typescript ( GitHub )
• Apache-2.0

This package has the word "TypeScript" in that package name, so I expected that I can use this package easily in Angular SPA project.

But, after installing this package, the webpack reported many many build TS2322 TypeScript error lines like this.

ERROR in [at-loader] ./node_modules/zxing-typescript/src/browser/BrowserCodeReader.ts:281:9
    TS2322: Type 'CanvasRenderingContext2D | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.

I guess, this package is implemented by old version TypeScript, and the package includes not only JavaScript after transpiled but TypeScript source code.

Therefore, in a newer TypeScript environment, this package can't transpile.

I think, npm package should not include TypeScript source code. It should include just JavaScript files after transpile and type definition files.

Anyway, this error made me to decide don't use this package.

Not trying - maybe can't use - "ngx-zxing"

• https://www.npmjs.com/package/ngx-zxing ( GitHub )
• MIT

This package provides a QR code decoding feature as an Angular component.

My project is an Angular SPA project, so I thought this package may be the best match with my project.

But when I read the README in this package, I found the description below:

"This library wraps zxing-typescript ...

This description made me to be afraid to run into many TS2322 TypeScript errors same as when I tried to using "zxing-typescript".

So I decide not to use this package without trying.

Not sure, but maybe can use - "qrcode-reader"

• https://www.npmjs.com/package/qrcode-reader ( GitHub )
• Apache-2.0

This package provides just decoding QR code feature, like "jsQR".

After import this package like this code, you can instantiate the Qr Code class, and decode a QR code by using the QrCode object.

import QrCode from 'qrcode-reader';

and, please remember that you should create type definition file like this:

// qrcode-reader.d.ts
declare module 'qrcode-reader' {
  export default class QrCode {
    // You should append this line with QrCode member's definiton.
  }
}

I succeeded in installing this package into my project, inporting it,building project, and run it with no errors.

But I didn't check a decoding function of this package, because I have already decide to use "jsQR".

I have no confirmation, but I feel that this package may be can use in an Angular SPA project.

Conclusion

• jsQR - my best choice! (but it provide just decoding function.)
• instascan - no compatible with Angular.
• zxing-typescript - no compatible with recent TypeScript.
• ngx-zxing - Not sure, but maybe no compatible with recent TypeScript.
• qrcode-reader - Not sure, but maybe can use.

I hope this article is useful for you.

Happy coding :)

Comments

[Luiz Machado]

I feel sad that you looked for both zxing-typescript and ngx-zxing and you did not find neither @zxing/library or @zxing/ngx-scanner which are completely rewritten versions of those packages. 😔

[Yen Yee]

Hi, can you suggest which one the best of webcam implement for angular2 and above?

[jsakamoto]

I couldn't suggest. Because all libraries which have a webcam implementation, and which I tried to use, are not compatible with Angular2+.

If you find good stuff, and if you tell me it at this comment, I'll appreciate for you.