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

tv.runPreloadEKYCResources();

import React, { useEffect, useRef } from "react";
function TVSDKExample() {
  const sdkInstanceRef = useRef(null);

  useEffect(() => {
    sdkInstanceRef.current = new TVWebSDK.SDK({
      container: document.getElementById("web-sdk-container"),
      lang: "vi",
      enableAntiDebug: false,
    });

    sdkInstanceRef.current.runPreloadEKYCResources();
  }, []);

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

type CardType = {
  back_qr: {
    exist: boolean; // whether back side has QR code
  };
  code: string; // card type code
  front_qr: {
    exist: boolean; // whether front side has QR code
  };
  has_back_side: boolean; // whether card has back side
  front_face: {
    exist: boolean; // whether front side has face photo
  };
  back_face: {
    exist: boolean; // whether back side has face photo
  };
  name: string; // card type name
  orientation: "horizontal" | "vertical"; // card orientation
};

type ReadIDCardResult = {
  stepNumber: number; // the current step number
  cardSide: "front" | "back"; // card side of current step
  cardType: string; // card type of current step
  image: {
    blob: Blob; // the captured image of ID card
    encrypted?: {
      hex: string; // will be returned if outputEncryptionSettings.key is provided
    };
  };
  error?: any; // 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: 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
    }
  ];
  fullVideo?: any;
  capturingVideo?: any;
  apiResult?: {
    sanityResult: any;
    tamperingInfo: any;
    cardInfo: any;
    cardImageId: string;
    qrImageId: string;
    mp4VideoIds: {
      full: string;
      capturing: string;
    };
  }; // will be returned only if the SDK is called APIs by itself
};

const qrScanStep = {
  scannerType: 'qr_code', // This is the scanner type to scan QR code
  title: 'Quét mã QR trên CCCD',
  titleIcon: ''
  enableConfirmPopup: false,
};

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

const onStepDone = async ({ cardSide, cardType, image }) => {
  const uploadIDResponse = await API.uploadImage({
    file: image.blob,
    label: `id_card.${cardType}.${cardSide}`,
  });

  // If this front side, you must store the imageId so when capturing back side, you can pass it to verify tampering API
  const imageId = uploadIDResponse.file_id; // Sample response structure
};

const onStepDone = async ({ qrScannedResult }) => {
  const uploadQRResponse = await API.uploadImage({
    file: qrScannedResult.image.blob,
    label: "qr_code",

    // Optional metadata field, you can add any custom info here
    metadata: JSON.stringify({
      raw: qrScannedResult.result,
    }),
  });

  // You need to store the QR imageId for detect tampering API
  const qrImageId = uploadQRResponse.file_id; // Sample response structure
};

const onStepDone = async ({ cardType, image }) => {
  // ... upload ID card image first to get imageId
  const sanityCheckResult = await API.verifyIDCardSanity({
    card_type: cardType,
    image1: { id: imageId },
  });
};

const onStepDone = async ({ cardType, cardSide }) => {
  // ... upload front/back ID card images and QR image first to get their IDs

  const detectIDTamperingResult = await API.detectIDTampering({
    card_type: cardType,
    image: { id: frontCardId }, // this must be front side
    qr1_images: qrImageId ? [{ id: qrImageId }] : undefined,

    // Only add image2 when capturing back side
    image2: cardSide === "back" ? { id: backCardId } : undefined,
  });
};

const onStepDone = async ({ cardType }) => {
  // ... upload front/back ID card images and QR image first to get their IDs

  const readIDCardResult = await API.readIDCardInfo({
    card_type: cardType,
    image1: cardSide === "back" ? { id: backCardId } : { id: frontCardId },
    qr1_images: qrImageId ? [{ id: qrImageId }] : undefined,
  });
};

let frontImageId = null;
let backImageId = null;
let qrImageId = null;

const onStepDone = async ({ cardType, cardSide, image, qrScannedResult }) => {
  // Upload ID Card image
  const uploadIdCardResponse = await API.uploadImage({
    file: image.blob,
    label: `id_card.${cardType}.${cardSide}`,
  });
  const imageId = uploadIdCardResponse.file_id; // Sample response structure

  // Upload QR image if available
  if (qrScannedResult && qrScannedResult.image && qrScannedResult.result) {
    const uploadQRResponse = await API.uploadImage({
      file: qrScannedResult.image.blob,
      label: "qr_code",

      // Optional metadata field, you can add any custom info here
      metadata: JSON.stringify({
        raw: qrScannedResult.result,
      }),
    });
    qrImageId = uploadQRResponse.file_id; // Sample response structure
  }

  // Store front/back image IDs
  if (cardSide === "front") {
    frontImageId = imageId;
  } else {
    backImageId = imageId;
  }

  // Check ID Sanity
  const sanityCheckResult = await API.verifyIDCardSanity({
    card_type: cardType,
    image1: { id: imageId },
  });
  if (sanityCheckResult.errors) {
    // Handle sanity error
  }

  // Detect ID Tampering
  const detectIDTamperingResult = await API.detectIDTampering({
    card_type: cardType,
    image: { id: frontImageId }, // this must be front side
    image2: cardSide === "back" ? { id: backImageId } : undefined,
    qr1_images: qrImageId ? [{ id: qrImageId }] : undefined,
  });
  if (detectIDTamperingResult.errors) {
    // Handle detect tampering error
  }

  // Read ID Card Info
  const readIDCardResult = await API.readIDCardInfo({
    card_type: cardType,
    image1: cardSide === "back" ? { id: backImageId } : { id: frontImageId },
    qr1_images: qrImageId ? [{ id: qrImageId }] : undefined,
  });
  if (readIDCardResult.errors) {
    // Handle read ID card error
  }
};

