Angular Integration Example WASM

Please find below a sample code that will help you get through the integration problem with Angular.

You can obtain the barKoder Web Integration Sample for Angular by registering on the barKoder Developer Portal and downloading the JavaScript SDK via the barKoder for WASM package and unpack it in your preferred location.

It's based on Angular 16 dependencies but it shouldn't be any different in earlier or later versions of the Angular framework. The main implementation is in app.component.ts

The steps for using this project are:

                npm install

npm run build
            

Note that the 2nd command creates a production-ready build, which is meant to be deployed under a production web server (Apache, etc). In that case, before executing the 2nd command, you should modify the package.json file:

                "build": "ng build --base-href /path/angular_demo/dist/barkoder-angular-demo/",
            

in the above line, the path should be changed to the actual path where the angular_demo directory will be w.r.t. the web server root directory.

Another way of trying out the project is with:

                npm start
            

which will host the app on http://localhost:4200/

One thing to note, if you are trying to do the same in your own project, is the usage of wasm binary files. These are copied during prebuild (package.json), and are listed as assets (angular.json):

                    "assets": [
                  "src/favicon.ico",
                  "src/assets",
         "src/barkoder.wasm",
         "src/barkoder_nosimd.wasm"
                ],
            

so if you want to match our demo, you should match what is done in package.json and in angular.json for the barkoder.wasm and barkoder_nosimd.wasm files. The main goal is for those resources to be part of the module system, and to be added in the generated build.

Creating Barkoder Configuration #

The BarkoderSDK.initialize method is responsible for setting up the configuration required to initiate barcode scanning. This configuration includes the license key necessary for validating and activating the SDK.

If the license key is invalid or missing, the scan results will contain an "UNLICENSED" prefix and random asterisks.

                // Configure the BarkoderSDK with a valid license key to enable scanning

// The license result is printed in the console in the following format:
// [Module] Barkoder response: License OK
// to ensure the SDK is properly licensed

this.Barkoder = await BarkoderSDK.initialize("your_license_key_here");
            

Enabling Symbologies #

Here's a detailed and refined explanation of how you can enable individual symbologies for barcode scanning using both direct configuration and JSON configuration in JavaScript:

Enabling Symbologies Directly #

You can enable individual symbologies directly by passing the decoders (symbologies) to enable as arguments. Here's a method that demonstrates how to do this:

                this.Barkoder.setEnabledDecoders(
    this.Barkoder.constants.Decoders.QR,
    this.Barkoder.constants.Decoders.Ean8,
    this.Barkoder.constants.Decoders.PDF417
);
            

This is the entire list of all decoders/symbologies: #

                    Barkoder.constants.Decoders.Aztec
    Barkoder.constants.Decoders.AztecCompact
    Barkoder.constants.Decoders.QR
    Barkoder.constants.Decoders.QRMicro
    Barkoder.constants.Decoders.Code128
    Barkoder.constants.Decoders.Code93
    Barkoder.constants.Decoders.Code39
    Barkoder.constants.Decoders.Codabar
    Barkoder.constants.Decoders.Code11
    Barkoder.constants.Decoders.Msi
    Barkoder.constants.Decoders.UpcA
    Barkoder.constants.Decoders.UpcE
    Barkoder.constants.Decoders.UpcE1
    Barkoder.constants.Decoders.Ean13
    Barkoder.constants.Decoders.Ean8
    Barkoder.constants.Decoders.PDF417
    Barkoder.constants.Decoders.PDF417Micro
    Barkoder.constants.Decoders.Datamatrix
    Barkoder.constants.Decoders.Code25
    Barkoder.constants.Decoders.Interleaved25
    Barkoder.constants.Decoders.ITF14
    Barkoder.constants.Decoders.IATA25
    Barkoder.constants.Decoders.Matrix25
    Barkoder.constants.Decoders.Datalogic25
    Barkoder.constants.Decoders.COOP25
    Barkoder.constants.Decoders.Code32
    Barkoder.constants.Decoders.Telepen
    Barkoder.constants.Decoders.Dotcode
    Barkoder.constants.Decoders.Databar14
    Barkoder.constants.Decoders.DatabarLimited
    Barkoder.constants.Decoders.DatabarExpanded