React Native 2.1.x ui only
Installation
Common
1. Add Trust Vision React Native lib
Add to package.json file under dependencies group:
"react-native-trust-vision-SDK": "git+https://github.com/tsocial/react-native-trust-vision-SDK#<version_tag_name>"
2. Run
$ yarn
iOS
1. Add to podfile
...
pod 'RNTrustVisionRnsdkFramework', path: '../node_modules/react-native-trust-vision-SDK'
2. Run
$ pod install
Android
Add to root-level build.gradle file (host app):
maven {
url("$rootDir/../node_modules/react-native-trust-vision-SDK/android/repo")
}
eg:
allprojects {
repositories {
mavenLocal()
...
maven {
url("$rootDir/../node_modules/react-native-trust-vision-SDK/android/repo")
}
google()
jcenter()
maven { url 'https://jitpack.io' }
}
}
Add to app/build.gradle
android {
...
aaptOptions {
noCompress "tflite"
noCompress "lite"
}
}
Usage
import { NativeEventEmitter } from "react-native";
import RNTrustVisionRnsdkFramework, {
TVConst,
TVErrorCode,
} from "react-native-trust-vision-SDK";
Full steps:
try {
await RNTrustVisionRnsdkFramework.initialize(
clientSettingJsonString,
"vi",
true
);
const tvsdkEmitter = new NativeEventEmitter(RNTrustVisionRnsdkFramework);
// Listen to the events during the capturing
const subscription = tvsdkEmitter.addListener("TVSDKEvent", (event) => {
console.log("TVSDK - " + event.name + " - " + event.params.page_name);
});
// Listen to the frame batches recorded during the capturing
const framesRecordedSubscription = tvsdkEmitter.addListener(
"TVSDKFrameBatch",
(event) => {
console.log("TVSDK - " + "FrameBatch: ", obj);
// upload frame batch to server using this api:
// https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-videoaudioframes
}
);
const cardType = {
id: "card_id",
name: "card_name",
orientation: TVConst.Orientation.LANDSCAPE,
hasBackSide: true,
};
const idConfig = {
cardType: cardType,
isEnableSound: false,
isReadBothSide: true,
cardSide: TVConst.CardSide.FRONT,
};
console.log("Id Config", idConfig);
const idResult = await RNTrustVisionRnsdkFramework.startIdCapturing(idConfig);
console.log("Id Result", idResult);
} catch (e) {
console.log("Error: ", e.code, " - ", e.message);
}
1. Initialize SDK
SDK needs to be initialized first
await RNTrustVisionRnsdkFramework.initialize(
clientSettingJsonString,
"vi", // language code
true // enable event or not
);
Options:
- clientSettingsJsonString:
string. The jsonConfigurationByServer is optional but recommended. It's the setting specialized for each client from TS server. It's the response json string get by API https://ekyc.trustingsocial.com/api-reference/customer-api/#get-client-settings. When it's null or unmatched with the expected type then the default setting in the SDK will be used. - languageCode:
string. Language code.vioren - enableEventTracking:
bool. Enable event tracking or not
2. Start the SDK
The SDK provides some built in functions to capture id, selfie, liveness...
2.2. Start ID card capturing
2.2.1. Set config parameters
const idConfig = {
cardType: cardType,
cardSide: TVConst.CardSide.FRONT,
isEnableSound: false,
isReadBothSide: true,
skipConfirmScreen: true,
isEnablePhotoGalleryPicker: false,
};
Options:
- cardType:
CardType. Card type - cardSide:
TVConst.CardSide. Card side - isEnableSound:
bool. Sound is played or not - isReadBothSide:
bool. Read both sides of id card or not - skipConfirmScreen:
bool. Skip confirmation screen or not - isEnablePhotoGalleryPicker:
bool. Allow user select id card image from phone gallery
2.2.2. Start flow
const result = await RNTrustVisionRnsdkFramework.startIdCapturing(config);
2.2.3. Handle Id card images
if result.frontIdQr.is_required is true then result.frontIdQr.images array should be non-empty. Otherwise, clients should be warned to re-capture id card photos.
QR imagegs will be uploaded with this api: https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-image
- Fields:
- data:
result.frontIdQr.images[i].raw_image_base64 - label:
result.frontIdQr.images[i].label - metadata:
result.frontIdQr.images[i].metadata
- data:
*The same logic will be applied to result.backIdQr
2.3. Start selfie capturing
2.3.1. Set config parameters
const config = {
cameraOption: TVConst.SelfieCameraMode.FRONT,
isEnableSound: true,
livenessMode: TVConst.LivenessMode.PASSIVE,
skipConfirmScreen: true,
};
Options:
- cameraOption:
TVConst.SelfieCameraMode. Camera option - isEnableSound:
bool. Sound is played or not - livenessMode:
TVConst.LivenessMode. Liveness mode - skipConfirmScreen:
bool. Skip confirmation screen or not
2.3.2. Start flow
const selfieCapturingResult =
await RNTrustVisionRnsdkFramework.startSelfieCapturing(config);
2.3.3. Frame Batch recorded during the capturing.
Note: Ignore this section if Frame recording is disabled by client settings.
var frameBatchIdsDictionary = []; // this dictionary will be used for liveness verification
// frameBatchIdsDictionary.push({
// key: <id_returned_from_sdk>,
// value: <id_returned_from_server>
// });
// Listen to the frame batches recorded during the capturing
const framesRecordedSubscription = tvsdkEmitter.addListener(
"TVSDKFrameBatch",
async (frameBatch) => {
console.log("TVSDK - " + "FrameBatch: ", frameBatch);
// upload frame batch to server using this api:
// https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-videoaudioframes
const uploadingResult = await uploadFrameBatch(frameBatch);
frameBatchIdsDictionary.push({
key: frameBatch.batchId,
value: uploadingResult.fileId,
});
}
);
2.3.4. Handle selfie capturing results
2.3.4.1 Remove invalid frame batch ids
Note: Ignore this section if Frame recording is disabled by client settings.
Only frame batches of Selfie capturing which id is containing in selfieCapturingResult.livenessFrameBatchIds are valid to be used for liveness verification.
// Remove all invalid batch ids:
Object.entries(frameBatchIdsDictionary).map(
([id_returned_from_sdk, id_returned_from_server]) => {
if (
!selfieCapturingResult.livenessFrameBatchIds.includes(
id_returned_from_sdk
)
) {
delete frameBatchIdsDictionary[id_returned_from_sdk];
}
}
);
2.3.4.2. Use this api to get image id:
https://ekyc.trustingsocial.com/api-reference/customer-api/#upload-image
id of frontal image i = image id of selfieCapturingResult.selfieImages[i].frontal_image.raw_image_base64
id of gesture image i = image id of selfieCapturingResult.selfieImages[i].gesture_image.raw_image_base64
2.3.4.3. Call this api to check liveness
https://ekyc.trustingsocial.com/api-reference/customer-api/#verify-face-liveness with params
imagesfield, each element contains:
{
"id": "<id of frontal image i>"
}
gesture_imagesfield, each element contains:
{
"gesture": "lower case string of <selfieCapturingResult.selfieImages[i].gesture_type>",
"images": [
{
"id": "<id of gesture image i>"
}
]
}
videosfield is the list of frame batch ids returned from server, which are the values offrameBatchIdsDictionaryNote: Ignore this field if Frame recording is disabled by client settings.
{
"id": "<frameBatchIdsDictionary's values[0]>"
},
{
"id": "<frameBatchIdsDictionary's values[1]>"
}
...
metadatafield isselfieCapturingResult.livenessMetadata
3. Result Handling:
result:
cardType:
CardType. Card typeactionMode:
TVConst.ActionMode. Action ModeselfieImages:
[SelfieImage]. List of selfie image objectslivenessVideos:
[Base64 String]. List of liveness videos data base64livenessMetadata:
jsonlivenessVideoFramesList:
[json]idFrontImage:
ImageClass. Id front image objectidBackImage:
ImageClass. Id back image objectfrontIdQr:
TVCardQr. Front Id card's QR infobackIdQr:
TVCardQr. Back Id card's QR infofrontIdCapturingVideoFramesList:
jsonbackIdCapturingVideoFramesList:
json
SelfieImage:
- gesture_type:
String.UP | DOWN | LEFT | RIGHT | FRONTAL - frontal_image:
ImageClass. Frontal image object - gesture_image:
ImageClass. Gesture image object
- gesture_type:
ImageClass:
- raw_image_base64:
String. Base64 string of image data - label:
String. Image label - metadata:
json. Image metadata
- raw_image_base64:
TVCardQr:
- is_required:
Bool. This side of card contains QR or not - images:
[ImageClass]. QR images
- is_required:
Error:
- errorCode:
String. The specific error code - description:
String. The human-readable error description can be show to end user
- errorCode: