Follow

Angular - Using WebSDK with Angular

The Angular framework is supported by Scandit technology and the purpose of the following article is to facilitate the integration and setting up of your Angular application alongside Scandit SDK.

 

Create a new project (optional)

If you still do not have a Angular project that you will use, you should create a new one.

$ ng new helloscandit
$ cd helloscandit

 

Add needed Scandit plugins 

Add the Core and Barcode plugins (as described in our documentation).  

$ npm install scandit-web-datacapture-core
$ npm install 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 the CDN link, as described here: https://docs.scandit.com/data-capture-sdk/web/get-started-barcode.html#configure-and-initialize-the-library.  For the purpose of this guide, we'll use the CDN link, as shown below. 

 

Create a new component

Create a new component called `scanner` by running the following command: 

$ ng generate component scanner

 

Add the following code snippets to the component's files:

- `scanner.component.html`

<div id="data-capture-view"></div>

- `scanner.component.ts`

import { Component, OnInit } from '@angular/core';

import * as SDCCore from 'scandit-web-datacapture-core';
import * as SDCBarcode from 'scandit-web-datacapture-barcode';

@Component({
selector: 'app-scanner',
templateUrl: './scanner.component.html',
styleUrls: ['./scanner.component.css']
})

export class ScannerComponent implements OnInit {

constructor() { }

async ngOnInit(): Promise<void> {
await SDCCore.configure({
licenseKey: "YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE",
libraryLocation: "https://cdn.jsdelivr.net/npm/scandit-web-datacapture-barcode@6.x/build/engine/",
moduleLoaders: [SDCBarcode.barcodeCaptureLoader()]
});

const context = await SDCCore.DataCaptureContext.create();

const camera = SDCCore.Camera.default;
await context.setFrameSource(camera);

const settings = new SDCBarcode.BarcodeCaptureSettings();
settings.enableSymbologies([
SDCBarcode.Symbology.Code128,
SDCBarcode.Symbology.Code39,
SDCBarcode.Symbology.QR,
SDCBarcode.Symbology.EAN8,
SDCBarcode.Symbology.UPCE,
SDCBarcode.Symbology.EAN13UPCA
]);

const symbologySetting = settings.settingsForSymbology(SDCBarcode.Symbology.Code39);
symbologySetting.activeSymbolCounts = [7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];

const barcodeCapture = await SDCBarcode.BarcodeCapture.forContext(context, settings);
await barcodeCapture.setEnabled(false);

barcodeCapture.addListener({
didScan: async (barcodeCapture, session) => {
await barcodeCapture.setEnabled(false);
const barcode = session.newlyRecognizedBarcodes[0];
const symbology = new SDCBarcode.SymbologyDescription(barcode.symbology);
alert("Scanned: "+barcode.data+" "+symbology.readableName);
await barcodeCapture.setEnabled(true);
},
});


const view = await SDCCore.DataCaptureView.forContext(context);
view.connectToElement(document.getElementById("data-capture-view")!);
view.addControl(new SDCCore.CameraSwitchControl());

const barcodeCaptureOverlay =
await SDCBarcode.BarcodeCaptureOverlay.withBarcodeCaptureForViewWithStyle(
barcodeCapture,
view,
SDCBarcode.BarcodeCaptureOverlayStyle.Frame
);

const viewfinder = new SDCCore.RectangularViewfinder(
SDCCore.RectangularViewfinderStyle.Square,
SDCCore.RectangularViewfinderLineStyle.Light
);
await barcodeCaptureOverlay.setViewfinder(viewfinder);

await camera.switchToDesiredState(SDCCore.FrameSourceState.On);
await barcodeCapture.setEnabled(true);
}
}

 

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` file by adding the below code snippet: 
...
import { Routes } from '@angular/router';
import
{ ScannerComponent } from './scanner/scanner.component';

const routes: Routes = [
{ path: 'scanner', component: ScannerComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
...
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:
<h1>Scandit WebSDK 6 Angular Sample</h1>
<button [routerLink]="'scanner'"> Open Scanner </button>
<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: inherit;
box-sizing: border-box;
padding: 2vh 5vh;
margin-top: 5vh;
margin-bottom: 5vh;
max-width: 20vw;
margin-left: 40vw;
}

h1 {
text-align: center;
}

 

Set the license key

Replace the `YOUR_SCANDIT_LICENSE_KEY_IS_NEEDED_HERE` string with your web license key under `src/app/scanner/scanner.component.ts`. 

Run the app

 Run the app with `ng serve`. At this point you should be able to see a working scanner at `localhost:4200`.

 

For more details, please refer to our official documentation: https://docs.scandit.com/data-capture-sdk/web/index.html or you can reach out to us directly at support@scandit.com.

Was this article helpful?
0 out of 1 found this helpful
Have more questions? Submit a request