Note

The SparkScan APIs are still in beta and may change in future versions of Scandit Data Capture SDK.

High-Speed Single Scanning

What is SparkScan?

For most people integrating scanning for the first time our pre-built component SparkScan is the best and quickest place to start. It includes a pre-built scanning interface that floats on top of any native application.

This bundles multiple scanning features together and addresses many common challenges associated with scanning on smart devices.

_images/intro.gif
orphan

nosearch

Run SparkScan Samples

SparkScan Quick Start Guide

Add the SDK to your App

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.

Add the SDK

Get a License Key

  1. Sign up or Sign in to your Scandit account

  2. Create a project

  3. Create a license key by specifying your bundle ID

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

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.

Progressive Web App (PWA)

You can easily configure the scanner to work offline making the web app progressive (Progressive Web App). There are some settings to consider though. If you use workbox , or you’re using a tool that use workbox under the hood like Vite PWA , you must consider to set these options:

{
  globPatterns: ["**/*.{css,html,ico,png,svg,woff2}", "**/*.{wasm,js,data}"], // Be sure to add also .wasm
  maximumFileSizeToCacheInBytes: 20 * 1024 * 1024, // Increase size cache up to 6mb
  ignoreURLParametersMatching: [/^v/], // Ignore ?v=x.x.x query string param when using importScripts
}

With these settings in place and the service worker correctly configured, you will be able to have a full offline scanning experience.

Note: on iOS there’s a persisting issue while accessing the video stream inside a progressive web app

Get Started With SparkScan

Learn More About SparkScan

UI overview

The SparkScan’s UI is minimal, meant to be overlayed on top of any application without the need to adapt the existing app - while offering the best user experience.

Three main elements compose the UI:

_images/mini-preview.png _images/scan-button.png

Mini preview: A small camera preview screen giving a visual confirmation while aiming at the code. This is placed in the top right corner, where the phone camera is located. Its size depends on the scanning mode enabled.

Trigger button: A large-sized floating button that users can drag up and down to position it in the most convenient and ergonomic place. This eliminates the need to look at the screen to trigger scanning.

Settings Toolbar: A quick-access toolbar that includes controls of settings (like the torch, haptics feedback etc.), scan modes (like switching to continuous scanning, enabling the target mode etc,) and more. More info on the scanning modes in the following section.

NOTE: Additional UI elements are available for developers to use if their app logic requires displaying errors or additional feedback while scanning. More information in Customisation and advanced capabilities.

_images/features.png

Workflow Description

  • When SparkScan is started, the UI presents just the trigger button, collapsed on the side.

  • To start scanning, the user can:

    • swipe to open the button, then tap on it.

    • tap on the collapsed trigger button.

_images/workflow1.gif _images/workflow2.gif

Swipe and tap to start the scanner.

Tap to start the scanner.

  • When the scanner is active, the mini preview becomes visible.

  • Depending on the scanning mode enabled, the workflow will behave differently:

    • In Single Scan, upon scan the user will receive audio/haptic feedback confirming the scan, and the mini preview will display the scanned barcode for a small amount of time. The scanner will need to be restarted to scan a new code.

    • In Continuous Scan, upon scan the user will receive audio/haptic feedback confirming the scan. The mini preview keeps showing the camera preview, ready to scan a new code.

_images/listbuilding1.gif _images/listbuilding2.gif

Single Scan.

Continuous Scan.

  • Upon completing the scanning process (or to interact with the customer app layer), the user can tap in any area outside the trigger button and the mini preview. This collapses the scanner button back to the side, going back to the initial state.

_images/collapse-ui.gif

Collapse the SparkScan UI.

Supported Devices

Runs on iOS and Android devices.

Supported Symbologies

SparkScan supports all of the major symbologies listed here: Barcode Symbologies except DotCode, MaxiCode and postal codes (KIX, RM4SCC, LAPA 4SC and USPS Intelligent Mail).

For more symbology specific information, please refer to this link.

Customisation and advanced capabilities

SparkScan offers an out-of-the-box experience optimized for efficiency and a frictionless worker experience. This experience has been crafted after many user testing and with the product knowledge gained in the many years of Scandit.
While this out-of-the-box experience will suit most use-cases, we understand there are some special cases in which some configuration is still needed.
In this page, we collect the main customization and advanced settings you may need to customize SparkScan to obtain the best experience possible.

Advanced capabilities

Hold-to-scan gesture

In addition to the standard tap-to-scan interaction, in which the users tap the trigger button to enable the scanner, users can hold down the scan button to perform a hold-to-scan interaction. In this case, regardless of the scanning behavior (whether is Single Mode or Continuous Mode), the scanner will be active (scanning barcodes) as long as the button is pressed.

Developers can disable this gesture via SparkScanViewSettings.holdToScanEnabled.

EXAMPLE: to create a workflow in which only Single Scan is possible, developers will need to:

Trigger the Error State

You may want to introduce logic in your app to show an error message when scanning specific barcodes (e.g. barcodes already added to the list, barcodes from the wrong lot etc.). SparkScan offers a built-in error state you can easily set to trigger an error feedback prompt to the user. You will be able to customize:

An error example is here reported:

self.sparkScanView.emitFeedback(SparkScanViewErrorFeedback(message: "This code should not have been scanned", resumeCapturingDelay: 6, visualFeedbackColor: UIColor.red))

NOTE: you can have different error states triggered by different logic conditions. For example you can trigger an error state when a wrong barcode is scanned, and another one when a duplicate barcode is scanned. These errors can show different colors and have different timeouts.

_images/error-duplicate.png _images/error-wrong.png

NOTE: a high timeout (e.g. >10s) typically requires the users to interact with the UI to start scanning again. This is a good choice when you want to interrupt the scanning workflow (e.g. because a wrong barcode is scanned and some actions need to be performed). A small timeout (e.g. <2s) could allow the user to scan again without having to interact with the app, just momentarily pausing the workflow to acknowledge that a “special” barcode has been scanned.

_images/errors.gif

In this example, a first error is triggered when a “duplicate” barcode is scanned (in blue) - stopping the scanner for 2s. Users do not need to restart the scanner manually, as the timeout is limited. A second error is triggered when an “error” barcode is scanned, with a long timeout (60s) that requires the user to trigger the scanner again.

Customization

Customize colors and texts

All texts (guidance inside the trigger button and hints’ messages), colors and opacity of the SparkScan UI elements (trigger button, setting toolbar, toasts) can be customized to match the desired language and color scheme.

Please refer to SparkScanView for the full list of available parameters.

_images/custom-red.png _images/custom-green.png

Hide Controls from the Setting Toolbar

The Setting Toolbar comes with default buttons included, as detailed in Learn More About SparkScan.

In some cases you want to avoid end users from accessing these controls, for example:

  • to prevent them disabling audio feedback on scan, as the work environment is always noisy

  • to prevent them toggling the continuous mode, as you want them to pick items one by one

  • etc.

To do that, you can change the visibility of these buttons, hiding them from the setting toolbar.

Please refer to SparkScanView for the full list of parameters.

_images/icons-default.png _images/icons-reduced.png

Default icons shown.

Only two icons left.