ngx-barcode-scanner

Angular 9+ Barcode scanner using Quagga.

If you 👍 or use this project, consider giving it a ★, thanks! 🙌

Table of Contents

• Installation
• Usage
• Demo
• API
• Changelog
• Code of Conduct
• Contributing
• Sponsors
• Contact
• License

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

View Demo and Documentation

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

Changelog

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

Code of Conduct

I follow the Rust Code of Conduct.

Contributing

Everyone is welcome to contribute. You can read more about contributing here.

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

MIT © Eisberg Labs