Angular QR-Code scanner component.
Report a bug
·
Request feature
- Supports continuous scanning.
- Supports iOS 11 (only in Safari via HTTPS --> see
Limitationsbelow). - There is a configurable delay of 1500ms after each successful scan, before a new QR-Code can be detected.
- Nice devs behind it. 🤓
Previews needs to be opened in new standalone windows.
- Demo
- StackBlitz
- Plunkr (click open preview in separate window)
We've built a veeeery cool Wiki for you! Click here to take a look!
I promise that it's very simple to use:
<!-- some.component.html -->
<zxing-scanner></zxing-scanner>| Method | Parameters | Returns | Description |
|---|---|---|---|
| changeDevice | device: MediaDeviceInfo |
void |
Allows you to properly change the scanner device on the fly. |
| camerasFound | callback: (devices: MediaDeviceInfo[]) => {} |
EventEmitter<MediaDeviceInfo > |
Emits an event when cameras are found. |
| camerasNotFound | callback: (): void => {} |
EventEmitter<void> |
Emits an event when cameras are not found. |
| scanSuccess | callback: (result: string): void => {} |
EventEmitter<string> |
Emits an event when a scan is successful performed. |
| scanFailure | callback: (): void => {} |
EventEmitter<void> |
Emits an event when a scan fails. |
| scanError | callback: (error: any): void => {} |
EventEmitter<any> |
Emits an event when a scan throws an error. |
Read our performance notes on the wiki: Performance Considerations.
- The component relies on zxing-typescript which currently supports totally the following code formats:
- QR Code
- Code 128
- On iOS <= 11.2 devices camera access works only in native Safari. This is limited WebRTC support by Apple.
Looking for a way to generate QR-Codes? Check-out ngx-kjua