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

    0.2.0 • Public • Published

    ngx-barcode-scanner component

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

    npm version Dependency Status devDependency Status GitHub issues GitHub stars GitHub license

    Table of contents

    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);
      }
    }

    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.

    FAQ

    Which types of barcode are supported ?

    All barcode types supported by quaggajs

    Does ngx-barcode-scanner support scanning QR Codes ?

    No, ngx-barcode-scanner is based on quaggajs, and it can not support qr-code.

    License

    MIT

    Install

    npm i ngx-barcode-scanner

    DownloadsWeekly Downloads

    1,031

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    186 kB

    Total Files

    30

    Last publish

    Collaborators

    • jboulay