<script src="https://unpkg.com/@tsocial/tvweb-sdk@<VERSION>/build/tvweb-sdk.standalone.min.js"></script>

npm install @tsocial/tvweb-core @tsocial/tvweb-ui
# or
yarn add @tsocial/tvweb-core @tsocial/tvweb-ui

npm install @tsocial/tvweb-sdk
# or
yarn add @tsocial/tvweb-sdk

const tv = new TVWebSDK.SDK({
  container: document.getElementById("container"),
  lang: "vi",
  assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk@<VERSION>/assets",
});

// Main functions:
tv.readIDCard({
  frontCamera: false,
  title: "Mặt trước CMND/CCCD",
  titleIcon: "id_card_front.svg",
  description: "Vui lòng đặt CMND mặt trước vào trong khung",
  onSuccess: handleOnSuccess,
  onError: handleOnError,
});

tv.livenessDetection({
  mode: TVWebSDK.Constants.Mode.ACTIVE,
  apiCheck: false,
  // accessKey: "YOUR ACCESS KEY",
  // secretKey: "YOUR SECRET KEY",
  // apiUrl: "YOUR API ENDPOINT",
  onLivenessDetectionDone: handleLivenessDetectionDone,
  onError: (e) => alert(e.code),
});

tv.checkCamera({ frontCamera: true }).then((error) => console.log(error));

import { LivenessDetection, ReadIDCard } from "@tsocial/tvweb-ui";
import { Constants, SettingsContext } from '@tsocial/tvweb-core';
import TrustVisionAPI from '@tsocial/trustvision-sdk';

// get user agent metadata
const userAgentMetadata = UserAgentUtils.getUAMetadata();
// init apiClient for api call
// if you're calling api by yourself, ignore this apiClient
const apiClient = new TrustVisionAPI(accessKey, secretKey, apiUrl, { httpHeaders: userAgentMetadata });

// Liveness Detection component
<SettingsContext.SDKSettingsProvider
  value={{
    lang: "vi",
    assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk@latest/assets",
    apiClient,
  }}
>
  <LivenessDetection
    mode={Constants.Mode.ACTIVE}
    onLivenessDetectionDone={(output) => console.log(output)}
    onError={(e) => console.log(e)}
    captureFrameData
    onProcessing={() => console.log('on processing')}
  />
</SettingsContext.SDKSettingsProvider>

// Read ID Card component
<SettingsContext.SDKSettingsProvider
  value={{
    lang: "vi",
    assetRoot: "https://unpkg.com/@tsocial/tvweb-sdk@latest/assets",
    apiClient,
  }}
>
  <ReadIDCard
    cardSide={Constants.IDCardSide.FRONT}
    enableRecording
    title="Mặt trước CMND/CCCD"
    description="Vui lòng đặt CMND mặt trước vào trong khung"
    frontCamera={false}
    onError={(e) => console.log(e)}
    onSuccess={(output) => console.log(output)}
  />
</SettingsContext.SDKSettingsProvider>

// 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 code the same to VanillaJS above

import * as TVWebSDK from "@tsocial/tvweb-sdk";
// the rest example code the same to VanillaJS above

tv.readIDCard({
  apiCheck: apiCheck,
  accessKey: "YOUR ACCESS KEY",
  secretKey: "YOUR SECRET KEY",
  apiUrl: "YOUR API ENDPOINT",
  frontCamera: false,
  enableRecording: true,
  cardSide: TVWebSDK.Constants.IDCardSide.FRONT,
  frontCardId: inputFrontIdEl.value,
  title:
    cardSide === TVWebSDK.Constants.IDCardSide.FRONT
      ? "Mặt trước CMND/CCCD"
      : "Mặt sau CMND/CCCD",
  description:
    cardSide === TVWebSDK.Constants.IDCardSide.FRONT
      ? "Căn mặt trước CMND/CCCD vào khung"
      : "Căn mặt sau CMND/CCCD vào khung",
  onSuccess: handleReadIDCardResult,
  onError: (e) => {
    resultExtractIdInfoEl.appendChild(
      document.createTextNode(`${JSON.stringify(e, null, 2)}`)
    );
    tv.destroyView();
    readIdCardLoadingEl.style.display = "none";
  },
});

