Scandit Barcode Scanner SDK for the Web - Angular Component

Angular component for the Scandit WebSDK.

Enterprise barcode scanning performance in your browser via JavaScript and WebAssembly.

Made by Scandit

Access cameras available on the devices for video input, display a barcode picker interface, configure in-depth settings for barcode symbologies and performance, and let users easily scan barcodes in your web application.

To use this library you must possess a valid Scandit account and license key. You can register for a free trial here.

Table of Contents:

• Scandit Barcode Scanner SDK for the Web - Angular Component
  • Angular project integration
    • Install the Scandit Angular WebSDK
    • Add the component to your project
    • Use the component in your project
  • Breaking changes
    • v3.x
  • Documentation
  • License
  • Support

Angular project integration

Install the Scandit Angular WebSDK

Run npm install scandit-sdk-angular --save to install the Scandit Angular WebSDK library and save it to your dependencies.

Add the component to your project

Perform the following steps inside your root module (app.module.ts), or in case you're developing your own submodule, inside your own submodule file:

• Import the Scandit WebSDK module.

  import { ScanditSdkModule } from "scandit-sdk-angular";

• Add ScanditSdkModule.forRoot(licenseKey, { engineLocation }) to imports, passing in your license key and the engine location (learn more about configuration and the optional preloadEngine and preloadBlurryRecognition parameters).

  const licenseKey = "YOUR_LICENSE_KEY_IS_NEEDED_HERE";
  const engineLocation = "assets/";
  
  @NgModule({
    declarations: [... ],
    imports: [
      ...
      ScanditSdkModule.forRoot(licenseKey, { engineLocation, preloadEngine?: true, preloadBlurryRecognition?: true })
    ],
    bootstrap: [...],
    entryComponents: [ ... ],
    providers: [ ... ]
  })

• Copy the WebSDK needed WebAssembly files node_modules/scandit-sdk-angular/assets/scandit-engine-sdk.min.js and node_modules/scandit-sdk-angular/assets/scandit-engine-sdk.wasm to the assets folder of your project and specify "assets/" as the engine location. Other setups to make these static files available are obviously possible, you can later tweak this to match your requirements (see the configuration documentation for more information about this step).

Use the component in your project

Add the component to your view:

<scandit-sdk-barcode-picker
  [scanSettings]="settings"
  (scan)="onScan($event)"
  (error)="onError($event)"
></scandit-sdk-barcode-picker>

For the above example you also need in your view controller the following (example), to expose the settings variable to your view:

public settings = new ScanSettings({ enabledSymbologies: [Barcode.Symbology.CODE128] });

For a fully customized picker, see the example below:

<scandit-sdk-barcode-picker
  [accessCamera]="true"
  [camera]="camera"
  [cameraSettings]="cameraSettings"
  [enableCameraSwitcher]="true"
  [enableTorchToggle]="true"
  [enablePinchToZoom]="true"
  [enableTapToFocus]="true"
  [guiStyle]="laser"
  [paused]="false"
  [playSoundOnScan]="true"
  [vibrateOnScan]="true"
  [scanSettings]="scanSettings"
  [targetScanningFPS]="30"
  [zoom]="0"
  [videoFit]="contain"
  [visible]="visible"
  [mirrorImage]="false"
  [laserArea]="laserArea"
  [viewfinderArea]="viewfinderArea"
  [singleImageModeSettings]="singleImageModeSettings"
  (submitFrame)="onSubmitFrame($event)"
  (processFrame)="onProcessFrame($event)"
  (scan)="onScan($event)"
  (init)="onInit()"
  (ready)="onReady()"
  (error)="onError($event)"
></scandit-sdk-barcode-picker>

Breaking changes

v3.x

• Angular 8 is now the minimum supported version (2.0.7 is the latest version supporting Angular 7).
• The module configuration now takes an options object as second parameter instead of a string: ScanditSdkModule.forRoot(licenseKey: string, options: object). The property options.engineLocation should point to the public location of the files scandit-engine-sdk.min.js and scandit-engine-sdk.wasm.
• The component's singleImageMode attribute is now replaced by singleImageModeSettings, accepting a newly structured settings object.

Documentation

An updated in-depth documentation of all of the libraries' specifications and functionalities can be found in the docs folder.

License

This project is licensed under the Apache License, Version 2.0.

Support

For questions or support please use the form you can find here or send us an email to [email protected].