An AngularJS based Barcode / QRCode scanner component.
npm install angular-weblineindia-qrcode-scanner-dgnpm i angular-weblineindia-qrcode-scanner-dg --save
npm i angular-weblineindia-qrcode-scanner-dg --save
typescript
// some.module.ts
import { NgModule } from '@angular/core';
// your very important imports here
// the scanner!
import { ZXingScannerModule } from 'angular-weblineindia-qrcode-scanner-dg';
// your other nice stuff
@NgModule({
imports: [
// ...
// gets the scanner ready!
ZXingScannerModule,
// ...
]
})
export class SomeModule {}
`
`html
`
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:
You can also map the formats with the library's enum and pass them from the component:
`typescript
import { BarcodeFormat } from 'angular-weblineindia-qrcode-scanner-dg/library';
export class MyComponent {
allowedFormats = [ BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13, BarcodeFormat.CODE_128, BarcodeFormat.DATA_MATRIX /, .../ ];
}
`
Available format
`typescript
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;
`
$3
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.
$3
You can use some very cool attributes if you want:
[(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)
`typescript
// on the template
//
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:
`css
:host zxing-scanner::ng-deep {
max-height: 70vh;
width: 100vw;
object-fit: contain;
}
``