@tsocial/tvweb-sdk.vib 5.1.2 → 5.4.0

package/examples/extract-id-info-and-liveness-detection/index.html

@@ -45,13 +45,32 @@
       </label>
     </div>
     <div>
-      Api check:
+      Api check
       <select id="select-api-check">
         <option value="false">false</option>
         <option value="true" selected>true</option>
       </select>
     </div>
 
+    <div style="margin-top: 10px;">
+      <label>
+        Cached User ID
+        <input id="user-id" readonly style="width: 300px" />
+      </label>
+      <button onclick="clearUserId()">Clear user id (x-request-id)</button>
+    </div>
+
+    <div style="display: inline-block; margin-top: 10px;">
+      <div>
+        Tracking config
+        <select id="select-tracking-config-template" onchange="onSelectTrackingConfigTemplate()">
+          <option value="0" selected>default</option>
+          <option value="1">Engineering test (...9fe5)</option>
+        </select>
+      </div>
+      <textarea cols="55" rows="8" id="tracking-config"></textarea>
+    </div>
+
     <hr />
     <h4>Extract ID Info</h4>
     <div style="display: inline-block; margin-right: 20px;">
@@ -147,6 +166,8 @@
       const inputAccessKey = document.getElementById("access-key");
       const inputSecretKey = document.getElementById("secret-key");
       const inputApiUrl = document.getElementById("api-url");
+      const userIdEl = document.getElementById("user-id");
+      const trackingConfigEl = document.getElementById("tracking-config");
       const readIdCardLoadingEl = document.getElementById("read-id-card-loading");
       const customStepTimeConstraintsEl = document.getElementById("custom-step-time-constraints");
       const statusWarmupReadIDCardEl = document.getElementById("status-warmup-read-id-card");
@@ -157,6 +178,22 @@
       inputAccessKey.value = "f051dfd3-8a6e-4a15-a4e8-7ea8cdc84a31";
       inputSecretKey.value = "vgiKCenoKvhPq79KABbFmxCBu6WX1tdw";
       inputApiUrl.value = "https://tv-testing.trustingsocial.com/api";
