@eisberg-labs/ngx-barcode-scanner
TypeScript icon, indicating that this package has built-in type declarations

6.0.0 • Public • Published

Continuous Integration codecov npm downloads npm latest package Average time to resolve an issue Follow me

ngx-barcode-scanner

Angular 9+ Barcode scanner using Quagga.

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

Table of Contents

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:

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

Dependencies (2)

Dev Dependencies (0)

    Package Sidebar

    Install

    npm i @eisberg-labs/ngx-barcode-scanner

    Weekly Downloads

    586

    Version

    6.0.0

    License

    MIT

    Unpacked Size

    63.6 kB

    Total Files

    18

    Last publish

    Collaborators

    • eisberg-labs