@baivoom/ngx-barcode-scanner

Angular 9+ barcode scanner component using Quagga

Usage no npm install needed!

<script type="module">
  import baivoomNgxBarcodeScanner from 'https://cdn.skypack.dev/@baivoom/ngx-barcode-scanner';
</script>

README

ngx-barcode-scanner

Angular 9+ Barcode scanner using Quagga. This project was generated with Ngx Lib Starter version 0.0.1.

Installation

$ npm install @eisbeg-labs/ngx-barcode-scanner --save

Usage

First import to your module:

   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       NgxBarcodeScannerModule
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule { }

And use in your component html

<ngx-barcode-scanner [(value)]="value" [codes]="['code_128', 'ean', 'upc', 'upc_e', 'ean_8']" [errorThreshold]="0.1" (exception)="onError($event)"></ngx-barcode-scanner>

Supported API

Properties

@Input() Type Required Default Description
codes string, string[] required ['code_128', 'ean', 'ean_8', 'code_39', 'code_39_vin', 'codabar', 'upc', 'upc_e', 'i2of5', '2of5', 'code_93'] Type of barcode algorithm to detect. Supported are code_128,ean,ean_8,code_39,code_39_vin,codabar,upc,upc_e,i2of5,2of5,code_93. Be aware that more codes you define, more possible false positives, and it might take longer to detect a barcode.
config QuaggaJSConfigObject optional undefined Optional quagga config object (Define camera device id, media constraints ...).
errorThreshold number optional 0.1 Defines threshold of scan detect accuracy. Smaller the value, smaller chance of false positives.
value string required undefined Scan result outputs to value.

Events

@Output() Type EventType Required Description
valueChange EventEmitter string required Scan result updates
exception EventEmitter any optional Error events
## Demo
Try the Demo in StackBlitz

License

MIT © Eisberg Labs