Deprecated! Please install @zxing/ngx-scanner instead!
Angular QR-Code scanner component.
Features & Hints
- Supports continuous scanning.
- There is a delay of 1500ms after each successful scan, before a new QR-Code can be detected.
- Supports iOS 11 (only in Safari via HTTPS).
- Nice devs behind it. 🤓
- StackBlitz (preview needs to be opened in new window)
- Plunkr (preview needs to be opened in new window)
To install this package, run:
yarn add @zxing/ngx-scanner@latest
Then import it into your Angular
// Common imports;// Import the package's module;
Once the package is imported, you can use it in your Angular application:
startcan be used to start and stop the scanning (defaults to
deviceis the video-device used for scanning (use one of the devices emitted by
cssClassthis CSS-class name will be appended to the video-element e.g. for resizing it (see below)
camerasFoundwill emit an array of video-devices after view was initialized
scanSuccesswill emit the result as string, after a valid QR-Code was scanned
Change the size of the preview-element
In your CSS, define an extra class and pass it to the component with the
cssClass-parameter. CSS might look like this:
||Allows you to properly change the scanner device on the fly.|
||Emits an event when cameras are found.|
||Emits an event when cameras are not found.|
||Emits an event when a scan is successful performed.|
||Emits an event when a scan fails.|
||Emits an event when a scan throws an error.|
Copied from Instascan by Chris Schmich:
Many factors affect how quickly and reliably ZXing can detect QR codes.
If you control creation of the QR code, consider the following:
- A larger physical code is better. A 2" square code is better than a 1" square code.
- Flat, smooth, matte surfaces are better than curved, rough, glossy surfaces.
- Include a sufficient quiet zone, the white border surrounding QR code. The quiet zone should be at least four times the width of an individual element in your QR code.
- A simpler code is better. You can use this QR code generator to see how your input affects complexity.
- For the same length, numeric content is simpler than ASCII content, which is simpler than Unicode content.
- Shorter content is simpler. If you're encoding a URL, consider using a shortener such as goo.gl or bit.ly.
When scanning, consider the following:
- QR code orientation doesn't matter.
- Higher resolution video is better, but is more CPU intensive.
- Direct, orthogonal scanning is better than scanning at an angle.
- Blurry video greatly reduces scanner performance.
- Auto-focus can cause lags in detection as the camera adjusts focus. Consider disabling it or using a fixed-focus camera with the subject positioned at the focal point.
- Exposure adjustment on cameras can cause lags in detection. Consider disabling it or having a fixed white backdrop.
- The component relies on zxing-typescript which currently supports only QR-codes and no 1D-Barcode formats
Looking for a way to generate QR-Codes? Check-out ngx-kjua