Scandit supports the Angular web framework. In the following sections, you'll learn how to create a new Angular project, install the Scandit SDK, and set up barcode scanning in your Angular app.
How to Create a New Angular Project
If you still do not have an Angular project that you will use, you should create a new one.
$ ng new scandit-demo
$ cd scandit-demo
How to Install the Scandit SDK
The Scandit Core plugin is required to be installed, along with the Barcode plugins (as described in our documentation).
$ npm install @scandit/web-datacapture-core @scandit/web-datacapture-barcode
You also need to add the library engine files and provide an appropriate path under the libraryLocation parameter.
You can either add needed files locally or use CDN.
You can read more about it here: https://docs.scandit.com/sdks/web/add-sdk/#install-via-cdn and here: https://docs.scandit.com/sdks/web/add-sdk/#configure-the-library.
For the purpose of this guide, we'll use the CDN link, as shown below.
Create a Scanner Service
Create a new file called scanner-service.service.ts under src and add the following code snippet:
import * as SDCCore from '@scandit/web-datacapture-core';
import * as SDCBarcode from '@scandit/web-datacapture-barcode';
export class ScannerServiceProvider {
public context: SDCCore.DataCaptureContext | undefined;
public view: SDCCore.DataCaptureView | undefined;
public camera: SDCCore.Camera | undefined;
public settings: SDCBarcode.BarcodeCaptureSettings | undefined;
public barcodeCapture: SDCBarcode.BarcodeCapture | undefined;
public overlay: SDCBarcode.BarcodeCaptureOverlay | undefined;
public host: HTMLElement | undefined;
public barcodeCaptureListener: SDCBarcode.BarcodeCaptureListener | undefined;
public viewfinder: SDCCore.RectangularViewfinder | undefined;
constructor(
) {}
public async start(htmlElement: HTMLElement): Promise<void> {
await this.initialize();
document.getElementById("data-capture-view")!.style.visibility = "visible";
await this.connectToView(htmlElement);
await this.setScanArea();
await this.addOverlayAndViewfinder();
await this.enableCamera(true);
await this.enableScanning(true);
this.addListener();
}
public async resume(htmlElement: HTMLElement): Promise<void> {
await this.connectToView(htmlElement);
await this.setScanArea();
await this.addOverlayAndViewfinder();
this.enableCamera(true);
this.enableScanning(true);
}
public pause(): void {
this.enableScanning(false);
this.enableCamera(false);
}
public async stop(): Promise<void> {
this.cleanup();
}
async initialize() {
await SDCCore.configure({
licenseKey: "YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE",
libraryLocation: "https://cdn.jsdelivr.net/npm/@scandit/web-datacapture-barcode@7.0.0/sdc-lib/",
moduleLoaders: [SDCBarcode.barcodeCaptureLoader()],
});
this.context = await SDCCore.DataCaptureContext.create();
this.view = await SDCCore.DataCaptureView.forContext(this.context);
this.settings = new SDCBarcode.BarcodeCaptureSettings();
this.settings.enableSymbologies([
SDCBarcode.Symbology.EAN13UPCA,
SDCBarcode.Symbology.EAN8,
SDCBarcode.Symbology.UPCE,
SDCBarcode.Symbology.QR,
SDCBarcode.Symbology.DataMatrix,
SDCBarcode.Symbology.Code39,
SDCBarcode.Symbology.Code128,
SDCBarcode.Symbology.InterleavedTwoOfFive,
]);
this.barcodeCapture = await SDCBarcode.BarcodeCapture.forContext(this.context, this.settings);
await this.barcodeCapture.setEnabled(false);
this.overlay = await SDCBarcode.BarcodeCaptureOverlay.withBarcodeCaptureForView(this.barcodeCapture, this.view);
// await this.overlay.setViewfinder(new LaserlineViewfinder());
this.camera = SDCCore.Camera.default;
await this.camera.applySettings(SDCBarcode.BarcodeCapture.recommendedCameraSettings);
await this.context.setFrameSource(this.camera);
}
async connectToView(htmlElement: any) {
this.view?.connectToElement(htmlElement);
this.view?.addControl(new SDCCore.CameraSwitchControl());
}
async setScanArea() {
if (this.view) {
this.view.scanAreaMargins = new SDCCore.MarginsWithUnit(
new SDCCore.NumberWithUnit(0.2, SDCCore.MeasureUnit.Fraction),
new SDCCore.NumberWithUnit(0.333, SDCCore.MeasureUnit.Fraction),
new SDCCore.NumberWithUnit(0.2, SDCCore.MeasureUnit.Fraction),
new SDCCore.NumberWithUnit(0.333, SDCCore.MeasureUnit.Fraction)
);
}
}
async addOverlayAndViewfinder() {
if (this.barcodeCapture && this.view) {
this.overlay = await SDCBarcode.BarcodeCaptureOverlay.withBarcodeCaptureForView(this.barcodeCapture, this.view);
this.viewfinder = new SDCCore.RectangularViewfinder();
this.viewfinder.dimming = 0.3;
this.viewfinder.setSize(new SDCCore.SizeWithUnit(
new SDCCore.NumberWithUnit(1, SDCCore.MeasureUnit.Fraction),
new SDCCore.NumberWithUnit(1, SDCCore.MeasureUnit.Fraction)
));
await this.overlay.setViewfinder(this.viewfinder);
}
}
async enableCamera(enabled: boolean) {
if (this.camera) {
await this.camera!.switchToDesiredState(enabled ? SDCCore.FrameSourceState.On : SDCCore.FrameSourceState.Standby);
}
}
async enableScanning(enabled: boolean) {
await this.barcodeCapture?.setEnabled(enabled);
}
async addListener() {
this.barcodeCaptureListener = {
didScan: async (barcodeCapture, session) => {
let barcode = session.newlyRecognizedBarcode;
if (barcode) {
let symbology = new SDCBarcode.SymbologyDescription(barcode.symbology);
alert("Scanned: " + barcode.data + " " + symbology.readableName);
}
},
}
this.barcodeCapture!.addListener(this.barcodeCaptureListener);
}
async cleanup() {
await this.camera?.switchToDesiredState(SDCCore.FrameSourceState.Off);
await this.context?.dispose();
await this.context?.removeAllModes();
await this.view!.removeOverlay(this.overlay!);
this.barcodeCapture!.removeListener(this.barcodeCaptureListener!);
this.view?.detachFromElement();
}
}
Create a New Angular Component
Create a new component called scanner by running the following command:
$ ng generate component barcode-scanner
Add the following code snippets to the component's files:
barcode-scanner.component.html
<div id="data-capture-view" style="visibility: hidden"></div>
barcode-scanner.component.ts
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ScannerServiceProvider } from '../../scanner-service.service';
@Component({
selector: 'app-scanner',
standalone: true,
imports: [],
templateUrl: './scanner.component.html',
styleUrl: './scanner.component.css'
})
export class ScannerComponent implements OnInit, OnDestroy {
constructor(
public scanner: ScannerServiceProvider
) { }
async ngOnInit(): Promise<void> {
// If scanner was already initiated, only resume it instead of recreating it from scratch.
// This should happen when you simply navigate between pages.
if (this.scanner.barcodeCapture) {
this.scanner.resume(document.getElementById("data-capture-view")!);
document.getElementById("data-capture-view")!.style.visibility = "visible";
// Otherwise configure the library and create a new instance.
// This should happen when you reload the app.
} else {
this.scanner.start(document.getElementById("data-capture-view")!);
}
}
ngOnDestroy(): void {
this.scanner.pause();
// In case a full cleanup is needed, you can execute the below line.
// this.scanner.cleanup();
}
}
Reference Scanner Component
If you created your app without routing, you can add the routing module by running the following command:
$ ng generate module app-routing --flat --module=app
Once it's ready, you can reference the Scanner component in the
app-routing.module.ts/app.routes.ts file by adding the below code snippet: ...
import { Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ScannerComponent } from './scanner/scanner.component';
export const routes: Routes = [
{
path: 'scanner',
component: ScannerComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
...
Add a button on the main page to navigate to the Scanner component by adding the below code snippet in the
app.component.html file:<mat-toolbar>
<mat-toolbar-row>
<span>Scandit WebSDK v7 Angular Sample</span>
</mat-toolbar-row>
<mat-toolbar-row>
<span class="example-spacer"></span>
<a class="nav-link" routerLink="/" routerLinkActive="active">
/ Home
</a>
</mat-toolbar-row>
<mat-toolbar-row>
<span class="example-spacer"></span>
<a class="nav-link" routerLink="/scanner" routerLinkActive="active">
/ Scanner
</a>
</mat-toolbar-row>
</mat-toolbar>
<router-outlet></router-outlet>
You can also add some styling to the main page in the app.component.css; file, e.g.:
button {
background-color: #555;
color: white;
font-size: 2vh;
font-family: 'Arial', sans-serif;
box-sizing: border-box;
padding: 2vh 5vh;
margin-top: 5vh;
margin-bottom: 5vh;
max-width: 30vw;
}
h1 {
text-align: center;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.example-spacer {
flex: 1 1 auto;
}
How to Add a Scandit License Key
Replace the YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE string with your web license key under src/scanner-service.service.ts
How to Run the Angular App
Build your app with ng build and then run it with ng serve. At this point you should be able to see a working scanner at localhost:4200.