AngularJS Barcode Scanner

Thanks to the Scanbot Web Barcode Scanner SDK’s Ready-to-Use UI Components, you can add barcode scanning functionalities to your website or web app in a matter of minutes.

To create a simple web app using Angular, following best practices with standalone components and injectable services, first navigate into your project directory and install the scanbot-web-sdk package using the --save option to add it to your project’s dependencies:

npm install scanbot-web-sdk --save

Copy the SDK’s WebAssembly binaries from node_modules to wasm in the public asset directory using the following command:

mkdir -p public/wasm && cp -r node_modules/scanbot-web-sdk/bundle/bin/barcode-scanner/* public/wasm

Next, add a service to handle the Scanbot SDK initialization and scanner configuration by creating a directory src/app/services and a file called barcode-scanner.service.ts inside it with the following code:

import { Injectable, signal } from '@angular/core';
import ScanbotSDK from 'scanbot-web-sdk/ui';

@Injectable({
  providedIn: 'root',
})
export class BarcodeScannerService {
  private readonly scanResult = signal(null);

  constructor() {
    this.initScanbotSDK(); // Initialize SDK in constructor
  }

  // Initialization method for constructor
  private initScanbotSDK(): void {
    try {
      const settings = {
        licenseKey: '', // Add your license key or leave blank for trial
        enginePath: '/wasm/', // Location of the engine's WebAssembly/JS files
      };
      ScanbotSDK.initialize(settings);
    } catch (error) {
      console.error('Error initializing Scanbot SDK:', error);
    }
  }

  getScanResult() {
    return this.scanResult.asReadonly();
  }

  async startScanner() {
    const config = this.createScannerConfig();
    const result = await ScanbotSDK.UI.createBarcodeScanner(config);
    if (result && result.items.length > 0) {
      this.scanResult.set(result.items[0].barcode.text);
    }
    return result;
  }

  private createScannerConfig() {
    const config = new ScanbotSDK.UI.Config.BarcodeScannerScreenConfiguration();
    // Single/multi-barcode scanning configuration
    const useCase = new ScanbotSDK.UI.Config.SingleScanningMode();
    config.useCase = useCase;
    // AR overlay configuration
    useCase.arOverlay.visible = false;
    useCase.arOverlay.automaticSelectionEnabled = false;
    return config;
  }
}

Now add a scanner component to which the scanner service will be attached (injected) by creating a new directory src/app/components/scanner and a file called scanner.component.ts inside it with the following code:

import { Component, inject } from '@angular/core';
import { BarcodeScannerService } from '../../services/barcode-scanner.service';

@Component({
  selector: 'app-scanner',
  standalone: true,
  template: `
    <div class="scanner-container">
      <button class="scan-button" (click)="startScanner()">Start Scanner</button>
      @if (scanResult()) {
        <div class="result">Scanned Code: {{ scanResult() }}</div>
      }
    </div>
  `,
  styles: [
    /* ... your styles ... */
  ],
})
export class ScannerComponent {
  private readonly scannerService = inject(BarcodeScannerService);
  protected readonly scanResult = this.scannerService.getScanResult();

  async startScanner() {
    await this.scannerService.startScanner();
  }
}

Update the root app component to use our scanner component by replacing the contents of src/app/app.component.ts with the following:

import { Component } from '@angular/core';
import { ScannerComponent } from './components/scanner/scanner.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ScannerComponent],
  template: `
    <h1>Scanbot Barcode Scanner Demo</h1>
    <app-scanner></app-scanner>
  `,
  styles: [
    /* ... your styles ... */
  ],
})
export class AppComponent {}

With this setup, you now have a fully functional barcode scanner! Check out our comprehensive, step-by-step tutorial that guides you through the entire process of how to build a Web Barcode Scanner using AngularJS.