@tsocial/tvweb-sdk.tiki 5.12.6 → 5.13.1

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

@@ -23,41 +23,8 @@
       <option value="en">en</option>
     </select>
   </div>
-  <div style="margin-bottom: 10px">
-    <label>
-      Keys:
-      <select id="select-api-key" onchange="onSelectKey()">
-        <option value="0" selected>Web face tracking (..a31)</option>
-        <option value="1">QA (..217)</option>
-        <option value="2">Labeller test real data (..3b2)</option>
-        <option value="3">Labeller test fake data (..ac4)</option>
-      </select>
-    </label>
-  </div>
-  <div style="margin-bottom: 10px">
-    <label>
-      Access key
-      <input id="access-key" class="key-input" />
-    </label>
-  </div>
-  <div style="margin-bottom: 10px">
-    <label>
-      Secret key
-      <input id="secret-key" class="key-input" />
-    </label>
-  </div>
-  <div style="margin-bottom: 10px">
-    <label>
-      API URL
-      <input id="api-url" class="key-input" />
-    </label>
-  </div>
-  <div>
-    Api check
-    <select id="select-api-check">
-      <option value="false">false</option>
-      <option value="true" selected>true</option>
-    </select>
+
+  <div style="margin-bottom: 10px" id="keys-input-placeholder">
   </div>
   
   <div style="display: none; margin-top: 10px;">
@@ -120,6 +87,9 @@
   <div id="result-liveness-detection"></div>
 </div>
 
+<script src="https://unpkg.com/jsqr@1.4.0/dist/jsQR.js"></script>
+<script src="./qr-scanner-for-input-keys.js"></script>
+<script src="./keys-input.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
 <script src="https://unpkg.com/@tsocial/trustvision-sdk@2.10.1/dist/trustvision-sdk.umd.js"></script>
 <script src="../../build/tvweb-sdk.tiki.standalone.min.js"></script>
@@ -143,12 +113,6 @@
     },
   ];
   let listObjUrls = [];
-  function onSelectKey() {
-    const selectedKey = document.getElementById("select-api-key").value;
-    const { accessKey, secretKey } = keys[selectedKey];
-    inputAccessKey.value = accessKey;
-    inputSecretKey.value = secretKey;
-  }
   function onSelectLang() {
     const langEle = document.getElementById("select-lang");
     localStorage.setItem('lang', langEle.value);
@@ -186,10 +150,7 @@
     "result-liveness-detection"
   );
   const selectModeEl = document.getElementById("select-mode");
-  const selectApiCheckEl = document.getElementById("select-api-check");
-  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");
@@ -198,25 +159,8 @@
   const startLivenessBtn = document.getElementById("btn-start-liveness");
   const idCardSettingsEl = document.getElementById("id-card-settings");
   const idCardStepsEl = document.getElementById("id-card-steps");
-  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);
-  }
+  userIdEl.value = JSON.parse(localStorage.getItem("user-id"));
 
   Object.keys(TVWebSDK.Constants.Mode).forEach((k) => {
     const option = document.createElement("option");
@@ -296,14 +240,13 @@
 
   function startExtractIDInfo() {
     revokeObjectURL();
-    const apiCheck = selectApiCheckEl.value === "true";
     resultExtractIdInfoEl.innerHTML = "";
     document.body.style.height = 0;
 
     const commonProps = {
       onError: (e) => {
         resultExtractIdInfoEl.appendChild(
-          document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
+                document.createTextNode(`Error:\n${JSON.stringify(e, null, 2)}`)
         );
         tv.destroyView();
         document.body.style.height = 'auto';
@@ -318,7 +261,7 @@
       tracking: JSON.parse(trackingConfigEl.value),
     }
 
-    if (apiCheck) {
+    if (inputAccessKey.value) {
       console.log('With api call')
       tv.readIDCardWithApiCall({
         apiCredentials: {
@@ -337,12 +280,11 @@
   function startLivenessDetection() {
     revokeObjectURL();
     const livenessDetectionMode = selectModeEl.value;
-    const apiCheck = selectApiCheckEl.value === "true";
     const cameraSelected = document.getElementById("select-camera");
     document.body.style.height = 0;
 
     tv.livenessDetection({
-      apiCheck: apiCheck,
+      apiCheck: !!inputAccessKey.value,
       mode: livenessDetectionMode,
       apiCredentials: {
         accessKey: inputAccessKey.value,
@@ -359,7 +301,7 @@
         livenessLoadingEl.style.display = "none";
         startLivenessBtn.disabled = false;
         resultLivenessDetectionEl.appendChild(
-          document.createTextNode(`${JSON.stringify(e, null, 2)}`)
+                document.createTextNode(`${JSON.stringify(e, null, 2)}`)
         );
       },
       frontCamera: cameraSelected.value === "true",
@@ -378,8 +320,6 @@
   }
 
   function handleReadIDCardResult({ image, recordedVideos, apiResult }) {
-    const apiCheck = selectApiCheckEl.value === "true";
-
     const imgEl = document.createElement("img");
     imgEl.width = "200";
     imgEl.src = createObjectURL(image);
@@ -387,7 +327,7 @@
     resultExtractIdInfoEl.appendChild(document.createElement("br"));
     resultExtractIdInfoEl.appendChild(document.createTextNode(`Recorded videos: ${recordedVideos.length}\n`));
 
-    if (apiCheck) {
+    if (!!inputAccessKey.value) {
       resultExtractIdInfoEl.appendChild(document.createTextNode("API Result:\n"));
       resultExtractIdInfoEl.appendChild(
         document.createTextNode(`${JSON.stringify(apiResult, null, 2)}`)
@@ -404,10 +344,9 @@
 
   function handleLivenessDetectionDone(result) {
     const { frontalFaces, apiCheckPassed, steps } = result;
-    const apiCheck = selectApiCheckEl.value === "true";
     resultLivenessDetectionEl.innerHTML = "";
 
-    if (apiCheck === false) {
+    if (!inputAccessKey.value) {
       livenessLoadingEl.style.display = "none";
       startLivenessBtn.disabled = false;
       resultLivenessDetectionEl.appendChild(

package/examples/extract-id-info-and-liveness-detection/keys-input.js

@@ -0,0 +1,71 @@
+/* eslint-disable prefer-destructuring */
+/* eslint-disable no-var */
+var inputAccessKey = {
+  value: '',
+};
+var inputSecretKey = {
+  value: '',
+};
+var inputApiUrl = {
+  value: '',
+};
+const keyInputHtml = `
+  <button id="key-import-string">IMPORT KEYS FROM STRING</button>
+  <button id="key-import-qr">IMPORT KEYS FROM QR</button>
+  <br/>
+  <br/>
+  <textarea cols="40" rows="5" id="key-input-string" hidden></textarea>
+  <br/>
+  <div id="key-parse"></div>
+`;
+const keyPlaceholder = document.getElementById('keys-input-placeholder');
+keyPlaceholder.insertAdjacentHTML('afterbegin', keyInputHtml);
+
+function onImportStrClick() {
+  const curState = document.getElementById('key-input-string').hidden;
+  document.getElementById('key-input-string').hidden = !curState;
+
+  const keyParsedPlaceholder = document.getElementById('key-parse');
+  keyParsedPlaceholder.innerHTML = '';
+}
+
+function importKeys(keys) {
+  let keyStr = '';
+  if (keys?.inputType === 'insertFromPaste') {
+    keyStr = keys?.target?.value;
+  }
+  if (typeof keys === 'string') keyStr = keys;
+  if (!keyStr) return;
+  // parse key
+  const keyParsed = keyStr.split(',');
+  // format: key_name/api_url/access_key/secret_key
+  const keyDisplayHtml = `
+    <span>Key Name: <i>${keyParsed[0]}</i></span><br/>
+    <span id="api-url-value">Api Url: <i>${keyParsed[1]}</i></span><br/>
+    <span id="access-key-value">Access Key: <i>${keyParsed[2]}</i></span><br/>
+    <span id="secret-value">Secret Key: <i>${keyParsed[3]}</i></span><br/>
+  `;
+  const keyParsedPlaceholder = document.getElementById('key-parse');
+  keyParsedPlaceholder.innerHTML = keyDisplayHtml;
+  document.getElementById('key-input-string').hidden = true;
+
+  inputApiUrl.value = keyParsed[1];
+  inputAccessKey.value = keyParsed[2];
+  inputSecretKey.value = keyParsed[3];
+}
+
+document.getElementById('key-import-string').addEventListener('click', onImportStrClick);
+// eslint-disable-next-line no-undef
+document.getElementById('key-import-qr').addEventListener('click', startQRScan);
+document.getElementById('key-input-string').addEventListener('input', importKeys);
+
+// function getKeysValue() {
+//   const apiUrl = document.getElementById('api-url-value').innerText;
+//   const accessKey = document.getElementById('access-key-value').innerText;
+//   const secretKey = document.getElementById('secret-value').innerText;
+//   return {
+//     apiUrl: apiUrl.slice(apiUrl.indexOf(':') + 2),
+//     accessKey: accessKey.slice(accessKey.indexOf(':') + 2),
+//     secretKey: secretKey.slice(secretKey.indexOf(':') + 2),
+//   };
+// }

package/examples/extract-id-info-and-liveness-detection/qr-scanner-for-input-keys.js

@@ -0,0 +1,81 @@
+/* eslint-disable vars-on-top */
+/* eslint-disable no-var */
+const placeholderEl = document.getElementById('keys-input-placeholder');
+
+placeholderEl.insertAdjacentHTML(
+  'beforeend',
+  `<div id="loadingMessage" hidden>🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
+  <canvas id="canvas" style="width: 100%; max-width: 640px" hidden></canvas>`
+);
+
+var video = document.createElement('video');
+var canvasElement = document.getElementById('canvas');
+var canvas = canvasElement.getContext('2d');
+var loadingMessage = document.getElementById('loadingMessage');
+
+var videoStream;
+
+// eslint-disable-next-line no-unused-vars
+function startQRScan() {
+  loadingMessage.hidden = false;
+  loadingMessage.innerText = '⌛ Loading video...';
+  const keyParsedPlaceholder = document.getElementById('key-parse');
+  keyParsedPlaceholder.innerHTML = '';
+  // Use facingMode: environment to attemt to get the front camera on phones
+  navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } }).then(function (stream) {
+    video.srcObject = stream;
+    video.setAttribute('playsinline', true); // required to tell iOS safari we don't want fullscreen
+    video.play();
+    videoStream = stream;
+    // eslint-disable-next-line no-use-before-define
+    requestAnimationFrame(tick);
+  });
+}
+
+function drawLine(begin, end, color) {
+  canvas.beginPath();
+  canvas.moveTo(begin.x, begin.y);
+  canvas.lineTo(end.x, end.y);
+  canvas.lineWidth = 4;
+  canvas.strokeStyle = color;
+  canvas.stroke();
+}
+
+function onScanQRDone(qr) {
+  // stop camera
+  videoStream.getTracks().forEach(function (track) {
+    track.stop();
+  });
+  canvasElement.hidden = true;
+  // eslint-disable-next-line no-undef
+  importKeys(qr);
+}
+
+function tick() {
+  let shouldStop = false;
+  if (video.readyState === video.HAVE_ENOUGH_DATA) {
+    loadingMessage.hidden = true;
+    canvasElement.hidden = false;
+
+    canvasElement.height = video.videoHeight;
+    canvasElement.width = video.videoWidth;
+    canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
+    const imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
+    // eslint-disable-next-line no-undef
+    const code = jsQR(imageData.data, imageData.width, imageData.height, {
+      inversionAttempts: 'dontInvert',
+    });
+    if (code) {
+      shouldStop = true;
+      drawLine(code.location.topLeftCorner, code.location.topRightCorner, '#FF3B58');
+      drawLine(code.location.topRightCorner, code.location.bottomRightCorner, '#FF3B58');
+      drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, '#FF3B58');
+      drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, '#FF3B58');
+
+      setTimeout(() => {
+        onScanQRDone(code.data);
+      }, 250);
+    }
+  }
+  if (!shouldStop) requestAnimationFrame(tick);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tsocial/tvweb-sdk.tiki",
-  "version": "5.12.6",
+  "version": "5.13.1",
   "description": "TV Web SDK - The Standalone TIKI SDK",
   "keywords": [],
   "license": "ISC",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@tsocial/trustvision-sdk": "2.10.1",
-    "@tsocial/tvweb-core": "^5.12.4",
-    "@tsocial/tvweb-ui": "^5.12.6",
+    "@tsocial/tvweb-core": "^5.13.1",
+    "@tsocial/tvweb-ui": "^5.13.1",
     "invariant": "^2.2.4",
     "react": "^16.14.0",
     "react-app-polyfill": "^2.0.0",
@@ -32,7 +32,7 @@
     "styled-components": "^5.2.1"
   },
   "devDependencies": {
-    "@tsocial/tvweb-builder": "^5.12.4"
+    "@tsocial/tvweb-builder": "^5.13.1"
   },
-  "gitHead": "45bab10b77d380eb271aef58436d7fd0e8b3c482"
+  "gitHead": "7c6f650cc4ab0d2630f3c050530f332ad787e27d"
 }