tv.readIDCardUIOnly({
  // ...
  onStepDone: onStepDone,
  // ...
});

const frontStep = {
  scannerType: "id_card",
  cardSide: "front",
};
const backStep = {
  scannerType: "id_card",
  cardSide: "back",
};
const qrStep = {
  scannerType: "qr_code",
};

tv.readIDCardUIOnly({
  // ...
  steps: [frontStep, qrStep, backStep], // configure the steps as needed
  onStepDone: onStepDone,
  // ...
});

type LivenessDetectionResult = {
  steps: Array<{
    name: string;
    image: {
      blob: Blob;
      encrypted?: {
        hex: string; // will be returned if outputEncryptionSettings.key is provided
      };
      id?: string; // upload image id
    };
  }>;
  // UI Only Mode: frontalFaces contains blobs of captured frontal face images
  // API Mode: frontalFaces contains objects with blob and id (id is returned from upload API)
  frontalFaces: Array<
    | Blob
    | {
        blob: Blob;
        id: string; // upload image id
      }
  >;
  frontalFacesEncrypted?: Array<{
    hex: string; // will be returned if outputEncryptionSettings.key is provided
  }>;
  frontalScaledImage?: Blob;
  capturedFrames: Array<{
    label: string;
    base64: string;
    metadata: string;
    index: number;
  }>;
  video?: Blob;
  apiCheckPassed?: boolean;
  verifyFaceLivenessResult?: any;
  verifyFacePortraitResult?: any;
  uploadFramesResult: Array<{ id: string }>;
};

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',
  },
},

const onLivenessDetectionDone = ({ frontalFaces, steps }) => {
  const uploadFrontalImagePromises = frontalFaces.map((image: Blob) => {
    return API.uploadImage({
      file: image,
      label: "portrait",
      // Optional metadata field, you can add any custom info here
      metadata: JSON.stringify({
        label: "frontal",
      }),
    });
  });

  const uploadGestureImagePromises = steps.map((step) => {
    const blob = step.image.blob;
    return API.uploadImage({
      file: blob,
      label: "portrait",
      // Optional metadata field, you can add any custom info here
      metadata: JSON.stringify({
        label: step.name, // up, left, right gesture name
      }),
    });
  });

  const uploadFrontalImagesResult = await Promise.all(
    uploadFrontalImagePromises
  );
  const uploadGestureImagesResult = await Promise.all(
    uploadGestureImagePromises
  );
};

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

API.verifyFaceLiveness({
  images: Array<{
    id: <String>, // Image ID returned by Upload API
  }>,
  gesture_images: Array<{
    gesture: <String>, // Step name
    images: [{ id: <String> }], // Image ID returned by Upload API
  }>,
  videos: [{ frames: capturedFrames }], // add this parameter if frame capturing functionality is enabled
});

const onLivenessDetectionDone = ({ frontalFaces, steps, capturedFrames }) => {
  const uploadFrontalImagePromises = frontalFaces.map((image: Blob) => {
    return API.uploadImage({
      file: image,
      label: "portrait",
      // Optional metadata field, you can add any custom info here
      metadata: JSON.stringify({
        label: "frontal",
      }),
    });
  });

  const uploadGestureImagePromises = steps.map((step) => {
    const blob = step.image.blob;
    return API.uploadImage({
      file: blob,
      label: "portrait",
      // Optional metadata field, you can add any custom info here
      metadata: JSON.stringify({
        label: step.name, // up, left, right gesture name
      }),
    });
  });

  const uploadFrontalImagesResult = await Promise.all(
    uploadFrontalImagePromises
  );
  const uploadGestureImagesResult = await Promise.all(
    uploadGestureImagePromises
  );

  const frontalImageIds = uploadFrontalImagesResult.map((res) => ({
    id: res?.data?.image_id, // Sample response structure
  }));

  const gestureImageIds = uploadGestureImagesResult.map((res, index) => ({
    gesture: steps[index].name,
    images: [{ id: res?.data?.image_id }], // Sample response structure
  }));

  const verifyPortraitSanityResponse = await API.verifyPortraitSanity({
    image: {
      id: frontalImageIds[frontalImageIds.length - 1].id,
    },
  });

  const verifyLivenessResponse = await API.verifyFaceLiveness({
    images: frontalImageIds,
    gesture_images: gestureImageIds,

    // Add this parameter if frame capturing functionality is enabled
    // Please see more at "Selfie Frames Capturing" section
    videos: [{ frames: capturedFrames }],
  });
};

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

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

