angular-weblineindia-qrcode-scanner v1.0.0

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 :

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