An AngularJS based Barcode / QRCode scanner component.
npm install angular-weblineindia-qrcode-scannerAn AngularJS based Barcode / QRCode scanner component.
- Installation
- Usage
- Choosing what decoders to run
- Available format
- Limitations
- Advanced Usage
- Attributes
- Want to Contribute?
- Collection of Components
- Changelog
- Credits
- License
- Keywords
To install this package, run:
npm i angular-weblineindia-qrcode-scanner --save
or
npm i angular-weblineindia-qrcode-scanner --save
Import it on your module file:
``typescript
// 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 {}
`html
`
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/library';
export class MyComponent {
allowedFormats = [ BarcodeFormat.QR_CODE, BarcodeFormat.EAN_13, BarcodeFormat.CODE_128, BarcodeFormat.DATA_MATRIX /, .../ ];
}
`
`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;
`
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.
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;
}
Due to view-encapsulation it is required that the CSS-class that is to be used can be 'seen' from inside the scanner-component.
| 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.|
- 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.
-----
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.
------
Detailed changes for each release are documented in CHANGELOG.md.
angular-weblineindia-qrcode-scanner is inspired by @zxing/ngx-scanner.
[mit]: https://github.com/weblineindia/AngularJS-QRCode-Scanner/blob/master/LICENSE
angular-qrcode-scanner, angularjs-barcode-scanner, barcode-scanner, qrcode-scanner, angularjs-qrcode, qrcode