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 (Nginx, 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 relative to 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 //: 0,
Barkoder.constants.Decoders.AztecCompact //: 1,
Barkoder.constants.Decoders.QR //: 2,
Barkoder.constants.Decoders.QRMicro //: 3,
Barkoder.constants.Decoders.Code128 //: 4,
Barkoder.constants.Decoders.Code93 //: 5,
Barkoder.constants.Decoders.Code39 //: 6,
Barkoder.constants.Decoders.Codabar //: 7,
Barkoder.constants.Decoders.Code11 //: 8,
Barkoder.constants.Decoders.Msi //: 9,
Barkoder.constants.Decoders.UpcA //: 10,
Barkoder.constants.Decoders.UpcE //: 11,
Barkoder.constants.Decoders.UpcE1 //: 12,
Barkoder.constants.Decoders.Ean13 //: 13,
Barkoder.constants.Decoders.Ean8 //: 14,
Barkoder.constants.Decoders.PDF417 //: 15,
Barkoder.constants.Decoders.PDF417Micro //: 16,
Barkoder.constants.Decoders.Datamatrix //: 17,
Barkoder.constants.Decoders.Code25 //: 18,
Barkoder.constants.Decoders.Interleaved25 //: 19,
Barkoder.constants.Decoders.ITF14 //: 20,
Barkoder.constants.Decoders.IATA25 //: 21,
Barkoder.constants.Decoders.Matrix25 //: 22,
Barkoder.constants.Decoders.Datalogic25 //: 23,
Barkoder.constants.Decoders.COOP25 //: 24,
Barkoder.constants.Decoders.Code32 //: 25,
Barkoder.constants.Decoders.Telepen //: 26,
Barkoder.constants.Decoders.Dotcode //: 27,
Barkoder.constants.Decoders.Databar14 //: 29,
Barkoder.constants.Decoders.DatabarLimited //: 30,
Barkoder.constants.Decoders.DatabarExpanded //: 31,
Barkoder.constants.Decoders.PostalIMB //: 32,
Barkoder.constants.Decoders.Postnet //: 33,
Barkoder.constants.Decoders.Planet //: 34,
Barkoder.constants.Decoders.AustralianPost //: 35,
Barkoder.constants.Decoders.RoyalMail //: 36,
Barkoder.constants.Decoders.KIX //: 37,
Barkoder.constants.Decoders.JapanesePost //: 38