Ngx-barcode-scanner NPM

ngx-barcode-scanner component

Angular components for QuaggaJS barcode reader. It uses the new Quagga2 supported version. Supporting Angular 10+

Demo

A simple demo is available here

Installation

Install through npm:

npm install --save @ericblade/quagga2 ngx-barcode-scanner

Usage

Module imports

//demo.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { BarcodeScannerLivestreamModule } from "ngx-barcode-scanner";
import { Demo } from "./demo.component";

@NgModule({
  declarations: [Demo],
  imports: [BrowserModule, BarcodeScannerLivestreamModule],
  bootstrap: [Demo],
})
export class DemoModule {}

BarcodeScannerLivestreamComponent

This component creates a barcode scanner.

//demo.component.ts
import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { BarcodeScannerLivestreamComponent } from "ngx-barcode-scanner";

@Component({
  selector: "demo-app",
  template: `
    <barcode-scanner-livestream
      type="code_128"
      (valueChanges)="onValueChanges($event)"
      (started)="(onStarted)"
    ></barcode-scanner-livestream>
    <div [hidden]="!barcodeValue">
      {{ barcodeValue }}
    </div>
  `,
})
export class Demo implements AfterViewInit {
  @ViewChild(BarcodeScannerLivestreamComponent)
  barcodeScanner: BarcodeScannerLivestreamComponent;

  barcodeValue;

  ngAfterViewInit() {
    this.barcodeScanner.start();
  }

  onValueChanges(result) {
    this.barcodeValue = result.codeResult.code;
  }

  onStarted(started) {
    console.log(started);
  }
}

Compatibility

Choose the right version

Angular	ngx-barcode-scanner	@ericblade/quagga2
10	0.2.0	1.2.6
11	0.2.0	1.2.6
12	0.3.0	1.4.2
13	13.0.0	1.7.7
14	14.0.0	1.7.7

Development

Development server

Run ng serve or npm run start for a dev server, on the example app. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Known issues

Access to the camera (getUserMedia API) is restricted on iOS when running in a Progressive Web App or in browsers different than Safari. Live streaming will not work in this case.