# Scandit Barcode Scanner SDK for the Web - Angular Component

Angular component for the [Scandit WebSDK](https://www.npmjs.com/package/scandit-sdk).

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

_Made by [Scandit](https://www.scandit.com/)_

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](https://ssl.scandit.com/customers/new?p=test&source=websdk).

**Table of Contents:**

<!-- TOC depthFrom:2 -->

- [Scandit Barcode Scanner SDK for the Web - Angular Component](#scandit-barcode-scanner-sdk-for-the-web---angular-component)
  - [Angular project integration](#angular-project-integration)
    - [Install the Scandit Angular WebSDK](#install-the-scandit-angular-websdk)
    - [Add the component to your project](#add-the-component-to-your-project)
    - [Use the component in your project](#use-the-component-in-your-project)
  - [Breaking changes](#breaking-changes)
    - [v3.x](#v3x)
  - [Documentation](#documentation)
  - [License](#license)
  - [Support](#support)

<!-- /TOC -->

## 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.

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

- Add `ScanditSdkModule.forRoot(licenseKey, { engineLocation })` to `imports`, passing in your license key and the engine location ([learn more](https://docs.scandit.com/stable/web/index.html#configuration) about configuration and the optional `preloadEngine` and `preloadBlurryRecognition` parameters).

  ```typescript
  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](https://docs.scandit.com/stable/web/#configuration) for more information about this step).

### Use the component in your project

Add the component to your view:

```html
<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:

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

For a fully customized picker, see the example below:

```html
<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](https://docs.scandit.com/stable/web/modules/singleimagemodesettings.html).

## 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](https://www.apache.org/licenses/LICENSE-2.0).

## Support

For questions or support please use the form you can find [here](https://support.scandit.com/hc/en-us/requests/new) or send us an email to [support@scandit.com](mailto:support@scandit.com).