Ngx Barcode Scanner

Ngx Barcode Scanner

Angular 9+ Barcode scanner using Quagga.

Installation

$ npm install @eisberg-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>

Start/stop scanning

ngx-barcode-scanner ties the scanning service start onInit and stop is onDestroy. You may want to control when start and stop scanner occurs with the help of NgxBarcodeScannerService:

import {NgxBarcodeScannerService} from "@eisberg-labs/ngx-barcode-scanner";

//...

@Component({
  selector: 'app-root',
  template: `<ngx-barcode-scanner [(value)]="value"
                     [codes]="['code_128', 'ean', 'upc', 'upc_e', 'ean_8']" [errorThreshold]="0.1" (exception)="onError($event)"></ngx-barcode-scanner>`
    <div style="display: flex; justify-content: space-between; margin: 5% auto">
        <button (click)="onStartButtonPress()">Start</button>
        <button (click)="onStopButtonPress()">Stop</button>
    </div>
})

  constructor(
     service: NgxBarcodeScannerService
  ) {
    //Do constructor things...
  }

  onStartButtonPress() {
    this.service.start(this.quaggaConfig, 0.1)
  }

  onValueChanges(detectedValue: string) {
    console.log("Found this: " + detectedValue)
  }

  onStopButtonPress() {
    this.service.stop()
  }

Demo

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

Sponsors

If you find this project useful, give it a star. You could also consider supporting us through the following platforms:

• Become a GitHub Sponsor
• Support me on Patreon

As this project grows, I will showcase sponsors' logos and links in this section. Thank you for your support!

Contact

Feel free to reach out to me on LinkedIn.

License

This project is MIT licensed.