Quar
A simple Angular QR Code scanner that just works.
How to use?
-
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.
-
Import the QuarModule
in your AppModule
(or any other module).
-
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