logCredentials: {
  accessKey: 'YOUR ACCESS KEY',
  secretKey: 'YOUR SECRET KEY',
  apiUrl: 'LOG EVENT URL',
  userId: 'X-REQUEST-ID',
  fallbackUrls: ['FALLBACK URL 1', 'FALLBACK URL 2'] // optional
}

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

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

const uploadBatchPromises = [];
// Callback when a batch of frames is captured
const onFramesCaptured = (frames: VideoFrame[]) => {
  // Convert frames array to binary file (Blob)
  const binaryFile = new Blob([JSON.stringify(frames)]);

  // Don't use `await` here to avoid blocking SDK flow
  // The `/v1/files` API will return file_id for the uploaded frames batch that we will use later
  const uploadPromise = API.uploadFrames({
    file: binaryFile,
    metadata: JSON.stringify({ type: "selfie" }),
    label: "video",
  });
  uploadBatchPromises.push(uploadPromise);
};

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

const onLivenessDetectionDone = async () => {
  // Here we await for all batches of frames to be uploaded
  const batchFileIds = await Promise.all(uploadBatchPromises).map(
    (response) => ({
      id: response?.data?.file_id, // We will get file_id from API.uploadFrames API response
    })
  );

  const verifyResult = await API.verifyFaceLiveness({
    // ... other params
    videos: batchFileIds,
  });
};

const onReset = () => {
  uploadBatchPromises.length = 0;
  // Or
  // uploadBatchPromises = [];
};

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

// Array holding all upload promises for each batch of frames
const uploadBatchPromises: Promise<any>[] = [];

// Callback when a batch of frames is captured
const onFramesCaptured = (frames: VideoFrame[]) => {
  // Convert frames array to binary file (Blob)
  const binaryFile = new Blob([JSON.stringify(frames)]);

  // Don't use `await` here to avoid blocking SDK flow
  // The `/v1/files` API will return file_id for the uploaded frames batch that we will use later
  const uploadPromise = API.uploadFrames({
    file: binaryFile,
    metadata: JSON.stringify({ type: "selfie" }),
    label: "video",
  });
  uploadBatchPromises.push(uploadPromise);
};

const onReset = () => {
  uploadBatchPromises.length = 0;
  // Or
  // uploadBatchPromises = [];
};

const onDone = async () => {
  // Here we await for all batches of frames to be uploaded
  const batchFileIds = await Promise.all(uploadBatchPromises).map(
    (response) => ({
      id: response?.data?.file_id, // We will get file_id from API.uploadFrames API response
    })
  );

  const verifyResult = await API.verifyFaceLiveness({
    // ... other params
    videos: batchFileIds,
  });
};

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

// Or
// tv.faceAuthentication({
//   // ...
//   onFramesCaptured: onFramesCaptured,
//   onReset: onReset,
//   onDone: onDone,
//   // ...
// });

const binaryFile = new Blob([hexString]);
API.uploadImage(
  {
    file: binaryFile,
    // ... other params
  },
  {
    headers: {
      "X-TV-Key": outputEncryptionSettings.key,
    },
  }
);

const uploadPromise = API.uploadFrames(
  {
    // payload remains the same
  },
  {
    headers: {
      "X-TV-Key": outputEncryptionSettings.key, // Add this header
    },
  }
);

const serviceSettings = {
  enableUploadFrames: true,
  enableUploadImages: true,
  enableGetClientSettings: false,
  enableVerifySanityPortrait: false,
  enableVerifySanityIDCard: false,
  enableVerifyFaceLiveness: false,
  enableDetectIDCardTampering: false,
  enableReadIDCardInfo: false,
  enableRegisterFace: false,
  enableAuthenticateFace: false,
};

import { configAppView } from "zmp-sdk/apis";

configAppView({
  actionBar: {
    hide: false,
  },
  statusBarType: "normal",
});

{
  "app": {
    "statusBar": "normal",
    "actionBarHidden": false
  }
}

const serviceSettings = {
  enableGetClientSettings: true,
  enableUploadFrames: true,
  enableUploadImages: true,
  enableVerifySanityPortrait: true,
  enableVerifySanityIDCard: true,
  enableVerifyFaceLiveness: true,
  enableDetectIDCardTampering: true,
  enableReadIDCardInfo: true,
  enableRegisterFace: true,
  enableAuthenticateFace: true,
};

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.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 clientSettings = {
  data: {
    settings: {
      sdk_settings: {
        // Your settings including license key
      },
    },
  },
};