@roux-services/ngx-barcode-scanner
v0.3.4
Published
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+
Downloads
21
Maintainers
Readme
ngx-barcode-scanner component
Angular components for QuaggaJS barcode reader. It uses the new Quagga2 supported version. Supporting Angular 10+
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);
}
}
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
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