Skip to content

A simple Angular QR Code scanner that just works

License

Notifications You must be signed in to change notification settings

wall-street-dev/quar

Repository files navigation

Quar

A simple Angular QR Code scanner that just works.

How to use?

  1. Install the package
    npm i @altack/quar

    Make sure to also install jsQR as a dependency. jsQR is used to decode the video stream captured by the user's camera until a match is found.

  2. Import the QuarModule in your AppModule (or any other module).

  3. Attach the <quar-scanner (scanSuccess)="onSuccess($event)" (scanError)="onError($event)"></quar-scanner> component to your desired component template.

Side notes

  • Most common use case is to attach the <quar-scanner></quar-scanner> into a fullscreen MatDialog component so that the scanner nicely appears on top of everything.

  • There's also a helper service QuarService it contains some functions to check for browser compatibility and user permissions

  • (onSuccess) event will emit only if jsQR found a valid QR Code, then Quar will stop looking for matches. You can restart the process by calling resumeScanner() directly from the QuarComponent e.g

    @ViewChild(QuarComponent) private quar: QuarComponent;

    restartScanning() { this.quar.resumeScanner(); }

  • (scanError) will emit in case the browser doesn't support WebRTC APIs, or it lacks of user permissions. Values are part of the QuarErrors Enum, and the possible values are noPermissions, notSupported or unknownError.

Angular Compatibility

If you're using Angular 15 make sure to update Quar package to v1.5.x

About

A simple Angular QR Code scanner that just works

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published