function handleReadIDCardResult({ image, recordedVideos, apiResult }) {
  const apiCheck = selectApiCheckEl.value === "true";

  const imgEl = document.createElement("img");
  imgEl.width = "200";
  imgEl.src = URL.createObjectURL(image);
  resultExtractIdInfoEl.appendChild(imgEl);
  resultExtractIdInfoEl.appendChild(document.createElement("br"));
  resultExtractIdInfoEl.appendChild(
    document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`)
  );

  if (apiCheck) {
    resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
    resultExtractIdInfoEl.appendChild(
      document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
    );
    const cardSide = selectCardSideEl.value;
    if (cardSide === TVWebSDK.Constants.IDCardSide.FRONT) {
      const frontCardId = apiResult.cardInfo.image1.id;
      inputFrontIdEl.value = frontCardId;
    }
  }

  tv.destroyView();
  readIdCardLoadingEl.style.display = "none";
}

tv.livenessDetection({
  apiCheck: apiCheck,
  mode: livenessDetectionMode,
  accessKey: "YOUR ACCESS KEY",
  secretKey: "YOUR SECRET KEY",
  apiUrl: "YOUR API ENDPOINT",
  onLivenessDetectionDone: handleLivenessDetectionDone,
  onError: (e) => alert(e.code),
});

function handleLivenessDetectionDone(result) {
  const { frontalFaces, apiCheckPassed, steps } = result;
  const apiCheck = selectApiCheckEl.value === "true";
  resultLivenessDetectionEl.innerHTML = "";
  if (apiCheck === false) {
    setTimeout(function () {
      tv.destroyView();
      resultLivenessDetectionEl.appendChild(
        document.createTextNode("Random frontal faces detected: ")
      );
      frontalFaces.forEach((blob) => {
        const imgEl = document.createElement("img");
        imgEl.width = "200";
        imgEl.style.marginRight = "5px";
        imgEl.src = URL.createObjectURL(blob);
        resultLivenessDetectionEl.appendChild(imgEl);
      });
      resultLivenessDetectionEl.appendChild(document.createElement("br"));
      resultLivenessDetectionEl.appendChild(document.createElement("br"));
      resultLivenessDetectionEl.appendChild(
        document.createTextNode("Directional faces:")
      );
      steps.forEach((s) => {
        const imgEl = document.createElement("img");
        imgEl.width = "200";
        imgEl.style.marginRight = "5px";
        imgEl.src = URL.createObjectURL(s.image.blob);
        resultLivenessDetectionEl.appendChild(imgEl);
      });
    }, 500);
  } else {
    tv.destroyView();
    resultLivenessDetectionEl.appendChild(
      document.createTextNode(`apiCheckPassed: ${apiCheckPassed}`)
    );
  }
}

tv.livenessDetection({
  apiCheck: apiCheck,
  mode: livenessDetectionMode,
  accessKey: 'YOUR ACCESS KEY',
  secretKey: 'YOUR SECRET KEY',
  apiUrl: 'YOUR API ENDPOINT',
  onLivenessDetectionDone: handleLivenessDetectionDone,
  onError: e => alert(e.code),
  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',
  },
},

tv.compareFaces({
  accessKey: "e576a662-a94a-4012-9d64-c6f6e81fb711",
  secretKey: "6Z6jgTQSqkwRvpN2n4fzm9Wo3vDAFS2q",
  apiUrl: "https://tv-staging.trustingsocial.com/api",
  image1: "2383fdbe-70aa-470f-9469-96cac7f61ea1",
  image2: "784e8cb3-eb58-497b-aaa9-c02be8b77cf7",
  onSuccess: (rs) => console.log(rs),
  onError: (e) => console.log(e),
});

tv.destroyView();

tv.checkCamera();

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

{
  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 trong thời gian cho phép. Vui lòng kiểm tra quyền truy cập camera, thử lại hoặc thử trên trình duyệt/thiết bị khác.',
  },
},

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

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

{
  code: < DOMException > // refer: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Exceptions
}