How to Create an Angular Barcode QR Code Scanning Library

Download ngx-barcode-qrcode-sdk

https://www.npmjs.com/package/ngx-barcode-qrcode-sdk

npm i ngx-barcode-qrcode-sdk

Steps to Create an Angular Library for Dynamsoft JavaScript SDK

The official Angular tutorial guides you to generate a new library skeleton in a new workspace without containing an Angular application.

ng new my-workspace --no-create-application
cd my-workspace
ng generate library my-lib
git clone https://github.com/yushulx/angular-barcode-qr-code-scanner.git
cd angular-barcode-qr-code-scanner
ng generate library ngx-barcode-qrcode-sdk
"peerDependencies": {
...
"dynamsoft-javascript-barcode": "^9.0.2"
},
export * from './lib/ngx-barcode-qrcode-sdk.service';
export * from './lib/ngx-barcode-reader/ngx-barcode-reader.component';
export * from './lib/ngx-barcode-scanner/ngx-barcode-scanner.component';
export * from './lib/ngx-barcode-qrcode-sdk.module';
import { ModuleWithProviders, NgModule, Optional, SkipSelf } from '@angular/core';
import { NgxBarcodeReaderComponent } from './ngx-barcode-reader/ngx-barcode-reader.component';
import { NgxBarcodeScannerComponent } from './ngx-barcode-scanner/ngx-barcode-scanner.component';
import { BarcodeQrcodeSdkServiceConfig } from './ngx-barcode-qrcode-sdk.service';

@NgModule({
declarations: [
NgxBarcodeReaderComponent,
NgxBarcodeScannerComponent,
],
imports: [
],
exports: [
NgxBarcodeReaderComponent,
NgxBarcodeScannerComponent,
]
})
export class NgxBarcodeQrcodeSdkModule {
constructor(@Optional() @SkipSelf() parentModule?: NgxBarcodeQrcodeSdkModule) {
if (parentModule) {
throw new Error(
'GreetingModule is already loaded. Import it in the AppModule only');
}
}

static forRoot(config: BarcodeQrcodeSdkServiceConfig): ModuleWithProviders<NgxBarcodeQrcodeSdkModule> {
return {
ngModule: NgxBarcodeQrcodeSdkModule,
providers: [
{ provide: BarcodeQrcodeSdkServiceConfig, useValue: config }
]
};
}
}
import { Injectable, Optional } from '@angular/core';
import { BarcodeReader } from 'dynamsoft-javascript-barcode';

export class BarcodeQrcodeSdkServiceConfig {
licenseKey = '';
resourcePath = '';
}

@Injectable({
providedIn: 'root'
})
export class NgxBarcodeQrcodeSdkService {

constructor(@Optional() config?: BarcodeQrcodeSdkServiceConfig) {
if (config) {
BarcodeReader.license = config.licenseKey;
BarcodeReader.engineResourcePath = config.resourcePath;
}
}
}
export class NgxBarcodeReaderComponent implements OnInit {
@Output() result = new EventEmitter<string>();
...

this.reader.decode(file).then((results: any) => {
console.log(results);
let txts: any = [];
try {
let localization;
if (results.length > 0) {
for (var i = 0; i < results.length; ++i) {
txts.push(results[i].barcodeText);
localization = results[i].localizationResult;
this.overlayManager.drawOverlay(
localization,
results[i].barcodeText
);
}

this.result.emit(txts.join(', '));
} else {
this.result.emit(txts.join(', '));
}
} catch (e) {
alert(e);
}
});
...
}
export class NgxBarcodeScannerComponent implements OnInit {
@Output() result = new EventEmitter<string>();
...

this.scanner.onFrameRead = results => {
...

let txts: any = [];
try {
let localization;
if (results.length > 0) {
for (var i = 0; i < results.length; ++i) {
txts.push(results[i].barcodeText);
localization = results[i].localizationResult;
this.overlayManager.drawOverlay(localization, results[i].barcodeText);
}
this.result.emit(txts.join(', '));
}
else {
this.result.emit(txts.join(', '));
}

} catch (e) {
alert(e);
}
};
...
}

How to Build Angular Barcode QR Code Scanner with the Library

Since we have moved all heavy work to the library, building an Angular barcode QR code scanner becomes much simpler.

  1. In your Angular application workspace, install the Angular library via npm command in terminal:
npm i ngx-barcode-qrcode-sdk 
"build": {
"builder": "@angular-devkit/build-angular:browser",
...
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "./node_modules/dynamsoft-javascript-barcode/dist",
"output": "assets/dynamsoft-javascript-barcode"
}
],
...
}
import { NgxBarcodeQrcodeSdkModule } from 'ngx-barcode-qrcode-sdk';

...
@NgModule({
...
imports: [
...
NgxBarcodeQrcodeSdkModule.forRoot({ licenseKey: "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==", resourcePath: "assets/dynamsoft-javascript-barcode/" }),
],
...
})

...
import { NgxBarcodeQrcodeSdkService } from 'ngx-barcode-qrcode-sdk';
...
export class FooComponent implements OnInit {
barcodeResult: string = '';
constructor(private barcodeQrCodeSdkService: NgxBarcodeQrcodeSdkService) {
}

ngOnInit(): void {
}

onResultReady(result: string): void {
this.barcodeResult = result;
}
}
<div>
<a>Barcode QR code decoding results: </a>
</div>

<ngx-barcode-reader
(result)="onResultReady($event)"
></ngx-barcode-reader>
<div>
<a>Barcode QR code decoding results: </a>
</div>

<ngx-barcode-scanner
(result)="onResultReady($event)"
></ngx-barcode-scanner>

Source Code

https://github.com/yushulx/ngx-barcode-qrcode-sdk

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Xiao Ling

Xiao Ling

Manager of Dynamsoft Open Source Projects | Tech Lover