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
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.7.3/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"scandit-web-datacapture-core": "https://cdn.jsdelivr.net/npm/scandit-web-datacapture-core@[version]/build/js/index.js",
"scandit-web-datacapture-barcode": "https://cdn.jsdelivr.net/npm/scandit-web-datacapture-barcode@[version]/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:
Before You Start: guides you through the process of adding barcode scanning to your app
Before You Start: guides you through the process of scanning multiple barcodes at once and use AR overlays in your app
Get Started With ID Capture: guides you through the process of adding ID scanning to your app