Get Started

This page will guide you through the process of adding ID Capture to your React Native application. ID Capture is a mode of the Scandit Data Capture SDK that allows you to capture and extract information from personal identification documents, such as driver's licenses, passports, and ID cards.

The general steps are:

• Create a new Data Capture Context instance
• Access a Camera
• Configure the Capture Settings
• Implement a Listener to Receive Scan Results
• Set-up the Capture View and Overlay
• Start the Capture Process

warning

Using ID Capture at the same time as other modes (e.g. Barcode Capture) is not supported.

Prerequisites

Before starting with your integration, make sure that you have a valid Scandit Data Capture SDK license key and that you added the necessary dependencies. See the installation guide for details.

tip

You can retrieve your Scandit Data Capture SDK license key by signing in to your account Dashboard.

Module Overview

The modules that need to be included in your project depend on the features you want to use. The following table lists what modules you need to include in your project, depending on the features you want to use.

Module	Required for Feature
ScanditCaptureCore	Always
ScanditIdCapture	Always
ScanditIdCaptureBackend	Extract data from VIZ (e.g. front of IDs and driver licenses, human-readable data on Passport, etc.)
ScanditIdAamvaBarcodeVerification	Verify US Driver Licenses
ScanditIdVoidedDetection	Reject voided IDs

tip

Note that your license may support only a subset all ID Capture capabilities. If you need to use additional features, contact us.

Create the Data Capture Context

The first step to enable any data capture mode is to create a new DataCaptureContext. The DataCaptureContext handles licensing and a valid Scandit Data Capture SDK license key must be passed during initialization to activate scanning.

tip

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

If the app uses only a single scanning mode, create a single DataCaptureContext within the scanner component.

TypeScript

const context = useMemo(() => {
	return DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --');
}, []);

JavaScript

const context = useMemo(() => {
	return DataCaptureContext.initialize('-- ENTER YOUR SCANDIT LICENSE KEY HERE --');
}, []);

If the app uses multiple scanning modes, create the DataCaptureContext as a singleton instance and import it into each scanner component.

TypeScript

import { DataCaptureContext } from 'scandit-react-native-datacapture-core';

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

export default DataCaptureContext.instance;

import dataCaptureContext from 'path/to/DataCaptureContext'

JavaScript

import { DataCaptureContext } from 'scandit-react-native-datacapture-core';

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

export default DataCaptureContext.instance;

import dataCaptureContext from 'path/to/DataCaptureContext'

Add the Camera

You need to also create the Camera:

const camera = Camera.default;
context.setFrameSource(camera);

const cameraSettings = IdCapture.recommendedCameraSettings;

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

if (camera != null) {
	camera.applySettings(cameraSettings);
}

Configure the Capture Settings

Use IdCaptureSettings to configure the scanner type to use and the documents that should be accepted and/or rejected.

Check IdCaptureDocumentType for all the available options.

tip

By default, anonymized data is not returned in accordance with local regulations for specific documents. This setting can be disabled for testing purposes, but be sure to comply with local laws and requirements in production.

const settings = new IdCaptureSettings();
settings.scannerType = SingleSideScanner(); // To scan only one-sided documents
// settings.scannerType = FullDocumentScanner(); // To scan both sides of the document

settings.acceptedDocuments.push(
	new DriverLicense(IdCaptureRegion.Any),
	new Passport(IdCaptureRegion.Any)
);
settings.rejectedDocuments.push(
	new IdCard(IdCaptureRegion.Any)
);

Implement the Listener

To receive scan results, implement and IdCaptureListener.

Capture results are delivered as a CapturedId. This class contains data common for all kinds of personal identification documents.

For more specific information, use its non-null result properties (e.g. CapturedId.barcode).

const listener = {
	didCaptureId: (idCapture, session) => {
		if (session.newlyCapturedId.isPassport() = true) {
			// Handle the information extracted.
		} else if (session.newlyCapturedId.isDriverLicense() = true) {
			// Handle the information extracted.
		}
	},
	didFailWithError: (idCapture, error, session) => {
		// Handle the error.
	},
};

Create a new ID Capture mode with the chosen settings. Then register the listener:

const idCapture = new IdCapture(settings);
context.addMode(idCapture);
idCapture.addListener(listener);

Set up Capture View and Overlay

When using the built-in camera as frame source, you may 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:

<DataCaptureView context={this.dataCaptureContext} ref={this.viewRef}>

Then, add an instance of IdCaptureOverlay to the view:

let overlay = IdCaptureOverlay.withIdCaptureForView(
	idCapture,
	this.viewRef.current
);

The overlay chooses the displayed UI automatically, based on the selected IdCaptureSettings.

If you prefer to show a different UI or to temporarily hide it, set the appropriate IdCaptureOverlay.idLayout.

Start the Capture Process

Finally, turn on the camera to start scanning:

camera.switchToDesiredState(FrameSourceState.On);