Angular QR-Code scanner component.

• Supports continuous scanning.
• Supports iOS 11 (only in Safari via HTTPS --> see Limitations below).
• 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)

To install this package, run:

yarn add @zxing/ngx-scanner@latest

or

npm i @zxing/ngx-scanner@latest --save

Then import it into your Angular AppModule:

// Common imports
import { NgModule /* , ... */ } from '@angular/core';

// Import the package's module
import { ZXingScannerModule } from '@zxing/ngx-scanner';

@NgModule({
    declarations: [ /* AppComponent ... */ ],
    imports: [

        // BrowserModule,
        // ...

        // ZXing scanner module
        ZXingScannerModule.forRoot(),

        // another imports...
    ],
    // ...
})
export class AppModule { }

If you experience problems upon installing the component, please run

npm install --global --production windows-build-tools

and try again. If the problem still occurs, file an issue

Once the package is imported, you can use it in your Angular application:

<zxing-scanner
    [scannerEnabled]="scannerEnabled"
    [autofocusEnabled]="autofocusEnabled"
    [device]="selectedDevice"
    [cssClass]="'small-video'"
    (camerasFound)="displayCameras($event)"
    (scanSuccess)="handleQrCodeResult($event)"
></zxing-scanner>

• scannerEnabled can be used to start and stop the scanning (defaults to true)
• autofocusEnabled can be used to enable or disable the autofocus-feature of the camera (defaults to true)
• device is the video-device used for scanning (use one of the devices emitted by camerasFound)
• cssClass this CSS-class name will be appended to the video-element e.g. for resizing it (see below)
• camerasFound will emit an array of video-devices after view was initialized
• scanSuccess will emit the result as string, after a valid QR-Code was scanned

In your CSS, define an extra class and pass it to the component with the cssClass-parameter. CSS might look like this:

.small-video {
    max-height: 70vh;
    width: 100vw;
    object-fit: contain;
}

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
• On iOS-Devices camera access works only in native Safari and not in other Browsers (Chrome,...) or Apps that use an UIWebView or WKWebView. This is not a restriction of this component but of the limited WebRTC support by Apple. The behavior might change in iOS 11.3 (Apr 2018?, not tested) as stated here

Looking for a way to generate QR-Codes? Check-out ngx-kjua