ngx-barcode-scanner component

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


Table of contents

- Demo
- Installation
- Usage
- Compatibility
- Development
- License

Demo

A simple demo is available here

Installation

Install through npm:

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

Usage

$3

`typescript
//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 {}
`

$3

This component creates a barcode scanner.

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

@Component({
selector: "demo-app",
template:
type="code_128"
(valueChanges)="onValueChanges($event)"
(started)="(onStarted)"
>

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 |

Development

$3

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.

$3

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

$3

All barcode types supported by quaggajs

$3

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

License

MIT