Angular components for [QuaggaJS](https://serratus.github.io/quaggaJS/) barcode reader. It uses the new [Quagga2](https://github.com/ericblade/quagga2) supported version. Supporting Angular 10+
npm install ngx-barcode-scannerAngular components for QuaggaJS barcode reader. It uses the new Quagga2 supported version.
Supporting Angular 10+



- Demo
- Installation
- Usage
- Compatibility
- Development
- License
A simple demo is available here
Install through npm:
``bash`
npm install --save @ericblade/quagga2 ngx-barcode-scanner
`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 {}
`
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:
(valueChanges)="onValueChanges($event)"
(started)="(onStarted)"
>
,
})
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
$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.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.
All barcode types supported by quaggajs
No,
ngx-barcode-scanner is based on quaggajs, and it can not support qr-code.
MIT