Web SDK Installation

Before you start #

Requirements #

1. A browser: Chrome 67+, Firefox 69+, Edge 79+, Safari 14+ or iOS Safari 14+
2. The camera permission, to scan with the camera (startScanner)
3. A server with HTTPS that sends .wasm files as application/wasm

1. Add the package #

Install #

npm install barkoder-wasm

Install Manually #

To install from a local folder instead:

• Download the zip from Downloads in the barKoder Developer Portal
• Unpack it
• Rename the folder if you like and put it in your app's folder, for example myApp/barkoder-wasm
• Install it, in your app's folder:

npm install "./barkoder-wasm"

2. Set the license key and barcode types #

License key #

Your key goes in BarkoderSDK.initialize("your_license_key_here"), in the code of step 3.

Barcode types #

The SDK reads only the barcode types you turn on. In barkoderInit() (step 3) they are turned on with:

//enable symbologies you'd like to scan
  Barkoder.setEnabledDecoders(
      Barkoder.constants.Decoders.QR,
      Barkoder.constants.Decoders.Ean8,
      Barkoder.constants.Decoders.PDF417
  );

All the types are listed under Decoders in the API reference.

3. Start scanning and read results #

Using the SDK #

Browser #

Copy both barkoder-umd.js and barkoder.wasm to your page's directory.

Include the barkoder-umd.js script:

<script type="text/javascript" src="barkoder-umd.js"></script>

CommonJS #

Copy barkoder.wasm to your page's directory (i.e. dist).

Require the UMD Module:

var BarkoderSDK = require('barkoder-wasm');

Then, in your JS file, initialize the SDK with your license key and turn on the barcode types:

var Barkoder; // set by barkoderInit(), used by the code below

async function barkoderInit () {
    Barkoder = await BarkoderSDK.initialize("your_license_key_here");

    //enable symbologies you'd like to scan
    Barkoder.setEnabledDecoders(
        Barkoder.constants.Decoders.QR,
        Barkoder.constants.Decoders.Ean8,
        Barkoder.constants.Decoders.PDF417
    );

    //change any additional settings
    Barkoder.setCameraResolution(Barkoder.constants.CameraResolution.FHD);
    Barkoder.setDecodingSpeed(Barkoder.constants.DecodingSpeed.Normal);
}

In your HTML, add the element the camera preview goes in, with the id barkoder-container:

<div id="barkoder-container" style="width: 500px; height: 300px;"></div>

Then scan with the camera, or a picture:

let callbackMethod = (result) => alert(`${result.barcodeTypeName}\n${result.textualData}`);

// barkoderInit() is async: scan once it has finished
barkoderInit().then(() => {
    // with the camera (in the barkoder-container element); Barkoder.stopScanner() stops it
    Barkoder.startScanner(callbackMethod);

    // or a picture: Barkoder.scanImage('test.png', callbackMethod);
});