+      userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
+
+      const trackingConfigTemplates = [
+        TVWebSDK.TrackingContext.defaultTrackingConfig,
+        {
+          "enable": true,
+          "accessKey": "4df5f9b9-f34d-4ffa-829f-aa4889bc9fe5",
+          "secretKey": "dQDfxkVYXfAxpdReqdOd1zJP4pJ088Y7",
+          "apiUrl": "https://tv-testing.trustingsocial.com/api",
+          "userId": ""
+        },
+      ];
+      function onSelectTrackingConfigTemplate() {
+        const selected = document.getElementById("select-tracking-config-template").value;
+        trackingConfigEl.value = JSON.stringify(trackingConfigTemplates[selected], null, 2);
+      }
 
       Object.keys(TVWebSDK.Constants.Mode).forEach((k) => {
         const option = document.createElement("option");
@@ -175,6 +212,12 @@
       customStepTimeConstraintsEl.value = JSON.stringify(customStepTimeConstraintsData, null, 2);
       idCardSettingsEl.value = JSON.stringify(TVWebSDK.defaultClientSettings, null, 2);
       idCardStepsEl.value = JSON.stringify(TVWebSDK.defaultReadIDCardSteps, null, 2);
+      trackingConfigEl.value = JSON.stringify(TVWebSDK.TrackingContext.defaultTrackingConfig, null, 2);
+
+      function clearUserId() {
+        window.localStorage.removeItem('user-id');
+        userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
+      }
 
       function runWarmUpReadIDCard() {
         statusWarmupReadIDCardEl.innerHTML = "..."
@@ -196,11 +239,11 @@
         resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
 
         if (qrScannedResult) {
-          const { result, imageBlob } = qrScannedResult
+          const { result, image } = qrScannedResult
 
           const qrImgEl = document.createElement("img");
           qrImgEl.width = "200";
-          qrImgEl.src = URL.createObjectURL(imageBlob);
+          qrImgEl.src = URL.createObjectURL(image.blob);
           resultExtractIdInfoEl.appendChild(qrImgEl);
           resultExtractIdInfoEl.appendChild(document.createTextNode(`\n${result}\n`));
         }
@@ -222,10 +265,10 @@
       }
 
       async function handleDetectIdCard (props) {
-        const { cardType, imageBlob, cardSide } = props
+        const { cardType, image, cardSide } = props
         const apiClient = new trustvisionSdk.default(inputAccessKey.value, inputSecretKey.value, inputApiUrl.value);
         const resultUpload = await apiClient.uploadImage({
-          file: imageBlob,
+          file: image.blob,
           label: `id_card.${cardType}.${cardSide}`,
         });
         const imageId = resultUpload.data.image_id
@@ -254,14 +297,17 @@
           detectIdCard: handleDetectIdCard,
           onStepDone: handleStepDoneIDCard,
           steps: JSON.parse(idCardStepsEl.value),
+          tracking: JSON.parse(trackingConfigEl.value),
         }
 
         if (apiCheck) {
           console.log('With api call')
           tv.readIDCardWithApiCall({
-            accessKey: inputAccessKey.value,
-            secretKey: inputSecretKey.value,
-            apiUrl: inputApiUrl.value,
+            apiCredentials: {
+              accessKey: inputAccessKey.value,
+              secretKey: inputSecretKey.value,
+              apiUrl: inputApiUrl.value,
+            },
             ...commonProps,
           })
         } else {
@@ -283,7 +329,11 @@
           apiUrl: inputApiUrl.value,
           onLivenessDetectionDone: handleLivenessDetectionDone,
           customStepTimeConstraints: JSON.parse(customStepTimeConstraintsEl.value),
-          captureFrameData: true,
+          captureFrameSettings: {
+            enable: true,
+            framesIntervalTime: 180,
+            framesBatchLength: 0,
+          },
           onError: (e) => {
             livenessLoadingEl.style.display = "none";
             startLivenessBtn.disabled = false;
@@ -331,7 +381,7 @@
       }
 
       function handleLivenessDetectionDone(result) {
-        const { frontalFaces, apiCheckPassed, steps, videoRecord } = result;
+        const { frontalFaces, apiCheckPassed, steps } = result;
         const apiCheck = selectApiCheckEl.value === "true";
         resultLivenessDetectionEl.innerHTML = "";
 
@@ -365,13 +415,6 @@
           resultLivenessDetectionEl.appendChild(
             document.createTextNode("Video:")
           );
-          if (videoRecord.length) {
-            const videoEl = document.createElement("video");
-            videoEl.width = "200";
-            videoEl.controls = "controls";
-            videoEl.src = URL.createObjectURL(videoRecord[0]);
-            resultLivenessDetectionEl.appendChild(videoEl);
-          }
         } else {
           livenessLoadingEl.style.display = "none";
           startLivenessBtn.disabled = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsocial/tvweb-sdk.vib",
-  "version": "5.1.2",
+  "version": "5.4.0",
   "description": "TV Web SDK - The Standalone VIB SDK",
   "keywords": [],
   "author": "Nha Hoang <nha.hoang@trustingsocial.com>, Son T. Ng <son.nguyen.thai@trustingsocial.com>",
@@ -23,9 +23,9 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "@tsocial/trustvision-sdk": "2.10.0",
-    "@tsocial/tvweb-core": "^5.1.2",
-    "@tsocial/tvweb-ui": "^5.1.2",
+    "@tsocial/trustvision-sdk": "2.10.1",
+    "@tsocial/tvweb-core": "^5.4.0",
+    "@tsocial/tvweb-ui": "^5.4.0",
     "invariant": "^2.2.4",
     "react": "^16.14.0",
     "react-app-polyfill": "^2.0.0",
@@ -33,7 +33,7 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@tsocial/tvweb-builder": "^5.1.2"
+    "@tsocial/tvweb-builder": "^5.4.0"
   },
-  "gitHead": "58c28723a6c167ab1808c8c97ca734d6dd5abdda"
+  "gitHead": "c2aedb28f04afe4cb63281fe17fff6baaceb560a"
 }