Get Started
This page will guide you through the process of adding ID Capture to your Cordova 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:
- Creating a new Data Capture Context instance
- Accessing a Camera
- Configuring the Capture Settings
- Implementing a Listener to Receive Scan Results
- Setting up the Capture View and Overlay
- Starting the Capture Process
Using ID Capture at the same time as other modes (e.g. Barcode Capture) is not supported.
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.
You can retrieve your Scandit Data Capture SDK license key by signing in to your Scandit account.
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 |
Note that your license may support only a subset all ID Capture capabilities. If you need to use additional features, contact us.
To learn more about specifying native dependencies on Cordova and the framework tag, take a look at the official Cordova documentation.
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 = Scandit.DataCaptureContext.forLicenseKey(
'-- ENTER YOUR SCANDIT LICENSE KEY HERE --'
);
Add the Camera
You need to also create the Camera:
const camera = Scandit.Camera.default;
context.setFrameSource(camera);
const cameraSettings = Scandit.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 scanner type and the accepted and rejected documents.
Check IdCaptureDocumentType for all available options.
const settings = new Scandit.IdCaptureSettings();
// Documents from any region:
settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.AnyRegion));
// Only documents issued by a specific country:
settings.acceptedDocuments.push(new Scandit.IdCard(Scandit.Region.Germany));
// Regional documents:
settings.acceptedDocuments.push(new Scandit.RegionSpecific.ApecBusinessTravelCard());
// Reject passports from certain regions:
settings.rejectedDocuments.push(new Scandit.Passport(Scandit.Region.Cuba));
// To scan only one-sided documents and a given zone:
settings.scannerType = new Scandit.SingleSideScanner({ barcode: true });
// or
settings.scannerType = new Scandit.SingleSideScanner({ machineReadableZone: true });
// or
settings.scannerType = new Scandit.SingleSideScanner({ visualInspectionZone: true });
// To scan both sides of the document:
settings.scannerType = new Scandit.FullDocumentScanner();
Create a new ID Capture mode with the chosen settings:
const idCapture = Scandit.IdCapture.forContext(context, settings);
Implement the Listener
To receive scan results, implement IdCaptureListener. The listener provides two callbacks: onIdCaptured
and onIdRejected
.
idCapture.addListener({
onIdCaptured: (data) => {
// Success! Handle extracted data here.
},
onIdRejected: (data, reason) => {
// Something went wrong. Inspect the reason to determine the follow-up action.
}
});
Handling Success
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).
On a successful scan you may read the extracted data from CapturedId
:
onIdCaptured: (data) => {
const fullName = data.fullName;
const dateOfBirth = data.dateOfBirth;
const dateOfExpiry = data.dateOfExpiry;
const documentNumber = data.documentNumber;
// Process data:
processData(fullName, dateOfBirth, dateOfExpiry, documentNumber);
}
All data fields are optional, so it's important to verify whether the required information is present if some of the accepted documents may not contain certain data.
Handling Rejection
The ID scanning process may fail for various reasons. Start from inspecting RejectionReason to understand the cause.
You may wish to implement the follow-up action based on the reason of failure:
onIdRejected: (data, reason) => {
if (reason === Scandit.RejectionReason.Timeout) {
// Ask the user to retry, or offer alternative input method.
} else if (reason === Scandit.RejectionReason.DocumentExpired) {
// Ask the user to provide alternative document.
} else if (reason === Scandit.RejectionReason.HolderUnderage) {
// Reject the process.
}
}
Set up Capture View and Overlay
When using the built-in camera as frameSource, 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.forContext(context);
view.connectToElement(htmlElement);
Then create an instance of IdCaptureOverlay attached to the view:
let overlay = Scandit.IdCaptureOverlay.withTextCaptureForView(
idCapture,
dataCaptureView
);
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(Scandit.FrameSourceState.On);
And this is it. You can now scan documents.