Skip to main content

Get Started

In this guide you will learn step-by-step how to add SparkScan to your application. The general steps are:

  1. Create a new Data Capture Context instance.
  2. Configure the Spark Scan Mode.
  3. Create the SparkScanView with the desired settings and bind it to the application’s lifecycle.
  4. Register the listener to be informed when new barcodes are scanned and update your data whenever this event occurs.

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.
  • If you have not already done so, see this guide for information on how to add the Scandit Data Capture SDK to your project
note

Devices running the Scandit Data Capture SDK need to have a GPU or the performance will drastically decrease.

Create a New Data Capture Context Instance​

The first step to add capture capabilities to your application is to create a new Data Capture Context. The context expects a valid Scandit Data Capture SDK license key during construction.

const context = Scandit.DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

Configure the SparkScan Mode​

The SparkScan Mode is configured through SparkScanSettings and allows you to register one or more listeners that are informed whenever a new barcode is scanned.

For this tutorial, we will set up SparkScan for scanning EAN13 codes. Change this to the correct symbologies for your use case (for example, Code 128, Code 39…).

const settings = new Scandit.SparkScanSettings();
settings.enableSymbologies([Symbology.EAN13UPCA]);

Next, create a SparkScan instance with the settings initialized in the previous step:

const sparkScan = Scandit.SparkScan.forSettings(settings);

Setup the Spark Scan View​

The SparkScan built-in user interface includes the camera preview and scanning UI elements. These guide the user through the scanning process.

The SparkScanView appearance can be customized through SparkScanViewSettings.

const viewSettings = new Scandit.SparkScanViewSettings();
// setup the desired appearance settings by updating the fields in the object above

See the SparkScan Workflow Options section for more information.

By adding a SparkScanView, the scanning interface (camera preview and scanning UI elements) will be added automatically to your application.

Add a SparkScanView to your view hierarchy. Construct a new SparkScan view. The SparkScan view is automatically added to the provided parentView:

const sparkScanComponent = (
	<SparkScanView
		context={context}
		sparkScan={sparkScan}
		sparkScanViewSettings={viewSettings}
	/>
);

Additionally, make sure to call SparkScanView.stopScanning() in your app state handling logic. You have to call this for the correct functioning of the SparkScanView.

componentWillUnmount() {
sparkScanComponent.stopScanning();
}

handleAppStateChange = async (nextAppState) => {
if (nextAppState.match(/inactive|background/)) {
sparkScanComponent.stopScanning();
}
}

Register the Listener​

To keep track of the barcodes that have been scanned, implement the SparkScanListener interface and register the listener to the SparkScan mode.

// Register a listener object to monitor the spark scan session.

const listener = {
	didScan: (sparkScan, session, getFrameData) => {
		// Gather the recognized barcode
		const barcode = session.newlyRecognizedBarcode[0];

		// Handle the barcode
	},
};

sparkScan.addListener(listener);

SparkScanListener.didScan() is called when a new barcode has been scanned. This result can be retrieved from the first object in the provided barcodes list: SparkScanSession.newlyRecognizedBarcode. Please note that this list only contains one barcode entry.

Scan Some Barcodes​

Now that you’re up and running, go find some barcodes to scan. Don’t feel like getting up from your desk? Here’s a handy pdf of barcodes you can print out.