Get Started With Barcode Scanning#

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

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

  • Create a barcode capture settings and enable the barcode symbologies you want to read in your application.

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

  • Register a barcode capture listener to receive scan events. Process the successful scans according to your applications 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

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 barcode 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.contextForLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --");

Configure the Barcode Scanning Behavior#

Barcode scanning is orchestrated by the BarcodeCapture data capture mode. This class is the main entry point for scanning barcodes. It is configured through BarcodeCaptureSettings and allows to register one or more listeners that will get informed whenever new codes have been recognized.

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 Scandit.BarcodeCaptureSettings();
settings.enableSymbologies([
    Scandit.Symbology.Code128,
    Scandit.Symbology.Code39,
    Scandit.Symbology.QR,
    Scandit.Symbology.EAN8,
    Scandit.Symbology.UPCE,
    Scandit.Symbology.EAN13UPCA
  ]);

If you are not disabling barcode capture immediately after having scanned the first code, consider setting the BarcodeCaptureSettings.codeDuplicateFilter to around 500 or even -1 if you do not want codes to be scanned more than once.

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

const barcodeCapture = Scandit.BarcodeCapture.forContext(context, settings);

Register the Barcode Capture Listener#

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

First implement the BarcodeCaptureListener interface. For example:

const listener = {
  didScan: (barcodeCapture, session) => {
    const recognizedBarcodes = session.newlyRecognizedBarcodes;
    // Do something with the barcodes
  }
};

Then add the listener:

barcodeCapture.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 = Scandit.BarcodeCapture.recommendedCameraSettings;

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

const camera = Scandit.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(Scandit.FrameSourceState.On);

There is a separate guide for more advanced camera functionality.

Use a Capture View to Visualize the Scan Process#

When using the built-in camera as frame source, you will typically want to display the camera preview on the screen together with UI elements that guide the user through the capturing process. To do that, add a DataCaptureView to your view hierarchy:

const view = Scandit.DataCaptureView.viewForContext(context);
view.connectToElement(htmlElement);

To visualize the results of barcode scanning, the following overlay can be added:

const overlay = new Scandit.BarcodeCaptureOverlay(barcodeCapture, view);

Disabling Barcode Capture#

To disable barcode capture, for instance as a consequence of a barcode being recognized, set BarcodeCapture.isEnabled to false. There will not be any new results until the capture mode is enabled again. 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: