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:
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 support@scandit.com.