Get Started

In this guide you will learn step-by-step how to add MatrixScan AR to your application. Implementing MatrixScan AR involves two primary elements:

• Barcode AR: The data capture mode that is used for scan and check functionality.
• A Barcode AR View: The pre-built UI elements used to highlight items to be checked.

The general steps are:

• Creating a new Data Capture Context instance
• Configuring the Barcode AR Mode
• Setup the Barcode AR View
• Registering the Listener to notify about found items

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 Scandit account.

Create the Data Capture Context

The first step to enable any data capture mode is to initialize the DataCaptureContext with a valid Scandit Data Capture SDK license key.

tip

If an error message appears on screen after initialization, review the Context Status Codes to learn more about the specific reason.

DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --');

note

DataCaptureContext should be initialized only once. Use DataCaptureContext.sharedInstance to access it afterwards.

Configure the Barcode AR Mode

The main entry point for the Barcode AR Mode is the BarcodeAr object. You can configure the supported Symbologies through its BarcodeArSettings, and set up the list of items that you want MatrixScan AR to highlight.

Here we configure it for tracking EAN13 codes, but you should change this to the correct symbologies for your use case.

const settings = new BarcodeArSettings();
settings.enableSymbology(Symbology.EAN13UPCA, true);

The create the mode with the previously created settings:

const mode = new BarcodeAr(settings);

Setup the BarcodeArView

MatrixScan AR’s built-in AR user interface includes buttons and overlays that guide the user through the scan and check process. By adding a BarcodeArView, the scanning interface is added automatically to your application.

The BarcodeArView is where you provide the highlightProvider and/or annotationProvider to supply the highlight and annotation information for the barcodes to be checked. If null, a default highlight is used and no annotations are provided.

The BarcodeArView appearance can be customized through BarcodeArViewSettings, and the corresponding settings for your desired highlights and/or annotations, to match your application’s look and feel. The following settings can be customized:

• Audio and haptic feedback
• Torch button visibility and its position
• Switch camera button visibility and its position
• Zoom control visibility and its position
• The size, colors, and styles of the highlight and annotation overlays

const viewSettings = new BarcodeArViewSettings();

Next, create a BarcodeArView instance with the Data Capture Context and the settings initialized in the previous step. The BarcodeArView is automatically added to the provided parent view.

const viewRef = useRef<BarcodeArView | null>(null);

<BarcodeArView
	barcodeAr={mode}
	context={dataCaptureContext}
	settings={viewSettings}
	ref={(view) => {
		viewRef.current = view;
	}}
></BarcodeArView>;

Register the Listener

Register a BarcodeArViewUiListener to be notified when a highlighted barcode is tapped.

barcodeArView.uiListener = {
	didTapHighlightForBarcode(barcodeAr, barcode, highlight) {
		// Handle the tapped barcode.
	},
};

Start searching

As soon as everything is set up, control the BarcodeArView to start the search.

barcodeArView.start();