Angular QR-Code scanner component.

• 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)
• Example

To install this package, run:

yarn add @zxing/ngx-scanner@latest

Then import it into your Angular AppModule:

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

// Import the package's module
import { NgxZxingModule } from 'ngx-zxing';

@NgModule({
    declarations: [ /* AppComponent ... */ ],
    imports: [
    
        // BrowserModule, 
        // ...
        
        // ZXing scanner module
        NgxZxingModule.forRoot(),
        
        // another imports...
    ],
    // ...
})
export class AppModule { }

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

<ngx-zxing
    [start]="camStarted"
    [device]="selectedDevice"
    [cssClass]="'small-video'"
    (camerasFound)="displayCameras($event)"
    (scanSuccess)="handleQrCodeResult($event)"
></ngx-zxing>

• start can be used to start and stop the scanning (defaults to false)
• device is the video-device used for scanning (use one of the devices emitted by onCamsFound)
• 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;
}