Get Started With ID Capture

Quick overview

ID Capture provides the capability to scan personal identification documents, such as identity cards, passports or visas. In this guide you will learn step by step how to add ID Capture to your application. Roughly, the steps are:

Note

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

Create a DataCaptureContext.
Access a Camera.
Use IdCaptureSettings to configure the scan process.
Implement an IdCaptureListener to receive scan results.
Set up DataCaptureView and IdCaptureOverlay to see the camera feed and the scan UI.
Begin the scanning by adding an IdCapture to DataCaptureContext and starting a camera.

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.

Internal dependencies

Some of the Scandit Data Capture SDK modules depend on others to work:

Module	Dependencies
ScanditCaptureCore	No dependencies
ScanditBarcodeCapture	ScanditCaptureCore
ScanditParser	ScanditCaptureCore
ScanditTextCapture	ScanditCaptureCore
ScanditIdCapture	ScanditCaptureCore native iOS and Android libraries: ScanditOCR and ScanditTextCaptureBase (VIZ documents)

When adding ScanditIdCapture to a React Native project, certain native dependencies need to be added manually to your project, depending on the documents you want to scan.

If you’re only scanning barcode based documents, you only need to add the ScanditIdCapture React Native plugin.

If you’re also scanning VIZ documents, you also need to add the ScanditOCR and ScanditTextCaptureBase native dependencies, as described in our iOS and Android documentation.

If you’re also scanning MRZ documents, you also need the native ScanditTextCapture dependency. You can add this as well as described in our iOS and Android documentation.

Alternatively, if you’re scanning both VIZ and MRZ documents, you can add the ScanditTextCapture React Native (scandit-datacapture-react-native-text) plugin, which includes the native dependencies for both VIZ and MRZ documents.

Please note that your license may support only a subset of ID Capture features. If you would like to use additional features please contact us at support@scandit.com.

Show loading status with default UI

To show some feedback to the user about the loading status you have two options: use the default UI provided with the SDK or subscribe to the loading status and update your own custom UI. Let’s see how we you can show the default UI first:

Show loading status with custom UI

You can also just subscribe for the loading status of the library by simply attaching a listener like this:

Note

We suggest to serve the library files with the proper headers Content-Length and Content-Encoding if any compression is present. In case of totally missing information we will show an estimated progress

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 --");

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);
}

Create ID Capture Settings

Use IdCaptureSettings to configure the types of documents that you’d like to scan. Check IdDocumentType for all the available options.

Warning

Using IdDocumentType.DLVIZ or IdDocumentType.IdCardVIZ together with any MRZ document (IdDocumentType.IdCardMRZ, IdDocumentType.VisaMRZ, IdDocumentType.PassportMRZ, IdDocumentType.SwissDLMRZ) while SupportedSides.FrontAndBack is enabled is currently not supported.

const settings = new IdCaptureSettings();
settings.supportedDocuments = [
  IdDocumentType.IdCardVIZ,
  IdDocumentType.AAMVABarcode,
  IdDocumentType.DLVIZ,
]

Implement the Listener

To receive scan results, implement IdCaptureListener. A result is delivered as CapturedId. This class contains data common for all kinds of personal identification documents. For more specific information use its non-null result properties (for example CapturedId.aamvaBarcodeResult).

