Version ≥ 5.x.x

<script src="https://vision-cdn.trustingsocial.com/tvweb-sdk/<VERSION>/build/tvweb-sdk.standalone.min.js"></script>

<!-- add script to public/index.html -->
<script src="https://vision-cdn.trustingsocial.com/tvweb-sdk/<VERSION>/build/tvweb-sdk.standalone.min.js"></script>

const tv = new TVWebSDK.SDK({
  container: document.getElementById("container"),
  lang: "vi",
  enableAntiDebug: false,
});

// Main functions:

tv.runWarmUpReadIDCard(); // deprecated from version 5.7.4, please use runPreloadEKYCResources to replace

tv.runPreloadEKYCResources(); // Since 5.7.4+

tv.readIDCardUIOnly(params);
tv.readIDCardWithApiCall(params);

tv.livenessDetection(params);

import React, { useEffect, useRef } from "react";
function TVSDKExample() {
  const refTVWebSDK = useRef(null);
  useEffect(() => {
    refTVWebSDK.current = new TVWebSDK.SDK({
      container: document.getElementById("web-sdk-container"),
      lang: "vi",
    });
  }, []);
  // the rest example please follow Vanilla JS above
  return <div id="web-sdk-container" />;
}

// config
// in angular.json, add this to script
"scripts": [
  ...
  "node_modules/@tsocial/tvweb-sdk/build/tvweb-sdk.standalone.min.js"
  ...
]
// usage
declare var TVWebSDK: any;
// the rest example please follow Vanilla JS above

// Please follow Vanilla JS above

const tv = new TVWebSDK.SDK({
  container: document.getElementById("container"),
  lang: "vi",
  enableAntiDebug: false,
});

const customUrls = {
  blazefaceModelUrl:
    "https://storage.googleapis.com/tfhub-tfjs-modules/tensorflow/tfjs-model/blazeface/1/default/1/model.json",
  opencvUrl:
    "https://cdn.jsdelivr.net/npm/@tsocial/[email protected]/libs/opencv-4.6.0.js",
  idCardModelUrl:
    "https://cdn.jsdelivr.net/npm/@tsocial/[email protected]/models/id-card/tflite/model-v3.tflite",
  wechatQRModelsUrl:
    "https://cdn.jsdelivr.net/npm/@tsocial/[email protected]/wechat_qr_models/",
  tfScriptUrls: {
    tfUrl:
      "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js",
    tfBackendWasmUrl:
      "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf-backend-wasm.js",
    tfBackendCpuUrl:
      "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]",
    tfBackendWebGlUrl:
      "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]",
    tfLiteUrl:
      "https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf-tflite.min.js",
    blazefaceScriptUrl:
      "https://cdn.jsdelivr.net/npm/@tensorflow-models/[email protected]",
  },
};
// And pass it to SDK via init method
const tv = new TVWebSDK.SDK({
  // ...
  customUrls: customUrls,
});

const myCdnUrlPrefix = "<YOUR CDN URL>/";
const customUrls = {
  blazefaceModelUrl: `${myCdnUrlPrefix}models/1.0.0/blazeface/model.json`,
  opencvUrl: `${myCdnUrlPrefix}opencv/4.6.0/cv.js`,
  idCardModelUrl: `${myCdnUrlPrefix}models/1.0.0/id_card/tflite/model-v3.tflite`,
  wechatQRModelsUrl: `${myCdnUrlPrefix}models/1.0.0/webchat_qr/`,
  tfScriptUrls: {
    tfUrl: `${myCdnUrlPrefix}tfjs/3.20.0/tf.min.js`,
    tfBackendWasmUrl: `${myCdnUrlPrefix}tfjs/3.20.0/backend-wasm.js`,
    tfBackendCpuUrl: `${myCdnUrlPrefix}tfjs/3.20.0/backend-cpu.js`,
    tfBackendWebGlUrl: `${myCdnUrlPrefix}tfjs/3.20.0/backend-webgl.js`,
    tfLiteUrl: `${myCdnUrlPrefix}tflite/0.0.1-alpha.8/tflite.min.js`,
    blazefaceScriptUrl: `${myCdnUrlPrefix}blazeface/0.0.7/bf.js`,
  },
  idCardModelUrls: {
    model_vn: `${myCdnUrlPrefix}models/1.0.0/id_card/tflite/id_card_detector_v2_lite.tflite`,
    model_ph: `${myCdnUrlPrefix}models/1.0.0/id_card/tflite/ph_card_model.tflite`,
  },
};
const sdkVersion = "5.12.4";
const tv = new TVWebSDK.SDK({
  // other setting as SDK defined
  assetRoot: myCdnUrlPrefix + "tvweb-sdk/" + sdkVersion + "/assets",
  customUrls: customUrls,
});

const myCdnUrlPrefix = "YOUR CDN URL";
const sdkVersion = "5.12.4";
const tv = new TVWebSDK.SDK({
  // other setting as SDK defined
  assetRoot: myCdnUrlPrefix + "tvweb-sdk/" + sdkVersion + "/assets",
  resourceRoot: myCdnUrlPrefix, // only available from 5.7.9+
});

{
  stepNumber: number, // the current step number
  cardSide, // card side of current step
  cardType, // card type of current step
  image: {
    blob, // the captured image of ID card
    encrypted: {
      hex: string // will be returned if outputEncryptionSettings.key is provided
    }
  },
  error, // error of the captured image (if any). usually it is `id_detector_error_blur`, please check `Possible Error Objects` below.
  qrScannedResult: {
    result: string, // the detected QR code
    validateResult: {
      valid: boolean // whether the detected QR code follows new Vietnamese ID pattern
    },
    image: {
      blob, // QR image
      encrypted: {
        hex: string // will be returned if outputEncryptionSettings.key is provided
      }
    },
    recordedVideos: [ // recorded videos of QR capture process
      {
        id: string, // ignore
        frames: [] // array of frames in base64 format
      }
    ]
  },
  recordedVideos: [ // recorded videos of the whole process
      {
        id: string, // ignore
        frames: [] // array of frames in base64 format
      }
  ],
  apiResult // will be returned only if the SDK is called APIs by itself
}

// Setup callback function to interact and receive results from Web SDK
// This function will be called when a user finishes capture ID card
function handleStepDoneIDCard({
  stepNumber,
  cardSide,
  cardType,
  image,
  qrScannedResult,
  recordedVideos,
  apiResult,
}) {
  console.log("card side:", cardSide); // Front or back
  console.log("card type:", cardType); // cmnd_old, cccd, cccd_new
  console.log("image", image);
  // The client should upload the image to server and call API to TrustingSocial
  // Show image to UI
  const imgEl = document.createElement("img");
  imgEl.width = "300";
  imgEl.src = createObjectURL(image.blob);

  if (qrScannedResult) {
    // QR raw code and QR image
    const { result, image } = qrScannedResult;
    // The client should upload the image to server and call API to TrustingSocial
    if (image && image.blob) {
      // Show QR image to UI
      const qrImgEl = document.createElement("img");
      qrImgEl.width = "200";
      qrImgEl.src = URL.createObjectURL(image.blob);
    }
  }
}

// This callback is called from SDK to get card type to continue flow in some special cases.
// Client should call this API https://ekyc.trustingsocial.com/api-reference/customer-api#detect-id-cards
async function handleDetectIdCard(props) {
  const { cardType, image, cardSide } = props;
  const apiClient = new trustvisionSdk.default(
    inputAccessKey.value,
    inputSecretKey.value,
    inputApiUrl.value
  );
  const resultUpload = await apiClient.uploadImage({
    file: image.blob,
    label: `id_card.${cardType}.${cardSide}`,
  });
  const imageId = resultUpload.data.image_id;
  const resultDetect = await apiClient.httpClient.post(
    "/v1/detect_id_cards_sync",
    {
      card_type: cardType,
      image: {
        id: imageId,
      },
    }
  );
  return _.get(resultDetect, "data.image.cards.0");
}

// Init parameters to capture ID card
const idCardProps = {
  onError: (e) => {
    // Handle error and destroy SDK
    tv.closeSDK();
  },
  onClose: () => {
    tv.closeSDK();
  },
  detectIdCard: handleDetectIdCard,
  onStepDone: handleStepDoneIDCard,
};
// Start capture ID Card
tv.readIDCardUIOnly(idCardProps);

logCredentials: {
  accessKey: 'YOUR ACCESS KEY',
  secretKey: 'YOUR SECRET KEY',
  apiUrl: 'LOG EVENT URL',
  userId: 'X-REQUEST-ID'
}

logCredentials: {
  logSignature: {
    timestamp: '', // X-TV-Timestamp
    signature: '', // Authorization
    logUrl: '', // API url for logging event
  },
  userId: 'X-REQUEST-ID'
}

const qrScanStep = {
  scannerType: TVWebSDK.ScannerType.QR_CODE,
  title: 'Quét mã QR trên CCCD',
  titleIcon: ''
  enableConfirmPopup: false,
};

const idCardProps = {
  ...
  steps: [qrScanStep],
};
tv.readIDCardUIOnly(idCardProps);

type LivenessResults = {
  steps: Array<{
    // gesture images
    name: String; // step name
    image: {
      blob: Blob;
      encrypted: {
        // will be returned if outputEncryptionSettings.key is provided
        hex: String; // encrypted image in base64 string
      };
      id: String; // id of image has been uploaded, appears only when apiCheck is enabled
    };
  }>;
  frontalFaces: Array<T>; // list of frontal image
  frontalFacesEncrypted: Array<String>; // list of frontal image encrypted in base64 string, will be returned if outputEncryptionSettings.key is provided
  frontalScaledImage: Blob; // the scaled frontal image if frontalMinSize was specified
  capturedFrames: Array<T>; // sequence frames array record liveness process.
  video: Blob; // the raw video of liveness process, return if turn on via access key settings
  apiCheckPassed: boolean; // whether all liveness checks passed, appears only when apiCheck is enabled.
  verifyFaceLivenessResult: LivenessResult<T>; // appears only when apiCheck is enabled.
  verifyFacePortraitResult: SanityResult<T>; // appears only when apiCheck is enabled.
};

// Setup callback function to interact and receive results from Web SDK
// This function will be called when a user finishes capture selfie
function handleLivenessDetectionDone(result) {
  // Host site will use these parameters to call API verify liveness check
  // Reference API https://ekyc.trustingsocial.com/api-reference/customer-api#1-request-5
  const { frontalFaces, steps, capturedFrames } = result;
  // frontalFaces: list frontal images mapping with API param 'images'
  console.log("frontal faces: ", frontalFaces);
  frontalFaces.forEach((blob) => {
    // Upload list frontal image to server
  });
  /* steps: list gesture image mapping with API param 'gesture_images', each element contains params
        name: mapping to 'gesture'
        image: mapping to 'images'[0], always array with 1 element
    */
  console.log("gestures faces: ", steps);
  steps.forEach((s) => {
    // Upload list gesture image to server
  });
  // capturedFrames: list frames mapping with API param 'videos'
  // Upload frames batch to server
  console.log("video frames batch: ", capturedFrames);
}

const livenessDetectionMode = TVWebSDK.Constants.Mode.FLASH_16;
const livenessProps = {
  mode: livenessDetectionMode,
  onLivenessDetectionDone: handleLivenessDetectionDone,
  captureFrameSettings: {
    enable: true,
    framesIntervalTime: 180,
    framesBatchLength: 15,
  },
  onError: (e) => {
    // Handle error and close SDK
    console.log(e);
    tv.closeSDK();
  },
  frontCamera: true,
  onProcessing: () => {
    // Show loading
    setTimeout(() => {
      tv.closeSDK();
    }, 250);
  },
  onClose: () => {
    document.body.style.height = "auto";
    tv.closeSDK();
  },
  clientSettings,
};
// Start capture selfie
tv.livenessDetection(livenessProps);

tv.livenessDetection({
  ...otherProps
  customErrors={{
    face_too_small: {
      code: 'face_too_small',
      msg: {
        en: 'Face too small',
        vi: 'Đưa camera lại gần',
      },
    },
    face_too_large: {
      code: 'face_too_large',
      msg: {
        en: 'Face too large',
        vi: 'Đưa camera ra xa',
      },
    },
  }}
})

no_face: {
  code: 'no_face',
  msg: {
    en: 'Face not found',
    vi: 'Không tìm thấy khuôn mặt',
  },
},
partial_face: {
  code: 'partial_face',
  msg: {
    en: 'Face out of the box',
    vi: 'Không tìm thấy toàn bộ khuôn mặt',
  },
},
multiple_faces: {
  code: 'multiple_faces',
  msg: {
    en: 'Too many faces',
    vi: 'Quá nhiều khuôn mặt',
  },
},
face_too_small: {
  code: 'face_too_small',
  msg: {
    en: 'Face too small',
    vi: 'Khuôn mặt quá nhỏ',
  },
},
face_too_large: {
  code: 'face_too_large',
  msg: {
    en: 'Face too large',
    vi: 'Khuôn mặt quá to',
  },
},
face_out_of_box: {
  code: 'face_out_of_box',
  msg: {
    en: 'Face is out of box',
    vi: 'Khuôn mặt không nằm trọn vẹn trong khung ảnh',
  },
},

