VideoId Component
1. Introduction
Mobile SDK is a set of libraries (Components) that offers a series of functionalities and services, allowing its integration into a Mobile application in a simple, totally scalable way. Depending on the use case that is required, the installation of certain components must be carried out. Its high level of modularity allows that, in the future, other new components can be added without affecting at all those already integrated into the project.
The Component addressed in the current document is named SelphID Component. This is responsible for capturing documents and the subsequent extraction and analysis of the data obtained from them. Its main functionalities are the following:
-
Internal camera management.
-
Permissions management.
-
Assists in the processes of capturing the front and back of the document.
-
Extraction of the information contained in the document.
-
Obtaining the images of the back and reverse of the document, as well as other images included in the document: user's face, user's signature,...
-
High level of configuration: different countries, languages, types of documents...
1.1 Minimum requirements
The minimum native version (Android and iOS) of the SDK are as follows:
-
Minimum Android version: 24 - JDK 11
-
Minimum iOS version: 13
Regarding the architecture of the mobile device:
- armeabi-v7, x86, arm64 and x64
1.2 Plugin version
The current plugin version can be checked as follows:
-
We look for the package.json file at the root of the plugin.
-
The KEY/TAG version indicates the version.
2. Component integration
Before integrating this component, it is recommended to read the documentation related to Core Component and follow the instructions indicated in said document.
ℹ️ For this section, the following values will be considered:
-
<%APPLICATION_PATH%> - Path to the root of the application (example: /folder/example)
-
<%PLUGIN_CORE_PATH%> - Path to the root of the core plugin, which is mandatory (example: /folder/sdk-core)
-
<%PLUGIN_SELPHID_PATH%> - Path to the root of the current plugin (example: /folder/sdk-selphid)
2.1. Plugin installation: Common
The plugin allows execution on Android and iOS platforms. This section explains the common steps to all platforms. To install the plugin, the following steps must be adopted:
- Make sure react-native is installed.
- Access <%APPLICATION_PATH%> at a terminal and run:
yarn add @facephi/sdk-core-react-native
yarn add @facephi/sdk-selphid-react-native
yarn install
- In addition, to install the plugin on iOS, the following must also be executed:
cd ios
pod install
- It is important to verify that the path to the plugin is correctly defined in package.json:
"dependencies": {
"sdk-core-react-native": <% PLUGIN_CORE_PATH %>,
"sdk-selphid-react-native": <% PLUGIN_SELPHID_PATH %>
}
After running the above steps, you can start the app with the sdk/component installed.
- Finally, to launch the projects, the following commands must be executed in two ways:
From Terminal
For Android:
npx react-native run-android
or
npx react-native run-android --active-arch-only
For iOS:
npx react-native run-ios
From different IDEs
Projects generated in the Android and iOS folders can be opened, compiled, and debugged using Android Studio and XCode respectively.
2.2 Plugin installation: iOS
2.2.1 Project configuration
For the iOS version, when adding our plugin to the final application, the following points must be previously taken into account:
- Add camera permissions: To use the widget, you need to enable the camera permission in the application's info.plist file (included within the project in the ios folder). You will need to edit the file with a text editor and add the following key/value pair:
<key> NSCameraUsageDescription </key>
<string>$(PRODUCT_NAME) uses the camera</string>
2.2.2 Podfile Update
In the project podfile it will be necessary to add the information from the private repository (see section 2.1). To do this, the following lines must be added at the beginning of the file:
platform :ios, '13.0' //MIN VERSION
plugin 'cocoapods-art', :sources => ['cocoa-pro-fphi']
source 'https://cdn.cocoapods.org/'
ℹ️ To know more about the configuration and use of Cocoapods Artifactory, it is necessary to access the following document of Core Component.
2.2.3 Possible issues
If environmental problems occur or the plugin is not updated after making new changes (for example, problems occurred due to the bundle not being generated correctly, or the libraries not being updated to the correct versions), it is recommended to execute the following sequence of instructions after launching the plugin:
-
Open the application's ios folder at a terminal.
-
Run the following command:
pod deintegrate
-
Remove the Podfile.lock
-
Run the following command (or open the project with Xcode and run it):
pod install --repo-update
2.3 Plugin installation: Android
2.3.1 Set Android SDK version
For Android, the minimum SDK version required by our native libraries is 24, so if your app has a Minimum SDK defined less than this, it will need to be modified to avoid a compile error. To do this, access the application's build.gradle file (located in the android folder) and modify the following parameter:
buildscript {
ext {
minSdkVersion = 24
}
}
2.3.2 Permissions for geolocation
Because the Tracking component has geolocation options, it is necessary to add the permissions for it. In the AndroidManifest add the following permissions:
<!-- Always include this permission -->
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<!-- Include only if your app benefits from precise location access. -->
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
3. Component configuration
The current component contains a number of Typescript methods and interfaces contained within the node_modules/@facephi/sdk-selphid-react-native/src/index.tsx file. ** In this file you can find the necessary API for the communication between the application and the native functionality of the component. It is then explained what each one of those listed is for and the other properties that affect the operation of the component.
The following is the SelphIDConfiguration class, which allows you to configure the SelphID component:
export interface SelphidConfiguration {
debug?: boolean;
fullScreen?: boolean;
frontalCameraPreferred?: boolean;
tokenImageQuality?: number;
widgetTimeout?: number;
showResultAfterCapture?: boolean;
showTutorial?: boolean;
tutorialOnly?: boolean;
scanMode?: string;
specificData?: string;
documentType?: string;
videoFilename?: string;
fullscreen?: boolean;
locale?: string;
documentModels?: string;
enableWidgetEventListener?: boolean;
generateRawImages?: boolean;
translationsContent?: string;
viewsContent?: string;
cameraId?: number;
params?: any;
resourcesPath?: string;
tokenPrevCaptureData?: string;
wizardMode?: boolean;
documentSide?: string;
showDiagnostic?: boolean;
compressFormat?: SdkCompressFormat,
imageQuality?: number,
}
Then, all the properties that can be defined in the SdkTracking object will be commented on:
ℹ️ All the configuration can be found in the component's src/index.tsx file.
When making the call to the widget there is a series of parameters that must be included. They will be briefly discussed below.
3.1 resourcesPath
type: string
Sets the name of the resource file that the widget will use for its graphical configuration. This file is customisable and is located in the plugin in the src/main/assets folder for Android and in the ios/Frameworks and Resources folder for iOS. Its installation is transparent to the user, it will simply be added to the respective platform's projects during plugin installation. More details about how this resource pack works and how to modify it are explained in section 6.
resourcesPath: "fphi-selphid-widget-resources-sdk.zip"
3.2 ShowResultAfterCapture
type: boolean
Indicates whether or not to display a screen with the captured image of the document after the analysis process. This screen gives the user the option of repeating the capture process if the image obtained from the document is not correct.
showResultAfterCapture: false
3.3 ScanMode (WidgetScanMode)
type: WidgetScanMode
This enumeration is defined in the js/WidgetSelphidEnums.js class. Indicates the OCR scanning mode of the documents. Depending on the choice, several types of documents or one in particular will be scanned and searched. This mode can be of three types:
-
SelphIDScanMode.Generic: The generic mode that allows you to scan any type of document regardless of the country or the type of document. The result of this mode is not as accurate as the following, but it allows you to scan various standard documents.
-
SelphIDScanMode.Search: The search mode will allow you to use a whitelist and blacklist, and will search the documents that meet those conditions. These conditions are specified in the "specificData" variable. In this way it is possible to carry out the search limiting the number of templates, and making the search much more refined than in the generic case.
-
SelphIDScanMode.Specific: Search for a specific document. These conditions are indicated in the "specificData" property shown below.
scanMode: SdkSelphidEnums.SdkScanMode.Search;
3.4 SpecificData (string)
type: string
This property allows you to define which documents will be scanned during the process in the event of declaring the scan mode (scanMode) to GenericMode, SpecificMode or SearchMode.
An example of a configuration that allows all documents of Spanish nationality to be scanned would be the following:
scanMode: WidgetScanMode.Search;
specificData: “ES|<ALL>”; // Spanish ISO code(ES)
3.5 FullScreen
type: boolean
Determines whether you wish the widget to start in full screen mode, hiding the status bar.
fullscreen: true;
3.6 Locale
type: string
It is a string that allows the localisation and language of the widget to be changed. Examples of values that they may have are the following:
-
“es” for Spanish.
-
“en” for English.
-
“fr” for French.
Ultimately, it will depend on the name that appears in the strings.xml file of the language you want to select (strings-es.xml, strings-en.xml, strings-fr.xml).
In the resource zip, which is located inside the strings folder, you can add the strings-xx.xml files corresponding to each location that needs to be incorporated into the widget.
locale: "es";
3.7 DocumentType
type: string
This enumeration is defined in the js/WidgetSelphidEnums.js class. Specified in the WidgetDocumentType class:
-
IDCard: Establishes that identity documents or cards will be captured.
-
Passport: Establishes that passports will be captured. (Additionally, the scanMode will have to be set to SelphIDScanMode.Generic).
-
DriverLicence: Establishes that driver's licences will be captured.
-
CreditCard: Sets that credit cards will be captured.
-
ForeignCard: It establishes that Foreigners' identity cards will be captured.
-
Custom: Includes documents that are not in any of the above categories.
documentType: SdkSelphidEnums.SdkDocumentType.IDCard;
3.8 TokenImageQuality
type: double
Specifies the compression quality of the tokenFaceImage.
Indicates whether the sdk returns to the application the images used during extraction or not. It should be noted that returning images can result in a significant increase in device resource usage:
tokenFaceImage: 0.9;
3.9 generateRawImages
type: boolean
This property configures the widget to return the full image from the camera that was used to capture the document:
-
rawFrontDocument: Front image of the raw document.
-
rawBackDocument: Rear image of the raw document.
-
tokenRawFrontDocument: Tokenisation of the front image of the raw document.
-
tokenRawBackDocument: Tokenisation of the rear image of the raw document.
** generateRawImages: true;**
generateRawImages: true;
3.10 widgetTimeout
type: number
It is an enumerator that defines the timeout of the capture of one side of the document. It has 3 possible values:
-
WidgetTimeout.Short: 15 segundos.
-
WidgetTimeout.Medium: 20 segundos.
-
WidgetTimeout.Long: 25 segundos
3.11 tutorialOnly
type: boolean
Establishes whether you wish to launch the widget in Tutorial mode. This allows you to show the previous widget tutorial, but WITHOUT performing the post capture process. Useful if you wish to show the tutorial in isolation.
tutorialOnly: true;
3.12 videoFilename
type: string
⚠️ This is an advanced property, and in most use cases you don't need to modify it. Incorrect use may cause component malfunction.
This is an advanced property, and in most cases you don't need to modify it. Incorrect use may cause component malfunction.
Sets the absolute path of the file name in which a video of the capture process will be recorded. The application is responsible for requesting the necessary permissions to the phone in case that route requires additional permissions. The component, by default, will not perform any write processing unless a file path is specified using this method.
videoFilename: “<videofile-path>“;
3.13 documentModels
type: string
⚠️ This is an advanced property, and in most use cases you don't need to modify it. Incorrect use may cause component malfunction.
This is an advanced property, and in most use cases you don't need to modify it. Incorrect use may cause component malfunction.
This property allows, through a string in xml format, to configure the modelling of the documents that the widget will try to capture. The definition of this modelling can be found, by default, in .xml models within the resources .zip. With this property an application is allowed to update and replace, in execution, the models of the current documents of the component.
documentModels: “<document-models-content-string>“;
3.14 translationsContent
type: string
⚠️ This is an advanced property, and in most use cases you don't need to modify it. Incorrect use may cause component malfunction.
This is an advanced property, and in most use cases you don't need to modify it. Incorrect use may cause component malfunction.
This property allows, through a string in xml format, to configure the current location of the widget. The definition of this model can be found, by default, in an internal translations folder within the resources .zip. This property allows an application to update and replace the current location of the component at run time.
translationsContent: “<translation-content-string>“;
3.15 viewsContent
type: string
⚠️ This is an advanced property, and in most use cases you don't need to modify it. Incorrect use may cause component malfunction.
This property allows, through a string in xml format, to configure the views of the current component. The definition of this modelling can be found, by default, in a file called widget.xml inside the resources .zip. This property allows an application to update and override the layout of the component's internal screens whilst running.
viewsContent: “<views-content-string>“;
4. Component Usage
The following will show how to execute the functionality of the current component.
⚠️ Remember that in order to launch a certain component previously, you must initialise the SDK with its respective licence, and then start a new operation. For more information consult the documentation of the Core Component.
Once the component has been configured, to launch it, the following code must be executed:
const getSelphidConfiguration = () => {
let config: SelphidConfiguration = {
debug: false,
showResultAfterCapture: true,
showTutorial: false,
scanMode: SdkSelphidEnums.SdkScanMode.Search,
specificData: 'AR|<ALL>',
documentType: SdkSelphidEnums.SdkDocumentType.IdCard,
fullscreen: true,
locale: '',
resourcesPath: "fphi-selphid-widget-resources-sdk.zip",
};
return config;
};
const startSelphid = async () =>
{
try
{
console.log("Starting startSelphid...");
clearAll();
return await SdkMobileSelphid.selphid(getSelphidConfiguration())
.then((result: any) =>
{
let r: SelphidResult = result;
console.log("result parsed", r);
console.log("result", result);
processSelphidResult(result);
})
.catch((error: any) =>
{
console.log(error);
setMessage(JSON.stringify(error));
setFrontDocumentImage(null);
setBackDocumentImage(null);
setFaceImage(null);
setTokenFaceImage(null);
setOcrContent(null);
setShowError(true);
setTextColorMessage('#DE2222');
})
.finally(()=> {
console.log("End startSelphid...");
});
}
catch (error) {
setMessage(JSON.stringify(error));
}
};
5. Return of result
As shown in the example above, the result is returned in the form of a JSON object via Promises, whether it is a successful operation or an error:
.then((result: SelphidResult) =>
{
console.log("result", result);
})
.catch((error: any) =>
{
console.log(error);
})
Regardless of whether the result is correct/erroneous, the result will have the following format:
export interface SelphidResult {
finishStatus: number;
finishStatusDescription?: string;
errorType: number;
errorMessage?: string;
frontDocumentImage?: string;
backDocumentImage?: string;
faceImage?: string;
signatureImage?: string;
fingerprintImage?: string;
documentData?: string;
tokenFrontDocumentImage?: string;
tokenBackDocumentImage?: string;
tokenFaceImage?: string;
tokenOCR?: string;
documentCaptured?: string;
captureProgress: number;
matchingSidesScore: number;
rawFrontDocument?: string;
rawBackDocument?: string;
tokenRawFrontDocument?: string;
tokenRawBackDocument?: string;
lastActionBeforeCapture?: string;
}
The result will be returned via a Promise containing an object of class SelphidResult. Information on these fields is expanded below.
5.1 finishStatus
-
SdkFinishStatus.Ok: The operation was successful.
-
SdkFinishStatus.Error: An error has occurred, which will be indicated in the `errorDiagnostic` enumerated and, optionally, an extra information message will be displayed in the `errorMessage` property.
5.2 errorType
Returns the type of error that occurred (if there was one, which is indicated in the finishStatus parameter with the value Error). They are defined in the SdkErrorType class. It may have the following values:
-
NoError: No error has occurred. The process can continue.
-
UnknownError: Unhandled error. Possibly caused by a bug in the resource bundle.
-
CameraPermissionDenied: The exception that is thrown when the sdk does not have permission to access the camera.
-
SettingsPermissionDenied: The exception that is thrown when the widget does not have permission to access system settings (*deprecated*).
-
HardwareError: Exception that occurs when there is a hardware problem with the device, usually caused by very few available resources.
-
ExtractionLicenceError: Exception that occurs when there has been a licencing problem on the server.
-
UnexpectedCaptureError: Exception that occurs during the capture of frames by the camera.
-
ControlNotInitialisedError: The widget configurator has not been initialised.
-
BadExtractorConfiguration: Problem arose during widget configuration.
-
CancelByUser: The exception that is thrown when the user stops the extraction manually.
-
TimeOut: Exception that is thrown when a maximum time elapses without successfully completing the extraction.
-
InitProccessError: Exception that is thrown when the sdk cannot process the captured images.
-
NfcError: The exception that is thrown when the sdk does not have permission to access the nfc.
-
NetworkConnection: The exception that is thrown when there are issues with the means the device uses to connect to the network.
-
TokenError: The exception that is thrown when an invalid token is passed as a parameter.
-
InitSessionError: The exception that is thrown when session cannot be initialised. The normal thing is that it happens because the `SdkCore` was not called when calling any other component.
-
ComponentControllerError: The exception that is thrown when the component cannot be instantiated.
5.3 errorMessage
- Indicates an additional error message if necessary. It is an optional value.
5.4 frontDocument/tokenFrontDocument
frontDocument: The front image of the document processed, cleaned and cropped by the edges and its corresponding token.
tokenFrontDocument: It contains the same information as frontDocument, only it is encrypted, tokenised, and converted to stringBase64. This field can be detokenised in the SelphID service.
5.5 backDocument/tokenBackDocument
backDocument: The back image of the document processed, cleaned and cropped at the edges.
tokenBackDocument: It contains the same information as the backDocument, only it is encrypted, tokenised, and converted to stringBase64. This field can be detokenised in the SelphID service.
5.6 rawFrontDocument/tokenRawFrontDocument
rawFrontDocument**:** The front image of the raw document, as obtained from the camera.
tokenRawFrontDocument: It contains the same information as rawFrontDocument, only it is encrypted and tokenised, and converted to stringBase64. This field can be detokenised in the SelphID service.
5.7 rawBackDocument/tokenRawBackDocument
rawBackDocument: The rear image of the raw document, as obtained from the camera.
tokenRawBackDocument: It contains the same information as rawBackDocument, only it is encrypted and tokenised, and converted to stringBase64. This field can be detokenised in the SelphID service.
5.8 faceImage/tokenFaceImage
faceImage: The front image of the document processed, cleaned up, and cropped at the edges.
tokenFaceImage: It contains the same information as faceImage, only it is encrypted and tokenised, and converted to stringBase64. This field can be detokenised in the SelphID service.
5.9 documentData/tokenOCR
documentData: The OCR data obtained during document capture. The information contained in this object will vary depending on the type of document and the country of the document.
tokenOCR: It contains the same data as documentData, only it is encrypted and tokenised, and converted to stringBase64. This field can be detokenised in the SelphID service.