ngx-barcode-scanner

ngx-barcode-scanner component

Table of contents

• Demo
• Installation
• Usage
• Development
• License

Demo

A simple démo is available here

Installation

Install through npm:

npm install --save quagga 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

Changelog

v0.1.1 (2020-11-18)

Feature

• Better responsive components:
  • width and height can be set on barcode-scanner-livestream-overlay
  • maxWidth and maxHeight can be set on barcode-scanner-livestream and barcode-scanner-livestream-overlay