Thanks for downloading Dynamsoft Barcode Reader Package!
Your download will start shortly. If your download does not begin, click here to retry.
Hello-world for Angular - Dynamsoft Barcode Reader Sample
Angular is one of the most popular and mature JavaScript frameworks. Check out the following on how to implement Dynamsoft Barcode Reader JavaScript SDK (hereafter called “the library”) into an Angular application.
Official Sample
Preparation
Make sure you have node and Angular CLI installed. node 14.21.3
and Angular CLI 15.2.1
are used in the example below.
Create the sample project
Create an out-of-the-box raw Angular application
ng new read-video-angular
CD to the root directory of the application and install the library
cd read-video-angular
npm install dynamsoft-javascript-barcode
Start to implement
Add a file “dbr.ts” under “src/app/” to configure the library
import { BarcodeReader } from 'dynamsoft-javascript-barcode';
BarcodeReader.license = 'DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9';
BarcodeReader.engineResourcePath = "https://cdn.jsdelivr.net/npm/dynamsoft-javascript-barcode/dist/";
Note:
license
specify a license key to use the library. You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=sample&product=dbr&package=js to get your own trial license good for 30 days.engineResourcePath
tells the library where to get the necessary resources at runtime.
Generate three components
video-decode
component help read barcode from camera.ng generate component video-decode
img-decode
component help read barcode from still images.ng generate component img-decode
hello-world
component offers buttons to switch components above.ng generate component hello-world
Edit the video-decode component
-
There is a default UI in
.\node_modules\dynamsoft-javascript-barcode\dist\dbr.ui.html
, which we will use in this sample. Copy everything in this file and replace the original code invideo-decode.component.html
. If you want to customize the UI, see more in2.ui-tweaking
or User Guide. -
In
video-decode.component.ts
, add code for initializing and destroying theBarcodeScanner
instance.
import { Component, OnInit } from '@angular/core';
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
@Component({
selector: 'app-video-decode',
templateUrl: './video-decode.component.html',
styleUrls: ['./video-decode.component.css'],
})
export class VideoDecodeComponent implements OnInit {
pScanner: Promise<BarcodeScanner> | null = null;
async ngOnInit(): Promise<void> {
try {
const scanner = await (this.pScanner = BarcodeScanner.createInstance());
await scanner.setUIElement(
(document.querySelector('.dce-video-container') as HTMLElement).parentElement as HTMLElement
);
scanner.onFrameRead = (results: any) => {
for (const result of results) {
console.log(result.barcodeText);
}
};
scanner.onUniqueRead = (txt, result) => {
alert(txt);
};
await scanner.open();
} catch (ex: any) {
let errMsg;
if (ex.message.includes('network connection error')) {
errMsg =
'Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.';
} else {
errMsg = ex.message || ex;
}
console.error(errMsg);
alert(errMsg);
}
}
async ngOnDestroy() {
if (this.pScanner) {
(await this.pScanner).destroyContext();
console.log('BarcodeScanner Component Unmount');
}
}
}
Note:
- The method
createInstance()
is called to initialize the library as soon as the component initializes.- To release resources timely, the
BarcodeScanner
instance is destroyed with the component in the callbackngOnDestroy
.- The
setUIElement()
method is used to define the user interface (UI) for the library using the native element invideo-decode.component.html
, which was copied in the previous step.Edit the img-decode component
- Replace the original code in
img-decode.component.html
with code below to select a local image viainput
element.
<div class="ImgDecode"><input type="file" (change)="decodeImg($event)"/></div>
- Add CSS style in
img-decode.component.css
.
.ImgDecode {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
border: 1px solid black
}
- In
img-decode.component.ts
, add code for initializing and destroying theBarcodeReader
instance.
import { Component, OnInit } from '@angular/core';
import { BarcodeReader } from 'dynamsoft-javascript-barcode'
@Component({
selector: 'app-img-decode',
templateUrl: './img-decode.component.html',
styleUrls: ['./img-decode.component.css']
})
export class ImgDecodeComponent implements OnInit {
pReader: Promise<BarcodeReader> | null = null;
async ngOnInit(): Promise<void> { }
decodeImg = async (e: any) => {
try {
const reader = await (this.pReader = this.pReader || BarcodeReader.createInstance());
const results = await reader.decode(e.target.files[0]);
for (const result of results) {
alert(result.barcodeText);
}
if (!results.length) { alert('No barcode found'); }
} catch (ex: any) {
let errMsg;
if (ex.message.includes("network connection error")) {
errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
} else {
errMsg = ex.message||ex;
}
console.error(errMsg);
alert(errMsg);
}
e.target.value = '';
}
async ngOnDestroy() {
if (this.pReader) {
(await this.pReader).destroyContext();
console.log('ImgDecode Component Unmount');
}
}
}
Note:
- The method
createInstance()
is called to initialize the library as soon as the component initializes.- To release resources timely, the
BarcodeReader
instance is destroyed with the component in the callbackngOnDestroy
.
Edit the hello-world component
- Use the components in
hello-world.component.html
.
<div class="helloWorld">
<h1>Hello World for Angular<img style="height: 25px;" alt="logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
/>
</h1>
<div>
<button [ngStyle]="{'margin-right': '10px', 'background-color': bShowScanner ? 'rgb(255,174,55)' : 'white'}" (click)="showScanner()">Video Decode</button>
<button [ngStyle]="{'background-color': !bShowScanner ? 'rgb(255,174,55)' : 'white'}" (click)="showImgDecode()">Image Decode</button>
</div>
<div class="container">
<app-video-decode *ngIf="bShowScanner"></app-video-decode>
<app-img-decode *ngIf="bShowImgDecode"></app-img-decode>
</div>
</div>
- Define the style of the element in
hello-world.component.css
.
.helloWorld {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
color: #455A64;
}
button {
font-size: 1.5rem;
margin: 1.5vh 0;
border: 1px solid black;
background-color: white;
color: black;
}
.container {
margin: 2vmin auto;
height: 70vh;
width: 80vw;
}
h1 {
font-size: 1.5em;
}
- Add following code to
hello-world.component.ts
.
import { Component, OnInit } from '@angular/core';
import '../dbr'; // import side effects. The license, engineResourcePath, so on.
import { BarcodeScanner } from 'dynamsoft-javascript-barcode';
@Component({
selector: 'app-hello-world',
templateUrl: './hello-world.component.html',
styleUrls: ['./hello-world.component.css']
})
export class HelloWorldComponent implements OnInit {
bShowScanner = true;
bShowImgDecode = false;
async ngOnInit(): Promise<void> {
// Load the library on page load to speed things up.
try {
await BarcodeScanner.loadWasm();
} catch (ex: any) {
let errMsg;
if (ex.message.includes("network connection error")) {
errMsg = "Failed to connect to Dynamsoft License Server: network connection error. Check your Internet connection or contact Dynamsoft Support (support@dynamsoft.com) to acquire an offline license.";
} else {
errMsg = ex.message||ex;
}
console.error(errMsg);
alert(errMsg);
}
}
showScanner(): void {
this.bShowScanner = true;
this.bShowImgDecode = false;
}
showImgDecode(): void {
this.bShowScanner = false;
this.bShowImgDecode = true;
}
}
NOTE :
- The method
loadWasm()
initializes the library in the background.
Add the hello-world component to app.component.html
Edit the file app.component.html
to contain nothing but the following
<app-hello-world></app-hello-world>
- Try running the project.
ng serve
If you have followed all the steps correctly, you should now have a functioning page that allows you to scan barcodes from a webcam or a built-in camera. Additionally, if you want to decode a local image, you can click the Image Decode
button and select the image you want to decode. Any barcodes that are detected will be displayed in a dialog.
Development server
Run ng serve
for a dev server. Navigate to http://localhost:4200/
. The app will automatically reload if you change any of the source files.
Build
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory. Use the --prod
flag for a production build.
Support
If you have any questions, feel free to contact Dynamsoft support via email or live chat via the “Let’s Chat” button.