AngularJS - Barcode / QRCode scanner

An AngularJS based Barcode / QRCode scanner component.

Table of contents

• Installation
• Usage
• Choosing what decoders to run
• Available format
• Limitations
• Advanced Usage
• Attributes
• Want to Contribute?
• Collection of Components
• Changelog
• Credits
• License
• Keywords

Installation

To install this package, run:

npm i angular-weblineindia-qrcode-scanner --save

or

npm i angular-weblineindia-qrcode-scanner --save

Usage

Import it on your module file:

// some.module.ts
import { NgModule } from '@angular/core';

// your very important imports here

// the scanner!
import { ZXingScannerModule } from 'angular-weblineindia-qrcode-scanner';

// your other nice stuff

@NgModule({
  imports: [ 
    // ...
    // gets the scanner ready!
    ZXingScannerModule,
    // ...
  ]
})
export class SomeModule {}

<zxing-scanner></zxing-scanner>

Choosing what decoders to run

By default the component comes with QR code decoder enabled, to enable more decoders at once you can simply make use of the formats property like that:

<zxing-scanner [formats]="['QR_CODE', 'EAN_13', 'CODE_128', 'DATA_MATRIX']">

You can also map the formats with the library's enum and pass them from the component:

<zxing-scanner [formats]="allowedFormats">

import { BarcodeFormat } from 'angular-weblineindia-qrcode-scanner/library';

export class MyComponent {

  allowedFormats = [ BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13, BarcodeFormat.CODE_128, BarcodeFormat.DATA_MATRIX /*, ...*/ ];

}

Available format

enum BarcodeFormat {
    /** Aztec 2D barcode format. */
    AZTEC,

    /** CODABAR 1D format. */
    CODABAR,

    /** Code 39 1D format. */
    CODE_39,

    /** Code 93 1D format. */
    CODE_93,

    /** Code 128 1D format. */
    CODE_128,

    /** Data Matrix 2D barcode format. */
    DATA_MATRIX,

    /** EAN-8 1D format. */
    EAN_8,

    /** EAN-13 1D format. */
    EAN_13,

    /** ITF (Interleaved Two of Five) 1D format. */
    ITF,

    /** MaxiCode 2D barcode format. */
    MAXICODE,

    /** PDF417 format. */
    PDF_417,

    /** QR Code 2D barcode format. */
    QR_CODE,

    /** RSS 14 */
    RSS_14,

    /** RSS EXPANDED */
    RSS_EXPANDED,

    /** UPC-A 1D format. */
    UPC_A,

    /** UPC-E 1D format. */
    UPC_E,

    /** UPC/EAN extension format. Not a stand-alone format. */
    UPC_EAN_EXTENSION

}

export default BarcodeFormat;

Limitations

The component relies on zxing-typescript which currently supports some 2D and 1D barcode formats, but not all. 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.

Advanced Usage

You can use some very cool attributes if you want:

<zxing-scanner [enable]="scannerEnabled" [(device)]="desiredDevice" [torch]="torch" (torchCompatible)="onTorchCompatible($event)" (camerasFound)="camerasFoundHandler($event)" (camerasNotFound)="camerasNotFoundHandler($event)" (scanSuccess)="scanSuccessHandler($event)" (scanError)="scanErrorHandler($event)" (scanFailure)="scanFailureHandler($event)" (scanComplete)="scanCompleteHandler($event)"

Logic-side (TypeScript)

// on the template
// <zxing-scanner #scanner></zxing-scanner>

import { ViewChild } from '@angular/core';

export class AppComponent {

  @ViewChild('scanner', { static: false })
  scanner: ZXingScannerComponent;

  /**
   * Some method.
   */
  doSomething(): void {
    this.scanner.device = this.getBackCamera();
  }
 
  /**
   * Returns the back camera for ya.
   */
  getBackCamera() {
    return theBackCamera;
  }
}

Preview element's size

To customize CSS, please make use of Angular default piercing methods:

:host zxing-scanner::ng-deep <some-element> {
  max-height: 70vh;
  width: 100vw;
  object-fit: contain;
}

Due to view-encapsulation it is required that the CSS-class that is to be used can be 'seen' from inside the scanner-component.

Attributes :

| Attribute | Default | Description |
|----------------------|:-----------------------------------:|:-------------------------| | enable | true |Starts and Stops the scanning. | | autofocusEnabled | true |Not working at the moment, needs ImageCapture API implementation. | | device | |The video-device used for scanning (use one of the devices emitted by camerasFound), it can be set or emit some value.| | torch experimental | |Can turn on/off the device flashlight.| | torchCompatible experimental | |Tells if the device's torch is compatible w/ the scanner.| | camerasFound | |Emits an array of video-devices after view was initialized.| | camerasNotFound | |Emits a void event when cameras aren't found.| | scanSuccess | |Emits the result as string, after a valid QR code was scanned.| | scanError | |Emitted when some error occours during the scan proccess.| | scanFailure | |Emitted when the scanner couldn't decode any relsult from the media stream.| | scanComplete | |Emitted after any scan attempt, no matter what.|

Want to Contribute?

• Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).
• Fork it.
• Create new branch to contribute your changes.
• Commit all your changes to your branch.
• Submit a pull request.

Collection of Components

We have built many other components and free resources for software development in various programming languages. Kindly click here to view our Free Resources for Software Development.

Changelog

Detailed changes for each release are documented in CHANGELOG.md.

Credits

angular-weblineindia-qrcode-scanner is inspired by @zxing/ngx-scanner.

License

MIT

Keywords

angular-qrcode-scanner, angularjs-barcode-scanner, barcode-scanner, qrcode-scanner, angularjs-qrcode, qrcode