type FaceImage = {
    id?: string,
    base64?: string,
    blob: Blob,
    label: string,
    metadata?: string, // JSON String
    encrypted?: string, // Only availble when outputEncryptionSettings.key is provided
}

type VideoFrame = {
  index: number,
  base64: string,
  label: string,
  metadata?: string, // JSON String
}

type Video = {
  id?: string,
  metadata?: string, // JSON String
  frames: VideoFrame[]
}

type GestureFace = {
  gesture: 'up' | 'left' | 'right' | 'down',
  images: FaceImage[]
}

type FaceAuthenticationResult = {
  customerUserId: string,
  faces: FaceImage[],
  videos: Video[],
  gestureFaces: GestureFace[],
  selfieType: 'light' | 'passive' | 'active' | 'flash_edge' | 'flash_advanced',
  faceType: 'selfie' | 'id_card' | null, // only available on REGISTRATION mode
  apiResult: { // response from api
    data: {...}
  }
}

// Setup callback function to interact and receive results from Web SDK
// This function will be called when a user finishes face authentication flow
async function onFaceAuthenticationDone(result: FaceAuthenticationResult) {
  // Host site will use these parameters to call Face Authentication API
  const {
    customerUserId,
    faces,
    videos,
    gestureFaces,
    selfieType,
    faceType,
    apiResult,
  } = result;

  // Upload face images to server
  const uploadedFaceImages = (
    await Promise.all(
      faces.map((face) => {
        // Upload face image to server
      })
    )
  )
    .map
    // Map to correct API format
    ();

  // Upload gestureFaces to server
  const uploadedGestureImages = (
    await Promise.all(
      gestureFaces.map((gestureFace) => {
        // Upload gesture image to server
      })
    )
  )
    .map
    // Map to correct API format
    ();

  const apiPayload = {
    cus_user_id: customerUserId,
    faces: uploadedFaceImages,
    videos: videos,
    gesture_faces: uploadedGestureImages,
    selfie_type: selfieType,
    face_type: faceType, // Only use in REGISTRATION mode

    // Only use in AUTHENTICATION mode
    // Please refer https://ekyc.trustingsocial.com/api-reference/customer-api#sample-request-26:~:text=use%2Dcase%20differently.-,auth_type,-description
    auth_type: "",
  };

  // Call REGISTER or AUTHENTICATE API
  // API Reference
  // REGISTER: https://ekyc.trustingsocial.com/api-reference/customer-api#request-face-authentication-registration
  // AUTHENTICATE: https://ekyc.trustingsocial.com/api-reference/customer-api#request-face-authentication
  // Call API here...

  // For REGISTER only
  // If API call is successful, we will need to store the customerUserId for future use
  localStorage.setItem("tv:cus-user-id", customerUserId);
}

// Get SDK Client Settings from Server
// API Reference: https://ekyc.trustingsocial.com/api-reference/customer-api#get-client-settings
const clientSettings = {};

const mode = TVWebSDK.Constants.FaceAuthenticationMode.AUTHENTICATION;
const authMethod = TVWebSDK.Constants.FaceAuthMethod.EDGE_AUTHEN;

const faceAuthenProps = {
  mode: mode,
  authMethod: authMethod,
  onDone: onFaceAuthenticationDone,
  clientSettings: clientSettings,
  onError: (e) => {
    // Handle error and close SDK
    console.log(e);
    tv.closeSDK();
  },
  onClose: () => {
    document.body.style.height = "auto";
    tv.closeSDK();
  },
};

// Start Face authentication
tv.faceAuthentication(faceAuthenProps);

function handleCaptureDone({ file }) {
  imgResultEl.src = URL.createObjectURL(file);
  imgResultEl.onload = function () {
    URL.revokeObjectURL(this.src);
  };
}
const { openCamera } = tv.initNativeCamera({
  frontCamera: false,
  onCaptureDone: handleCaptureDone,
});
buttonOpenCamera.onclick = openCamera;

tv.destroyView();

tv.closeSDK();

tv.getListCamera().then((result) => {
  const cameras = result.filter(
    (device) => device.deviceId && device.kind === "videoinput"
  );
});

tv.readIDCardUIOnly({
...
// others props
defaultCameraId: deviceId
});
---
tv.livenessDetection({
...
// others props
defaultCameraId: deviceId
});

tv.readIDCardUIOnly({
...
// others props
flipVideoHorizontal: false
});
---
tv.livenessDetection({
...
// others props
flipVideoHorizontal: true
});

tv.compareFaces({
  accessKey: "YOUR ACCESS KEY",
  secretKey: "YOUR SECRET KEY",
  apiUrl: "https://tv-staging.trustingsocial.com/api",
  image1: "image_id from upload API",
  image2: "image_id from upload API",
  onSuccess: (rs) => console.log(rs),
  onError: (e) => console.log(e),
});

const metadata = await tv.getDeviceInfo();
console.log(metadata);

tv.readIDCardUIOnly({
  ... // others props
  customTexts: {
    front_card_title: 'My custom front card title',
    front_card_description: 'My custom front card description',
  }
});

tv.livenessDetection({
  ... // others props
  customTexts: {
    [TVWebSDK.Constants.FaceDirection.LEFT]: 'My custom turn left instruction',
    [TVWebSDK.Constants.FaceDirection.RIGHT]: 'My custom turn right instruction',
  }
});

not_supported: {
  code: 'not_supported',
  msg: {
    en: 'Camera is not well-supported on this device/browser. Please try another one.',
    vi: 'Camera không được hỗ trợ. Vui lòng thử trình duyệt hoặc thiết bị khác.',
  },
},
camera_timeout: {
  code: 'camera_timeout',
  msg: {
    en: `Can't access camera. Please check camera permission, try again or try another browser/device`,
    vi:
      'Không thể truy cập camera. Vui lòng kiểm tra quyền truy cập camera, đóng các tab/app khác đang sử dụng camera hoặc thử lại trên trình duyệt/thiết bị khác.',
  },
},
unable_to_load_model: {
  code: 'unable_to_load_model',
  msg: {
    en: `Unable to load model on this device/browser. Please try another one.`,
    vi: 'Không thể load model. Vui lòng thử trình duyệt hoặc thiết bị khác.',
  },
},
no_permission: {
  code: 'no_permission',
  msg: {
    en: 'Please grant the permission to access the camera.',
    vi: 'Vui lòng cấp quyền để truy cập camera.',
  },
},
api_call_error: {
  code: 'api_call_error',
  msg: {
    en: 'Api call error',
    vi: 'Lỗi call api',
  },
},
upload_error: {
  code: 'upload_error',
  msg: {
    en: 'Upload error',
    vi: 'Lỗi upload',
  },
},
sanity_check_error: {
  code: 'sanity_check_error',
  msg: {
    en: 'Sanity check error',
    vi: 'Lỗi check sanity',
  },
},
read_id_card_error: {
  code: 'read_id_card_error',
  msg: {
    en: 'Read id card error',
    vi: 'Lỗi read id card',
  },
},
detect_id_tampering_error: {
  code: 'detect_id_tampering_error',
  msg: {
    en: 'Detect id tampering error',
    vi: 'Lỗi detect id tampering',
  },
},
detect_id_card_error: {
  code: 'detect_id_card_error',
  msg: {
    en: `Can't detect id card type`,
    vi: 'Không thể detect id card type',
  },
},
missing_front_id_card: {
  code: 'missing_front_id_card',
  msg: {
    en: 'Missing front id',
    vi: 'Không tìm thấy front id',
  },
},
server_error: {
  code: 'server_error',
  msg: 'Server error',
},
not_readable: {
  code: 'CameraInUseError',
  msg: {
    vi: 'Camera đang được sử dụng bởi ứng dụng/tab khác.',
    en: 'Camera already in use by another app/tab.',
  },
},
invalid_card_type_config: {
  code: 'invalid_card_type_config',
  msg: {
    en: 'Invalid card type config',
    vi: 'Cấu hình loại thẻ không hợp lệ',
  },
},
max_retry_reached: {
  code: 'max_retry_reached',
  msg: {
    vi: 'Đã quá số lần thử',
    en: 'Maximum retries reached',
  },
},
sdk_timeout_reached: {
  code: 'sdk_timeout_reached',
  msg: {
    vi: 'Đã quá thời gian thực hiện',
    en: 'SDK timeout reached',
  },
},
license_invalid: {
  code: 'license_invalid',
  msg: {
    en: 'Invalid license',
    vi: 'License không hợp lệ',
  },
},
license_rate_limit_exceeded: {
  code: 'license_rate_limit_exceeded',
  msg: {
    en: 'Invalid license',
    vi: 'Quá số lần thử',
  },
},
license_internal_server_error: {
  code: 'license_internal_server_error',
  msg: {
    en: 'Internal server error',
    vi: 'Lỗi server',
  },
},
license_unknown_error: {
  code: 'license_unknown_error',
  msg: {
    en: 'Unknown error',
    vi: 'Lỗi không xác định',
  },
},
{
  code: < DOMException > // refer: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Exceptions
}

const payload = {
  label: 'portrait',
  metadata: JSON.stringify({
    gesture_score: <Double>, // image.leftRightScore
    gesture: <String>, // step name, 'frontal' if image is frontal
  }),
};
if (outputEncryptionSettings && outputEncryptionSettings.key) {
  apiClient.httpClient.post(
    '/v1/images',
    {
      base64: image.encrypted.hex,
      ...payload,
    }, // additional payload
    { 'X-TV-Key': outputEncryptionSettings.key } // additional header
  );
} else {
  apiClient.uploadImage({
    file: <Blob>,
    ...payload
  })
}

apiClient.verifyFaceLiveness({
  images: Array<{ // list 'frontalFaces' have been upload, please keep the order the same with origin `frontalFaces` array
    id: <String>, // imageId return from upload api
  }>,
  gesture_images: Array<{ // list 'steps' image have been upload
    gesture: <String>, // step name
    images: [{ id: <String> }], // imageId return from upload api
  }>,
  videos: [{ frames: capturedFrames }], // add this param if captureFrameSettings is enable
});

apiClient.verifyPortraitSanity({
  image: {
    id: <String>, // imageId of last frontal image in 'frontalFaces' have been uploaded
  },
});

const uploadBatchPromises = [];
async function onFramesCaptured(frames) {
  const uploadPromise = uploadFrames({ frames });
  uploadBatchPromises.push(uploadPromise);
}

const batchFileIds = await Promise.all(uploadBatchPromises).map((response) => ({
  id: response?.data?.file_id ?? -1,
}));
const verifyResult = await verifyFaceLiveness({
  images,
  gesture_images,
  videos: batchFileIds,
});

const onReset = () => {
  uploadBatchPromises.length = 0;
};

tv.livenessDetection({
  // ...
  onReset: onReset,
  // ...
});

