Add the SDK to Your App

This guide shows you how to add the Scandit Data Capture SDK to current existing project.

Prerequisites

  • The latest stable version of Node.js and npm (required only if including and building the SDK as part of an app, instead of just including it as an external resource from a CDN in HTML).

  • A valid Scandit Data Capture SDK license key. You can sign up for a free test account at ssl.scandit.com.

Note

Devices running the Scandit Data Capture SDK need to have a GPU and run a browser capable of making it available (requires WebGL - current support? and OffscreenCanvas - current support?) or the performance will drastically decrease.

Get a License Key

  1. If you don’t have a Scandit account yet, create a free test account at ssl.scandit.com.

  2. Sign in to your account at ssl.scandit.com/sessions/new.

  3. Select “License Keys” from the left-hand menu.

  4. If you don’t have a license key for your app yet, click “Create web SDK license key” and enter the domain name for your project.

  5. Copy the license key.

If you have a paid subscription, please reach out to support@scandit.com if you need a new license key.

Add the SDK

Currently we support adding the Scandit Data Capture SDK Web library to your project in two ways. You can either add it as an external resource from a CDN in HTML, or add it as a package dependency via npm to your project to be built.

The scandit-web-datacapture-core npm package is always required and contains the shared functionality used by the other data capture modules. Depending on your use-case, you may then add dependencies to scandit-web-datacapture-barcode to scan barcodes, or scandit-web-datacapture-id to scan ID documents for example. You will find all the npm packages providing data capture functionality under this npm link.

Add the Scandit Data Capture SDK as an external resource

You can use the jsDelivr or UNPKG CDN to specify a certain version (range) and include and import from our library as follows (example for barcode capture):

<!-- polyfill browsers not supporting import maps  -->
<script async src="https://ga.jspm.io/npm:es-module-shims@1.5.8/dist/es-module-shims.js"></script>
<script type="importmap">
  {
    "imports": {
      "scandit-web-datacapture-core": "https://cdn.jsdelivr.net/npm/scandit-web-datacapture-core@6.15.0/build/js/index.js",
      "scandit-web-datacapture-barcode": "https://cdn.jsdelivr.net/npm/scandit-web-datacapture-barcode@6.15.0/build/js/index.js"
    }
  }
</script>

<script type="module">
  // Import everything
  import * as SDCCore from "scandit-web-datacapture-core";
  import * as SDCBarcode from "scandit-web-datacapture-barcode";

  // And/or import only needed items (examples)
  import { DataCaptureContext, Camera } from "scandit-web-datacapture-core";
  import { BarcodeCapture } from "scandit-web-datacapture-barcode";

  // Insert your code here
</script>

Note

The alternative link(s) for UNPKG would be https://unpkg.com/scandit-web-datacapture-core@6.x and https://unpkg.com/scandit-web-datacapture-barcode@6.x.

Alternatively, you can also put the same JavaScript/TypeScript code in a separate file via:

<script type="module" src="script.js"></script>

Add the Scandit Data Capture SDK via npm

To add our library via npm, you can run this command from your project’s root folder:

npm install --save scandit-web-datacapture-core scandit-web-datacapture-barcode

Note

You can also specify a version @<version>.

You can then import and use whatever is needed from the library in your JavaScript/TypeScript code by using:

// Import everything
import * as SDCCore from "scandit-web-datacapture-core";
import * as SDCBarcode from "scandit-web-datacapture-barcode";

// And/or import only needed items (examples)
import { DataCaptureContext, Camera } from "scandit-web-datacapture-core";
import { BarcodeCapture } from "scandit-web-datacapture-barcode";

// Insert your code here

Additional Information

  • When using the Scandit Data Capture SDK you will want to set the camera as the frame source for various capture modes. The camera permissions are handled by the browser, can only be granted if a secure context is used and have to be accepted by the user explicitly when needed.

Next steps

You are now ready to tackle the following guides: