Get Started With Barcode Selection#

What is Barcode Selection?#

With Barcode Selection, you can increase scanning accuracy and prevent users from scanning the wrong code in scenarios where there are multiple barcodes present such as:

  • A crowded shelf where users want to scan the correct barcode to report stockouts or perform a cycle count.

  • An order catalog with barcodes printed closely together.

  • A label that has several types of barcodes but users are only interested in scanning barcodes that have the same type, but cannot select them programmatically.

Key capabilities#

The Aim to Select capability allows users to select one code at a time. This is especially useful for one-handed operation.

The Tap to Select capability is a quick way for users to select several codes from the same view. Selection can be done by tapping on highlighted barcodes in the live camera preview, or on a frozen screen.Tapping on codes while keeping the smartphone steady can be tricky, and freezing the screen allows for ergonomic use.

Note

Barcode Selection does not support handling of duplicate codes. If a code appears twice in the visible preview both instances will be marked as selected even if only one of them was selected.

Using Barcode Selection#

In this guide you will learn step by step how to add barcode selection to your application. Roughly, the steps are:

  • Create a new data capture context instance, initialized with your license key.

  • Create a barcode selection settings and choose the right configuration.

  • Create a new barcode selection mode instance and initialize it with the settings created above.

  • Register a barcode selection listener to receive scan events. Process the successful scans according to your application’s needs, e.g. by looking up information in a database. After a successful scan, decide whether more codes will be scanned, or the scanning process should be stopped.

  • Obtain a camera instance and set it as the frame source on the data capture context.

  • Display the camera preview by creating a data capture view.

  • If displaying a preview, optionally create a new overlay and add it to data capture view for a better visual feedback.

Prerequisites#

Before starting with adding a capture mode, make sure that you have a valid Scandit Data Capture SDK license key and that you added the necessary dependencies. If you have not done that yet, check out this guide.

Note

You can retrieve your Scandit Data Capture SDK license key, by signing in to your account at ssl.scandit.com.

Create the Data Capture Context#

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 = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

Configure the Barcode Selection Behavior#

Symbologies

Barcode selection is orchestrated by the BarcodeSelection data capture mode. It is configured through BarcodeSelectionSettings and allows to register one or more listeners that will get informed whenever new codes have been selected.

For this tutorial, we will setup barcode scanning for a small list of different barcode types, called symbologies. The list of symbologies to enable is highly application specific. We recommend that you only enable the list of symbologies your application requires.

const settings = new BarcodeSelectionSettings();
settings.enableSymbologies([
    Symbology.Code128,
    Symbology.EAN8,
    Symbology.UPCE,
    Symbology.EAN13UPCA
  ]);

Selection Types

The behavior of Barcode Selection can be changed by using a different selection type. This defines the method used by BarcodeSelection to select codes. Currently there are two types.

If you want the user to select barcodes with a tap, then use BarcodeSelectionTapSelection. This selection type can automatically freeze the camera preview to make the selection easier. You can configure the freezing behavior via BarcodeSelectionTapSelection.freezeBehavior. With BarcodeSelectionTapSelection.tapBehavior you can decide if a second tap on a barcode means that the barcode is unselected or if it is selected another time (increasing the counter).

Note

Using BarcodeSelectionTapSelection requires the MatrixScan add-on.

If you want the selection to happen automatically based on where the user points the camera, then use BarcodeSelectionAimerSelection. It is possible to choose between two different selection strategies. Use BarcodeSelectionAutoSelectionStrategy if you want the barcodes to be selected automatically when aiming at them as soon as the intention is understood by our internal algorithms. Use BarcodeSelectionManualSelectionStrategy if you want the barcodes to be selected when aiming at them and tapping anywhere on the screen.

Single Barcode Auto Detection

If you want to automatically select a barcode when it is the only one on screen, turn on BarcodeSelectionSettings.singleBarcodeAutoDetection.

Creating the mode

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

const barcodeSelection = BarcodeSelection.forContext(context, settings);

Register the Barcode Selection Listener#

To get informed whenever a new code has been recognized, add a BarcodeSelectionListener through BarcodeSelection.addListener() and implement the listener methods to suit your application’s needs.

First implement the BarcodeSelectionListener interface. For example:

const listener = {
  didUpdateSelection: (barcodeSelection, session) => {
    const newlySelectedBarcodes = session.newlySelectedBarcodes;
    // Do something with the barcodes
  }
};

Then add the listener:

barcodeSelection.addListener(listener);

Use the Built-in Camera#

The data capture context supports using different frame sources to perform recognition on. Most applications will use the built-in camera of the device, e.g. the world-facing camera of a device. The remainder of this tutorial will assume that you use the built-in camera.

When using the built-in camera there are recommended settings for each capture mode. These should be used to achieve the best performance and user experience for the respective mode. The following couple of lines show how to get the recommended settings and create the camera from it:

const cameraSettings = BarcodeSelection.recommendedCameraSettings;

// Depending on the use case further camera settings adjustments can be made here.

const camera = Camera.default;

if (camera) {
  camera.applySettings(cameraSettings);
}

Because the frame source is configurable, the data capture context must be told which frame source to use. This is done with a call to DataCaptureContext.setFrameSource():

context.setFrameSource(camera);

The camera is off by default and must be turned on. This is done by calling FrameSource.switchToDesiredState() with a value of FrameSourceState.On:

camera.switchToDesiredState(FrameSourceState.On);

There is a separate guide for more advanced camera functionality.

Disabling Barcode Selection#

To disable barcode selection, for instance when the selection is complete, set BarcodeSelection.isEnabled to false. The effect is immediate: no more frames will be processed after the change. However, if a frame is currently being processed, this frame will be completely processed and deliver any results/callbacks to the registered listeners. Note that disabling the capture mode does not stop the camera, the camera continues to stream frames until it is turned off.

What’s next?

To dive further into the Scandit Data Capture SDK we recommend the following articles: