Follow

How to Setup the Scandit Web SDK with Angular

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.

Was this article helpful?
3 out of 5 found this helpful
Have more questions? Submit a request