const listener = {
  didCaptureId: (idCapture, session) => {
    if (session.newlyCapturedId.aamvaBarcodeResult != null) {
        // 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 = IdCapture.forContext(context, settings);
idCapture.addListener(listener);

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:

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

Then create an instance of IdCaptureOverlay attached to the view:

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

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

Turn on the Camera

Finally, turn on the camera to start scanning:

camera.switchToDesiredState(FrameSourceState.On);

And this is it. You can now scan documents.

Capture both the front and the back side of documents

By default, when IdDocumentType.DLVIZ or IdDocumentType.IdCardVIZ are selected, Id Capture scans only the front side of documents. Sometimes however, you may be interested in extracting combined information from both the front and the back side.

Currently the combined result contains the following information: * AAMVA-compliant documents (for example US Driver’s Licenses): the human-readable front side of the document and the data encoded in the PDF417 barcode in the back; * European IDs: the human-readable sections of the front and the back side, and the data encoded in the Machine Readable Zone (MRZ); * Other documents: the human-readable section of the front and the back side (if present).

First, enable scanning of both sides of documents in IdCaptureSettings:

settings.supportedDocuments = [IdDocumentType.IdCardVIZ, IdDocumentType.DLVIZ];
settings.supportedSides = SupportedSides.FrontAndBack;

Start by scanning the front side of a document. After you receive the result in IdCaptureListener, inspect VIZResult.isBackSideCaptureSupported. If scanning of the back side of your document is supported, flip the document and capture the back side as well. The next result that you receive is a combined result that contains the information from both sides. You may verify this by checking VIZResult.capturedSides. After both sides of the document are scanned, you may proceed with another document.

Sometimes, you may not be interested in scanning the back side of a document, after you completed the front scan. For example, your user may decide to cancel the process. Internally, Id Capture maintains the state of the scan, that helps it to provide better combined results. To abandon capturing the back of a document, reset this state by calling:

idCapture.reset();

Otherwise, Id Capture may assume that the front side of a new document is actually the back side of an old one, and provide you with nonsensical results.

Detect Tampered or Fake Documents

Id Capture helps to detect tampered or fake documents. This feature is currently limited to documents that follow the Driver License/Identification specification by American Association of Motor Vehicle Administrators (AAMVA).

Use AamvaVizBarcodeComparisonVerifier to perform basic, on-device document verification by comparing the human-readable data from the front side with the data encoded in the barcode.

This verifier may permit minor data divergence to compensate, for example, for a single character misread by OCR. While this verifier automatically detects many fraudulent documents, a failed check does not necessarily mean that the document is invalid. It is up to the user to subject such documents to additional scrutiny.

The verification is performed in the front & back scanning mode. Create the verifier and initialize IdCapture with the following settings:

const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --")

const verifier = AamvaVizBarcodeComparisonVerifier.create()

const settings = new IdCaptureSettings()
settings.supportedDocuments = [IdDocumentType.DLVIZ]
settings.supportedSides = SupportedSides.FrontAndBack

const idCapture = IdCapture.forContext(dataCaptureContext, settings)

Then proceed to capture the front side & the back side of a document as usual. After you capture the back side and receive the combined result for both sides, you may run the verifier as follows:

const idCaptureListener = {
    didCaptureId: (_, session) => {
        const capturedId = session.newlyCapturedId
        const vizResult = capturedId.vizResult

        if (vizResult && vizResult.capturedSides === SupportedSides.FrontAndBack) {
            verifier
                .verify(session.newlyCapturedId)
                .then(result => {
                    if (result.checksPassed) {
                        // Nothing suspicious was detected.
                    } else {
                        // You may inspect the results of individual checks, if you wish:
                        if (result.datesOfBirthMatch.checkResult === ComparisonCheckResult.Failed) {
                          // The holder’s date of birth from the front side does not match the one encoded in the barcode.
                        }
                    }
                })
        }
    }
}

The returned value allows you to query both the overall result of the verification and the results of individual checks. See AamvaVizBarcodeComparisonResult for details.

A more in-depth verification is performed by AamvaCloudVerifier. This verifier sends the captured data to Scandit server for a more thorough check.

First, ensure that your Scandit Data Capture SDK license key supports cloud verification. Then, create an instance of AamvaCloudVerifier:

const dataCaptureContext = DataCaptureContext.forLicenseKey("-- ENTER YOUR SCANDIT LICENSE KEY HERE --")
const cloudVerifier = AamvaCloudVerifier.create(dataCaptureContext)

This kind of verification uses only data encoded in the barcode on the back side of the document. Therefore, you may capture both sides of the document, like in the previous example, or you may limit the capture just to the barcode.

Depending on the approach you choose initialize the mode with the following settings for the front & back:

const settings = new IdCaptureSettings()
settings.supportedDocuments = [IdDocumentType.DLVIZ]
settings.supportedSides = SupportedSides.FrontAndBack

const idCapture = IdCapture.forContext(dataCaptureContext, settings)

Or for the barcode only:

const settings = new IdCaptureSettings()
settings.supportedDocuments = [IdDocumentType.DLVIZ]

const idCapture = IdCapture.forContext(dataCaptureContext, settings)

Once the barcode is captured, trigger the verification process. The process is asynchronous and the result will be delivered once our server verifies the received data:

const idCaptureListener = {
    didCaptureId: (_, session) => {
        const capturedId = session.newlyCapturedId
        const barcode = capturedId.aamvaBarcodeResult

        if (barcode) {
            cloudVerifier
                .then(verifierInstance => {
                    verifierInstance
                        .verify(session.newlyCapturedId)
                        .then(result => {
                                if (result.allChecksPassed) {
                                    // Nothing suspicious was detected.
                                } else {
                                    // Document may be fraudulent or tampered with - proceed with caution.
                                }
                            }, (error) => {
                                // Unable to reach the server - most probably the device has no internet connection.
                            }
                        })
                })
        }
    }
}

Supported documents

You can find the list of supported documents here.

What’s next?

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

ScanditIdCapture