const { IDCardSide, Errors } = TVWebSDK.Constants;
async function uploadIdCard({
  image,
  cardType,
  cardSide,
  apiClient,
  outputEncryptionSettings,
}) {
  const payload = {
    label: `id_card.${cardType}.${cardSide}`,
  };
  if (outputEncryptionSettings && outputEncryptionSettings.key) {
    return apiClient.httpClient.post(
      "/v1/images",
      {
        base64: image.encrypted.hex,
        ...payload,
      }, // additional payload
      { "X-TV-Key": outputEncryptionSettings.key } // additional header
    );
  }
  return apiClient.uploadImage({
    file: image.blob,
    ...payload,
  });
}
async function uploadQRImage({
  image,
  apiClient,
  rawString,
  outputEncryptionSettings,
}) {
  const payload = {
    label: "qr_code",
    metadata: JSON.stringify({
      raw: rawString,
    }),
  };
  if (outputEncryptionSettings && outputEncryptionSettings.key) {
    return apiClient.httpClient.post(
      "/v1/images",
      {
        base64: image.encrypted.hex,
        ...payload,
      }, // additional payload
      { "X-TV-Key": outputEncryptionSettings.key } // additional header
    );
  }
  return apiClient.uploadImage({
    file: image.blob,
    ...payload,
  });
}
async function checkIdSanity({ imageId, cardType, apiClient }) {
  return apiClient.requestVerifyIDCard({
    card_type: cardType,
    image1: { id: imageId },
  });
}
async function detectIDTampering({
  apiClient,
  cardType,
  frontCardId,
  isCapturingFrontSide,
  backCardId,
  recordedVideos,
  qrImageId,
}) {
  const uploadedVideos = recordedVideos.filter((i) => i.id !== null);
  const pendingVideos = recordedVideos.filter(
    (i) => i.id === null && i.frames.length > 0
  );
  const finalUploadResult = await Promise.all(
    pendingVideos.map((i) =>
      apiClient.fileService.request({ frames: i.frames })
    )
  );
  const payload = {
    card_type: cardType,
    image: { id: frontCardId }, // this must be front side
    image2: isCapturingFrontSide ? undefined : { id: backCardId },
    videos: [
      ...uploadedVideos.map((i) => ({ id: i.id })),
      ...finalUploadResult.map((i) => ({ id: i.data.file_id })),
    ],
  };
  if (qrImageId) {
    payload.qr1_images = [
      {
        id: qrImageId,
      },
    ];
  }
  return apiClient.detectIDTampering(payload);
}
async function readIdCard({
  cardType,
  apiClient,
  frontCardId,
  backCardId,
  isCapturingFrontSide,
  qrImageId,
}) {
  const payload = {
    card_type: cardType,
    image1: isCapturingFrontSide ? { id: frontCardId } : { id: backCardId },
  };
  if (qrImageId) {
    payload.qr1_images = [
      {
        id: qrImageId,
      },
    ];
  }
  return apiClient.readIDCard(payload);
}
export default async function handleApiCheck({
  image,
  frontCardId: existingFrontCardId,
  qrImageId: existingQRImageId,
  onError,
  recordedVideos,
  apiClient,
  cardType,
  cardSide,
  qrScannedResult,
  outputEncryptionSettings,
}) {
  if (cardSide === IDCardSide.BACK && !existingFrontCardId) {
    onError(Errors.missing_front_id_card);
    return;
  }
  const uploadPromises = [
    uploadIdCard({
      image,
      cardType,
      cardSide,
      apiClient,
      outputEncryptionSettings,
    }),
  ];
  if (qrScannedResult && qrScannedResult.image && qrScannedResult.result) {
    uploadPromises.push(
      uploadQRImage({
        image: qrScannedResult.image,
        apiClient,
        rawString: qrScannedResult.result,
        outputEncryptionSettings,
      })
    );
  }
  const [uploadIdCardResult, uploadQrResult] = await Promise.all(
    uploadPromises
  );
  if (uploadIdCardResult.errors) {
    onError({ ...Errors.upload_error, details: uploadIdCardResult.errors });
    return;
  }
  const imageId = uploadIdCardResult.data.image_id;
  const qrImageId = uploadQrResult?.data?.image_id || existingQRImageId;
  let frontCardId;
  let backCardId;
  const isCapturingFrontSide = cardSide === IDCardSide.FRONT;
  if (isCapturingFrontSide) {
    frontCardId = imageId;
  } else {
    frontCardId = existingFrontCardId;
    backCardId = imageId;
  }
  const sanityResult = await checkIdSanity({ imageId, cardType, apiClient });
  if (sanityResult.errors) {
    onError({ ...Errors.sanity_check_error, details: sanityResult.errors });
    return;
  }
  const readIdCardResult = await readIdCard({
    cardType,
    apiClient,
    frontCardId,
    backCardId,
    isCapturingFrontSide,
    qrImageId,
  });
  if (readIdCardResult.errors) {
    onError({ ...Errors.read_id_card_error, details: readIdCardResult.errors });
    return;
  }
  const detectIDTamperingResult = await detectIDTampering({
    apiClient,
    cardType,
    frontCardId,
    isCapturingFrontSide,
    backCardId,
    recordedVideos,
    qrImageId,
  });
  if (detectIDTamperingResult.errors) {
    onError({
      ...Errors.detect_id_tampering_error,
      details: detectIDTamperingResult.errors,
    });
    return;
  }
  return {
    sanityResult: sanityResult.data,
    tamperingInfo: detectIDTamperingResult.data,
    cardInfo: readIdCardResult.data,
  };
}

{
  result, // the return data from the corresponding API
  message: { // optional
    error: {
      en: '', // custom english message for failed case
      vi: '', // custom vietnamese message for failed case
    },
    success: {
      en: '', // custom english message for successful case
      vi: '', // custom vietnamese message for successful case
    },
  }
}

// Example for requestVerifyIDCard
{
  result: {
    data: {
      card_sanity: {
        verdict: 'PASS',
      },
      status: 'SUCCESS',
    },
  },
  message: {
    error: {
      en: 'Verify card sanity failed',
      vi: 'Kiểm tra sanity thất bại',
    },
    success: {
      en: 'Verify card sanity successfully',
      vi: 'Kiểm tra sanity thành công',
    },
  },
}

{
  frontCard: // see Card result section below
  backCard: // see Card result section below
  faceLiveness: // see Face liveness result section below
  compareFaces: // see Compare faces result section below
  searchFaces: // see Search faces result section below
  indexFaces: // see Index faces result section below
}

{
  stepNumber: number,
  cardSide: string,
  cardType: string,
  image: {
    blob,
    encrypted,
    detectedCard,
  },
  recordedVideos: [],
  apiResult: {
    qrImageId: string,
    frontCardId: string,
    backCardId: string,
    sanityResult: {}, // data field from response of Request verify ID card
    tamperingInfo: {}, // data field from response of Request detect ID card tampering
    cardInfo: {}, // data field from response of Read ID card info
  }
}

