@ekyc_qoobiss/qbs-ect-cmp 1.10.11 → 1.10.13

package/dist/collection/components/identification-component/identification-component.js

@@ -56,7 +56,7 @@ export class IdentificationComponent {
       this.apiErrorEmitter(e);
     }
   }
-  apiErrorEmitter(data) {
+  async apiErrorEmitter(data) {
     if (data.message) {
       this.errorMessage = data.message;
     }
@@ -69,7 +69,7 @@ export class IdentificationComponent {
     else {
       this.errorMessage = data;
     }
-    this.apiCall.AddLog(data);
+    await this.apiCall.AddLog(data);
     Events.flowError(data);
     store.flowStatus = FlowStatus.ERROREND;
   }

package/dist/collection/helpers/ApiCall.js

@@ -94,10 +94,10 @@ export class ApiCall {
     let resp = await this.post(this.urls.SendLink, JSON.stringify(data));
     return resp.sent;
   }
-  AddLog(error) {
+  async AddLog(error) {
     try {
       let data = { requestId: store.requestId, action: store.flowStatus, message: JSON.stringify(error !== null && error !== void 0 ? error : 'no error data') };
-      this.post(this.urls.AddLog, JSON.stringify(data));
+      await this.post(this.urls.AddLog, JSON.stringify(data));
     }
     catch (_a) { }
   }

package/dist/collection/helpers/ML5.js

@@ -1,5 +1,7 @@
 import ml5 from 'ml5';
 import store from './store';
+// @ts-ignore
+import preload from '../assets/ml5-preload.png';
 export class ML5 {
   static getInstance() {
     if (!ML5.instance) {
@@ -13,10 +15,21 @@ export class ML5 {
   async init() {
     return new Promise(async (resolve) => {
       const modelPath = store.hasIdBack ? 'https://ekyc.blob.core.windows.net/$web/md/model.json' : 'https://ekyc.blob.core.windows.net/$web/model.json';
-      this.classifier = await ml5.imageClassifier(modelPath);
-      this.faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false });
+      this.classifier = await ml5.imageClassifier(modelPath, this.loaded);
+      this.faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false }, this.loaded);
+      //warmup
+      const img = new Image();
+      img.src = preload;
+      this.classifier.classify(img, this.gotResults);
+      this.faceapi.detect(img, this.gotResults);
       resolve();
-      console.log('ML5 LOADED!!!');
     });
   }
+  loaded() {
+    console.log('ML5 LOADED!!!');
+  }
+  gotResults(error, results) {
+    console.log(error);
+    console.log(results);
+  }
 }

package/dist/collection/helpers/Stream.js

@@ -130,7 +130,7 @@ export class Stream {
     this.mediaRecorder.ondataavailable = event => {
       this.recordedChunks.push(event.data);
     };
-    this.mediaRecorder.onstop = async () => {
+    this.mediaRecorder.onstop = (_e) => {
       this.saveVideoRecording(this.recordedChunks, options.mimeType);
       this.recordedChunks = [];
     };

package/dist/collection/libs/FaceML5Detector/FaceML5Detector.js

@@ -1,5 +1,5 @@
 import { ML5 } from '../../helpers/ML5';
-import { getVideoRatio } from '../../helpers/canvas';
+// import { getVideoRatio } from '../../helpers/canvas';
 import { FacePose } from '../FaceML5Detector/FacePose';
 import { FaceLandmarks } from '../FaceML5Detector/FacePose';
 // @ts-ignore
@@ -17,7 +17,6 @@ export class FaceML5Detector {
   constructor(stream, isMobile) {
     this.MAX_DETECTION = 1000 * 30;
     this.initTime = null;
-    this.videoRatio = 1;
     this.validFaceFound = false;
     this.start = null;
     this.frontFace = null;
@@ -26,13 +25,13 @@ export class FaceML5Detector {
     this.validFacePose = false;
     this.validFaceFoundAgain = false;
     this.MAX_NUMBER_FACES = 1;
-    this.MIN_FACE_SCORE = 0.65;
-    this.MIN_FACE_SIZE_FOR_MOBILE = 200;
-    this.MIN_FACE_SIZE_FOR_DESKTOP = 350;
-    this.MIN_OCCUPIED_SPACE_FOR_DESKTOP = 15;
-    this.MIN_OCCUPIED_SPACE_FOR_MOBILE = 15;
-    this.X_OFFSET_FROM_FRAME = 5;
-    this.Y_OFFSET_FROM_FRAME = 5;
+    this.MIN_FACE_SCORE = 0.75;
+    // private readonly MIN_FACE_SIZE_FOR_MOBILE = 200;
+    // private readonly MIN_FACE_SIZE_FOR_DESKTOP = 350;
+    this.MIN_OCCUPIED_SPACE_FOR_DESKTOP = 20;
+    this.MIN_OCCUPIED_SPACE_FOR_MOBILE = 30;
+    this.X_OFFSET_FROM_FRAME = 2;
+    this.Y_OFFSET_FROM_FRAME = 2;
     this.stream = stream;
     this.ml5 = ML5.getInstance();
     this.isMobile = isMobile;
@@ -47,7 +46,7 @@ export class FaceML5Detector {
     this.continue = true;
     this.width = this.videoElement.videoWidth;
     this.height = this.videoElement.videoHeight;
-    this.videoRatio = getVideoRatio(this.videoElement);
+    // this.videoRatio = getVideoRatio(this.videoElement);
     this.drawFrame('white');
     this.delay(2000).then(() => this.detectFaces());
   }
@@ -82,12 +81,12 @@ export class FaceML5Detector {
         if (!this.validFaceFound) {
           this.validFaceFound = true;
           this.stream.autoCapturing();
-          this.frontFace = new FaceLandmarks(results[0], this.width, this.height);
+          // this.frontFace = new FaceLandmarks(results[0], this.width, this.height);
           await this.drawFrame('green');
           this.requestedFacePose = this.stream.requestFacePose();
           await this.delay(GlobalValues.VideoLenght);
         }
-        if (this.validFaceFound && !this.validFaceFoundAgain) {
+        else if (this.validFaceFound && !this.validFaceFoundAgain) {
           await this.checkFacePose(results);
         }
       }
@@ -132,28 +131,36 @@ export class FaceML5Detector {
   }
   checkFaceSize(result) {
     const faceBox = result[0].detection.box;
-    const { width, height, area } = faceBox;
+    const { area } = faceBox;
+    // const { width, height, area } = faceBox;
     const { imageHeight, imageWidth } = result[0].detection;
     const occupiedSize = 100 / ((imageHeight * imageWidth) / area);
-    const minSide = Math.min(width / this.videoRatio, height / this.videoRatio);
-    return (minSide > (this.isMobile ? this.MIN_FACE_SIZE_FOR_MOBILE : this.MIN_FACE_SIZE_FOR_DESKTOP) &&
-      occupiedSize > (this.isMobile ? this.MIN_OCCUPIED_SPACE_FOR_MOBILE : this.MIN_OCCUPIED_SPACE_FOR_DESKTOP));
+    // const minSide = Math.min(width / this.videoRatio, height / this.videoRatio);
+    return (
+    // minSide > (this.isMobile ? this.MIN_FACE_SIZE_FOR_MOBILE : this.MIN_FACE_SIZE_FOR_DESKTOP) &&
+    occupiedSize > (this.isMobile ? this.MIN_OCCUPIED_SPACE_FOR_MOBILE : this.MIN_OCCUPIED_SPACE_FOR_DESKTOP));
   }
   checkFaceIndent(result) {
     const faceBox = result[0].detection.box;
-    const { imageHeight, imageWidth } = result[0].detection;
     const { top, left, bottom, right } = faceBox;
-    const topIndent = top;
-    const leftIndent = left;
-    const rightIndent = imageWidth - right;
-    const bottomIndent = imageHeight - bottom;
-    return !(topIndent < this.Y_OFFSET_FROM_FRAME || leftIndent < this.X_OFFSET_FROM_FRAME || rightIndent < this.X_OFFSET_FROM_FRAME || bottomIndent < this.Y_OFFSET_FROM_FRAME);
+    const { imageHeight, imageWidth } = result[0].detection;
+    const topIndent = top * 100 / imageHeight;
+    const leftIndent = left * 100 / imageWidth;
+    const rightIndent = (imageWidth - right) * 100 / imageWidth;
+    const bottomIndent = (imageHeight - bottom) * 100 / imageHeight;
+    return !(topIndent < this.Y_OFFSET_FROM_FRAME ||
+      leftIndent < this.X_OFFSET_FROM_FRAME ||
+      rightIndent < this.X_OFFSET_FROM_FRAME ||
+      bottomIndent < this.Y_OFFSET_FROM_FRAME);
   }
   async checkFacePose(results) {
     let face = new FaceLandmarks(results[0], this.width, this.height);
     // this.drawLandmarks(results);
     // this.drawPoints(face);
-    if (this.presentedFacePose == null) {
+    if (this.frontFace == null) {
+      this.frontFace = face;
+    }
+    else if (this.frontFace != null && this.presentedFacePose == null) {
       let ff = this.frontFace;
       if (face.nose.y < ff.nose.y - (ff.eyesDistance() * 0.4))
         this.presentedFacePose = FacePose.LookUp;