{
  frontalFaces: [
    {
      id: string,
      blob
    }, ...
  ],
  steps: [
    {
      name: string,
      id: string,
      blob
    }, ...
  ],
  capturedFrames: [],
  verifyFacePortraitResult: {}, // data field from response of Request verify portrait
  verifyFaceLivenessResult: {}, // data field from response of Verify face liveness
}

const accessKey = 'YOUR ACCESS KEY';
const secretKey = 'YOUR SECRET KEY';
const apiUrl = 'YOUR API URL';

class MyAdapter extends TVWebSDK.SDKAdapter {}
const adapter = new MyAdapter(accessKey, secretKey, apiUrl);

// Pass the SDK Adapter instance as a prop when you start the Ekyc full flow
tv.ekycFlow({
  sdkAdapter: adapter,
  livenessDetectionProps: {...},
  readIDCardProps: {...}
  onDoneEkyc: (result) => console.log(result),
  onError: (e) => console.log(e),
});

// create apiClient instance with your access key and secret key, pass in X-Request-Id header
const apiClient = new trustvisionSdk.default(
  'accessKey',
  'secretKey',
  'apiUrl',
  { httpHeaders: { 'x-request-id': 'xRequestId' } }
);
// Extend the SDKAdapter class and overwrite the interfaces
class MyAdapter extends TVWebSDK.SDKAdapter {
  async clientSettings() {
    const result = await apiClient.clientSettings();
    return result;
  }
  async uploadImage(params) {
    const result = await apiClient.uploadImage(params);
    return result;
  }
  async uploadFiles(params) {
    const result = await apiClient.fileService.request(params);
    return result;
  }
  async requestVerifyIDCard(params) {
    const result = await apiClient.requestVerifyIDCard(params);
    const customResult = { // only return the required fields
      data: {
        card_sanity: {
          verdict: result?.data?.card_sanity?.verdict,
        },
        status: result?.data?.status,
      },
    };
    return {
      result: customResult,
      message: { // custom popup message
        error: { en: 'requestVerifyIDCard error en', vi: 'requestVerifyIDCard error vi' },
        success: { en: 'requestVerifyIDCard success en', vi: 'requestVerifyIDCard success vi' },
      },
    };
  }
  async detectIDTampering(params) {
    const result = await apiClient.detectIDTampering(params);
    return { result };
  }
  async readIDCard(params) {
    const result = await apiClient.readIDCard(params);
    return { result };
  }
  async requestVerifyPortrait(params) {
    const result = await apiClient.requestVerifyPortrait(params);
    return { result };
  }
  async verifyFaceLiveness(params) {
    const result = await apiClient.verifyFaceLiveness(params);
    return { result };
  }
  async compareFaces(params) {
    const result = await apiClient.compareFaces(params);
    return { result };
  }
  async searchFaces(params) {
    const result = await apiClient.searchFaces(params);
    return { result };
  }
  async indexFaces(params) {
    const result = await apiClient.indexFaces(params);
    return { result };
  }
}
// Pass the SDK Adapter instance as a prop when you start the Ekyc full flow
const adapter = new MyAdapter();

tv.ekycFlow({
  sdkAdapter: adapter,
  livenessDetectionProps: {...},
  readIDCardProps: {...}
  onDoneEkyc: (result) => console.log(result),
  onError: (e) => console.log(e),
});

class MyAdapter extends TVWebSDK.SDKAdapter {
  async clientSettings() {
    const result = await bankBackend.getClientSettings();
    return result;
  }
  async uploadImage(params) {
    const result = await bankBackend.uploadImage();
    return result;
  }
  async requestVerifyIDCard(params) {
    const result = await bankBackend.requestVerifyIDCard(params);
    const customResult = { // must return the required fields
      data: {
        card_sanity: {
          verdict: 'good',
        },
        status: 'success',
      },
    };
    return {
      result: customResult,
      message: { // custom popup message
        error: { en: 'requestVerifyIDCard error en', vi: 'requestVerifyIDCard error vi' },
        success: { en: 'requestVerifyIDCard success en', vi: 'requestVerifyIDCard success vi' },
      },
    };
  }
  ... // similar for other interfaces.
}

// Pass the SDK Adapter instance as a prop when you start the Ekyc full flow
tv.ekycFlow({
  sdkAdapter: adapter,
  livenessDetectionProps: {...},
  readIDCardProps: {...}
  onDoneEkyc: (result) => console.log(result),
  onError: (e) => console.log(e),
});