@ekyc_qoobiss/qbs-ect-cmp 3.6.14 → 3.6.16

package/dist/collection/components/common/random-actions/random-actions.js

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core';
+import { HowToValues } from '../../../helpers/textValues';
+export class RandomActions {
+  componentWillLoad() { }
+  buttonClick() { }
+  render() {
+    return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.topTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, HowToValues.FooterText))))));
+  }
+  static get is() { return "random-actions"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["random-actions.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["random-actions.css"]
+    };
+  }
+}

package/dist/collection/components/common/selfie-capture/selfie-capture.js

@@ -30,23 +30,7 @@ export class SelfieCapture {
     this.cameras = new Cameras();
     this.demoEnded = false;
     this.uploadingLink = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
-    this.baseComponent = new BaseComponent(FlowSteps.SelfieHoldAnimation);
-  }
-  async eventChangeTitle(event) {
-    // this.stopAnimation = false;
-    if (event.detail == null) {
-      this.titleMesage = SelfieCaptureValues.FinalTitle;
-    }
-    else {
-      await this.baseComponent.logStep(FlowSteps.SelfieTiltAnimation, FlowMoments.Initialized);
-      this.titleMesage = SelfieCaptureValues.FacePoseMapping[event.detail];
-      this.demoEnded = false;
-      this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[event.detail];
-      this.demoVideo.play();
-      await delay(SelfieCaptureValues.VideoLenght);
-      this.demoEnded = true;
-      await this.baseComponent.logStep(FlowSteps.SelfieTiltAnimation, FlowMoments.Finalized);
-    }
+    this.baseComponent = new BaseComponent(FlowSteps.SelfieCapture);
   }
   eventVideoStarted(event) {
     this.videoStarted = true;
@@ -63,16 +47,14 @@ export class SelfieCapture {
     }
   }
   async componentDidLoad() {
-    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Initialized);
+    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
     this.demoVideo.play();
     await delay(SelfieCaptureValues.VideoLenght);
     this.demoEnded = true;
-    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Finalized);
     this.openCamera();
   }
   async openCamera() {
-    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Initialized);
     const constraints = this.cameras.GetConstraints('', store.device, true);
     setTimeout(() => {
       navigator.mediaDevices
@@ -103,7 +85,7 @@ export class SelfieCapture {
     this.captureTaken = true;
     let res = await Stream.getInstance(VerificationMode.Full).takePhoto();
     this.photoIsReady(res);
-    await this.baseComponent.logStep(FlowSteps.SelfieHoldAnimation, FlowMoments.Finalized);
+    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Finalized);
   }
   verificationFinished() {
     if (this.verified)
@@ -193,12 +175,6 @@ export class SelfieCapture {
   static get elementRef() { return "component"; }
   static get listeners() {
     return [{
-        "name": "changeTitle",
-        "method": "eventChangeTitle",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
         "name": "videoStarted",
         "method": "eventVideoStarted",
         "target": undefined,

package/dist/collection/components/common/selfie-tilt/selfie-tilt.css

@@ -0,0 +1,7 @@
+/* .cameraContainer {
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  position: relative;
+  overflow: hidden;
+} */

package/dist/collection/components/common/selfie-tilt/selfie-tilt.js

@@ -0,0 +1,212 @@
+import { h } from '@stencil/core';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { SelfieCaptureValues } from '../../../helpers/textValues';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { delay } from '../../../utils/utils';
+import store from '../../../helpers/store';
+import { BaseComponent } from '../../base-component';
+import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
+import { VerificationMode } from '../../../models/IVerificationMode';
+export class SelfieTilt {
+  // @State() private animationPath: string;
+  constructor() {
+    this.photoIsReady = photos => {
+      //this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.videoStarted = undefined;
+    this.captureTaken = undefined;
+    this.verified = undefined;
+    this.titleMesage = undefined;
+    this.demoEnded = undefined;
+    this.demoVideo = undefined;
+    this.uploadingLink = undefined;
+    this.captureHeight = undefined;
+    this.captureWidth = undefined;
+    this.captureTaken = false;
+    this.verified = false;
+    this.cameras = new Cameras();
+    this.demoEnded = false;
+    this.uploadingLink = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_selfie.mp4';
+    this.baseComponent = new BaseComponent(FlowSteps.SelfieTilt);
+  }
+  async eventChangeTitle(event) {
+    // this.stopAnimation = false;
+    if (event.detail == null) {
+      this.titleMesage = SelfieCaptureValues.FinalTitle;
+    }
+    else {
+      this.titleMesage = SelfieCaptureValues.FacePoseMapping[event.detail];
+      this.demoEnded = false;
+      this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[event.detail];
+      this.demoVideo.play();
+      await delay(SelfieCaptureValues.VideoLenght);
+      this.demoEnded = true;
+    }
+  }
+  eventVideoStarted(event) {
+    this.videoStarted = true;
+    var cameraSize = event.detail;
+    var height = Math.round((cameraSize.width * 16) / 9);
+    this.captureHeight = height - Math.round((window.screen.height - height) / 2);
+    this.captureWidth = Math.round((this.captureHeight * 9) / 16);
+  }
+  componentWillLoad() {
+    this.titleMesage = SelfieCaptureValues.Title;
+    //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
+    if (!navigator.mediaDevices) {
+      this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
+    }
+  }
+  async componentDidLoad() {
+    this.mainStream = Stream.getInstance(VerificationMode.Tilt);
+    await this.baseComponent.logStep(FlowSteps.SelfieTilt, FlowMoments.Initialized);
+    this.openCamera();
+  }
+  async openCamera() {
+    const constraints = this.cameras.GetConstraints('', store.device, true);
+    setTimeout(() => {
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(stream => {
+        this.mainStream.initStream(stream);
+      })
+        .catch(e => {
+        this.closeCamera();
+        this.apiErrorEvent.emit(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (this.mainStream) {
+      this.mainStream.dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  async takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    let res = this.mainStream.takePhoto();
+    this.photoIsReady(res);
+    await this.baseComponent.logStep(FlowSteps.SelfieCapture, FlowMoments.Finalized);
+  }
+  verificationFinished() {
+    if (this.verified)
+      return;
+    this.verified = true;
+    this.titleMesage = SelfieCaptureValues.Loading;
+    this.closeCamera();
+    this.demoEnded = false;
+    this.demoVideo.src = this.uploadingLink;
+    this.demoVideo.loop = true;
+    this.demoVideo.play();
+  }
+  render() {
+    let cameraStyle;
+    if (store.device.isMobile && this.videoStarted) {
+      cameraStyle = {
+        'width': this.captureWidth + 'px',
+        'height': this.captureHeight + 'px',
+        'overflow': 'hidden',
+        'borderRadius': '10px',
+        'text-align': 'center',
+        'margin': 'auto',
+      };
+    }
+    let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
+    //let videoClass = this.device.isMobile ? '' : 'video-demo';
+    let bgDemo = this.verified ? 'container' : 'container bg-black';
+    return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, SelfieCaptureValues.FooterText)))));
+  }
+  static get is() { return "selfie-tilt"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["selfie-tilt.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["selfie-tilt.css"]
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "demoEnded": {},
+      "demoVideo": {},
+      "uploadingLink": {},
+      "captureHeight": {},
+      "captureWidth": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoSelfieTiltCapture",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "apiErrorEvent",
+        "name": "apiError",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "component"; }
+  static get listeners() {
+    return [{
+        "name": "changeTitle",
+        "method": "eventChangeTitle",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "videoStarted",
+        "method": "eventVideoStarted",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/flow/process-id/process-id.js

@@ -5,7 +5,7 @@ import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { getLogMessage } from '../../../utils/utils';
 import { BaseComponent } from '../../base-component';
-import { CaptureFlowStatus, CaptureUploadTypes } from '../../../models/CaptureFlow';
+import { IdCaptureFlowStatus, CaptureUploadTypes } from '../../../models/CaptureFlow';
 // import { IDPose } from '../../libs/IDML5Detector/IDPose';
 export class ProcessId {
   constructor() {
@@ -51,14 +51,14 @@ export class ProcessId {
         recType: CaptureUploadTypes.TiltVideo,
       };
     }
-    this.captureStep = CaptureFlowStatus.HowToFront;
+    this.captureStep = IdCaptureFlowStatus.HowToFront;
   }
   howToDone() {
-    if (this.captureStep == CaptureFlowStatus.HowToFront) {
-      this.captureStep = CaptureFlowStatus.IdFront;
+    if (this.captureStep == IdCaptureFlowStatus.HowToFront) {
+      this.captureStep = IdCaptureFlowStatus.IdFront;
     }
-    if (this.captureStep == CaptureFlowStatus.HowToBack) {
-      this.captureStep = CaptureFlowStatus.IdBack;
+    if (this.captureStep == IdCaptureFlowStatus.HowToBack) {
+      this.captureStep = IdCaptureFlowStatus.IdBack;
     }
   }
   timeElapsed() {
@@ -116,15 +116,15 @@ export class ProcessId {
       return;
     }
     let mimeType = idRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
-    if (this.captureStep == CaptureFlowStatus.IdFront) {
+    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
       let frontRec = new File([idRecording], this.flow.front.recName + mimeType.extension, { type: mimeType.type });
       this.flow.front.recordingDone = await this.uploadRecording(this.flow.front.recType, frontRec);
     }
-    if (this.captureStep == CaptureFlowStatus.IdBack) {
+    if (this.captureStep == IdCaptureFlowStatus.IdBack) {
       let backRec = new File([idRecording], this.flow.back.recName + mimeType.extension, { type: mimeType.type });
       this.flow.back.recordingDone = await this.uploadRecording(this.flow.back.recType, backRec);
     }
-    if (this.captureStep == CaptureFlowStatus.Tilt) {
+    if (this.captureStep == IdCaptureFlowStatus.Tilt) {
       let tiltRec = new File([idRecording], this.flow.tilt.recName + mimeType.extension, { type: mimeType.type });
       this.flow.tilt.recordingDone = await this.uploadRecording(this.flow.tilt.recType, tiltRec);
     }
@@ -162,62 +162,65 @@ export class ProcessId {
     return false;
   }
   triggerErrorFlow(restart = false) {
+    if (this.captureStep == IdCaptureFlowStatus.IdBack) {
+      restart = true;
+    }
     if (restart) {
-      this.captureStep = CaptureFlowStatus.IdFront;
+      this.captureStep = IdCaptureFlowStatus.IdFront;
     }
-    if (this.captureStep == CaptureFlowStatus.IdFront || restart) {
+    if (this.captureStep == IdCaptureFlowStatus.IdFront || restart) {
       this.flow.front.photoDone = false;
       this.flow.front.recordingDone = false;
     }
-    if (this.captureStep == CaptureFlowStatus.IdBack || restart) {
+    if (this.captureStep == IdCaptureFlowStatus.IdBack || restart) {
       this.flow.back.photoDone = false;
       this.flow.back.recordingDone = false;
     }
-    if (this.captureStep == CaptureFlowStatus.Tilt || restart) {
+    if (this.captureStep == IdCaptureFlowStatus.Tilt || restart) {
       this.flow.tilt.photoDone = true;
       this.flow.tilt.recordingDone = false;
     }
     this.showInvalid = true;
   }
   async endFlow() {
-    if (this.captureStep == CaptureFlowStatus.IdFront) {
+    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
       if (this.flow.front.photoDone && this.flow.front.recordingDone) {
         if (store.hasIdBack) {
-          this.captureStep = CaptureFlowStatus.IdBack;
+          this.captureStep = IdCaptureFlowStatus.IdBack;
         }
         else if (store.hasIdTilt) {
-          this.captureStep = CaptureFlowStatus.Tilt;
+          this.captureStep = IdCaptureFlowStatus.Tilt;
         }
         else {
-          this.captureStep = CaptureFlowStatus.End;
+          this.captureStep = IdCaptureFlowStatus.End;
         }
       }
       else {
         return;
       }
     }
-    if (this.captureStep == CaptureFlowStatus.IdBack && store.hasIdBack) {
+    if (this.captureStep == IdCaptureFlowStatus.IdBack && store.hasIdBack) {
       if (this.flow.back.photoDone && this.flow.back.recordingDone) {
         if (store.hasIdTilt) {
-          this.captureStep = CaptureFlowStatus.Tilt;
+          this.captureStep = IdCaptureFlowStatus.Tilt;
         }
         else {
-          this.captureStep = CaptureFlowStatus.End;
+          this.captureStep = IdCaptureFlowStatus.End;
         }
       }
       else {
         return;
       }
     }
-    if (this.captureStep == CaptureFlowStatus.Tilt && store.hasIdTilt) {
+    if (this.captureStep == IdCaptureFlowStatus.Tilt && store.hasIdTilt) {
       if (this.flow.tilt.photoDone && this.flow.tilt.recordingDone) {
-        this.captureStep = CaptureFlowStatus.End;
+        this.captureStep = IdCaptureFlowStatus.End;
       }
       else {
         return;
       }
     }
-    if (this.captureStep != CaptureFlowStatus.End) {
+    if (this.captureStep != IdCaptureFlowStatus.End) {
       return;
     }
     store.flowStatus = FlowStatus.LIVENESS;
@@ -245,19 +248,19 @@ export class ProcessId {
     if (this.showInvalid || this.showTimeout) {
       return error;
     }
-    if (this.captureStep == CaptureFlowStatus.HowToFront) {
+    if (this.captureStep == IdCaptureFlowStatus.HowToFront) {
       return howToFront;
     }
-    if (this.captureStep == CaptureFlowStatus.HowToBack) {
+    if (this.captureStep == IdCaptureFlowStatus.HowToBack) {
       return howToBack;
     }
-    if (this.captureStep == CaptureFlowStatus.IdFront) {
+    if (this.captureStep == IdCaptureFlowStatus.IdFront) {
       return frontCapture;
     }
-    if (this.captureStep == CaptureFlowStatus.IdBack) {
+    if (this.captureStep == IdCaptureFlowStatus.IdBack) {
       return secondCapture;
     }
-    if (this.captureStep == CaptureFlowStatus.Tilt) {
+    if (this.captureStep == IdCaptureFlowStatus.Tilt) {
       return tiltCapture;
     }
   }

package/dist/collection/components/flow/user-liveness/user-liveness.js

@@ -5,18 +5,13 @@ import { FlowStatus } from '../../../models/FlowStatus';
 import { FlowSteps } from '../../../models/FlowSteps';
 import { getLogMessage } from '../../../utils/utils';
 import { BaseComponent } from '../../base-component';
+import { CaptureUploadTypes, SelfieFlowStatus } from '../../../models/CaptureFlow';
 export class UserLiveness {
   constructor() {
     this.recordingResultCount = 0;
     this.showError = undefined;
-    this.showHowTo = undefined;
-    this.selfieFlow = {
-      photoDone: false,
-      recordingDone: false,
-      verificationFinished: false,
-      photoFile: null,
-      recordingFile: null,
-    };
+    this.captureStep = undefined;
+    this.flow = undefined;
     this.baseComponent = new BaseComponent(FlowSteps.Selfie);
     this.baseComponent.setEventEmitter(this.apiErrorEvent);
   }
@@ -24,20 +19,46 @@ export class UserLiveness {
     await this.baseComponent.initialize();
   }
   componentWillLoad() {
-    this.showHowTo = true;
+    this.flow = {
+      front: {
+        photoDone: false,
+        recordingDone: false,
+        fileName: 'selfie.png',
+        recName: 'selfieVideo.',
+        photoType: CaptureUploadTypes.Selfie,
+        recType: CaptureUploadTypes.SelfieVideo,
+      },
+      back: null,
+      tilt: null,
+    };
+    if (store.hasSelfieGesture) {
+      this.flow.tilt = {
+        photoDone: true,
+        recordingDone: false,
+        fileName: '',
+        recName: 'selfieTiltVideo.',
+        photoType: CaptureUploadTypes.None,
+        recType: CaptureUploadTypes.SelfieGestureVideo,
+      };
+    }
+    this.captureStep = SelfieFlowStatus.HowToSelfie;
   }
   howToDone() {
-    this.showHowTo = false;
+    this.captureStep = SelfieFlowStatus.Selfie;
   }
   timeElapsed() {
     this.showError = true;
   }
   captureErrorDone() {
     this.showError = false;
-    this.selfieFlow.photoDone = false;
-    this.selfieFlow.recordingDone = false;
-    this.selfieFlow.photoFile = null;
-    this.selfieFlow.recordingFile = null;
+    if (this.captureStep == SelfieFlowStatus.Selfie) {
+      this.flow.front.photoDone = false;
+      this.flow.front.recordingDone = false;
+    }
+    if (this.captureStep == SelfieFlowStatus.Gesture) {
+      this.flow.tilt.photoDone = false;
+      this.flow.tilt.recordingDone = false;
+    }
   }
   async captureSelfieImage(event) {
     let selfiePhoto = event.detail;
@@ -47,8 +68,8 @@ export class UserLiveness {
       return;
     }
     try {
-      this.selfieFlow.photoFile = new File([selfiePhoto], 'selfie.png', { type: 'image/png' });
-      await this.uploadPhoto();
+      var uploadPhoto = new File([selfiePhoto], this.flow.front.fileName, { type: 'image/png' });
+      await this.uploadPhoto(uploadPhoto, this.flow.front.photoType);
     }
     catch (e) {
       this.apiErrorEvent.emit(e);
@@ -67,8 +88,15 @@ export class UserLiveness {
     }
     let mimeType = selfieRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
     try {
-      this.selfieFlow.recordingFile = new File([selfieRecording], 'selfieVideo.' + mimeType.extension, { type: mimeType.type });
-      await this.uploadRecording();
+      if (this.captureStep == SelfieFlowStatus.Selfie) {
+        let uploadRec = new File([selfieRecording], this.flow.front.recName + mimeType.extension, { type: mimeType.type });
+        this.flow.front.recordingDone = await this.uploadRecording(uploadRec, this.flow.front.recType);
+      }
+      if (this.captureStep == SelfieFlowStatus.Gesture) {
+        let uploadRec = new File([selfieRecording], this.flow.tilt.recName + mimeType.extension, { type: mimeType.type });
+        this.flow.tilt.recordingDone = await this.uploadRecording(uploadRec, this.flow.tilt.recType);
+      }
+      await this.endFlow();
     }
     catch (e) {
       if (store.recordingRetryCount < 3) {
@@ -81,49 +109,55 @@ export class UserLiveness {
     }
   }
   async verificationFinished(_event) {
-    this.selfieFlow.verificationFinished = true;
+    this.captureStep = SelfieFlowStatus.End;
     await this.endFlow();
   }
   async disconnectedCallback() {
     await this.baseComponent.finalize();
   }
-  async uploadPhoto() {
-    if (this.selfieFlow.photoFile == null || this.selfieFlow.photoDone) {
+  async uploadPhoto(photoFile, photoType) {
+    if (this.flow.front.photoDone) {
       return;
     }
-    this.selfieFlow.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(store.requestId, 'Selfie', this.selfieFlow.photoFile);
-    if (this.selfieFlow.photoDone) {
+    this.flow.front.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(store.requestId, photoType, photoFile);
+    if (this.flow.front.photoDone) {
       await this.endFlow();
     }
     else {
       this.triggerErrorFlow();
     }
   }
-  async uploadRecording() {
-    if (this.selfieFlow.recordingFile == null || this.selfieFlow.recordingDone) {
-      return;
-    }
-    this.selfieFlow.recordingDone = await this.baseComponent.apiCall.UploadFileForRequestB64(store.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
-    if (this.selfieFlow.recordingDone) {
-      await this.endFlow();
+  async uploadRecording(uploadRec, recType) {
+    let uplodDone = await this.baseComponent.apiCall.UploadFileForRequestB64(store.requestId, recType, uploadRec);
+    if (uplodDone) {
+      return true;
     }
     else {
       this.triggerErrorFlow();
     }
+    return false;
   }
   triggerErrorFlow() {
-    this.selfieFlow.photoFile = null;
-    this.selfieFlow.recordingFile = null;
     this.showError = true;
   }
   async endFlow() {
-    if (!this.selfieFlow.photoDone) {
-      return;
+    if (this.captureStep == SelfieFlowStatus.Selfie) {
+      if (this.flow.front.photoDone && this.flow.front.recordingDone) {
+        this.captureStep = SelfieFlowStatus.Gesture;
+      }
+      else {
+        return;
+      }
     }
-    if (!this.selfieFlow.recordingDone) {
-      return;
+    if (this.captureStep == SelfieFlowStatus.Gesture) {
+      if (this.flow.tilt.photoDone && this.flow.tilt.recordingDone) {
+        this.captureStep = SelfieFlowStatus.End;
+      }
+      else {
+        return;
+      }
     }
-    if (!this.selfieFlow.verificationFinished) {
+    if (this.captureStep != SelfieFlowStatus.End) {
       return;
     }
     store.recordingRetryCount = 0;
@@ -132,8 +166,21 @@ export class UserLiveness {
   render() {
     let howTo = h("how-to-info", { idSide: "" });
     let capture = h("selfie-capture", { id: "camera" });
+    let tilt = h("selfie-tilt", { id: "camera" });
     let error = h("capture-error", { type: "LIVENESS" });
-    return this.showHowTo ? howTo : this.showError ? error : capture;
+    if (this.showError) {
+      return error;
+    }
+    if (this.captureStep == SelfieFlowStatus.HowToSelfie) {
+      return howTo;
+    }
+    if (this.captureStep == SelfieFlowStatus.Selfie) {
+      return capture;
+    }
+    if (this.captureStep == SelfieFlowStatus.Gesture) {
+      return tilt;
+    }
+    return capture;
   }
   static get is() { return "user-liveness"; }
   static get originalStyleUrls() {
@@ -149,8 +196,8 @@ export class UserLiveness {
   static get states() {
     return {
       "showError": {},
-      "showHowTo": {},
-      "selfieFlow": {}
+      "captureStep": {},
+      "flow": {}
     };
   }
   static get events() {

package/dist/collection/helpers/Stream.js

@@ -202,7 +202,7 @@ export class Stream {
   async startFaceDetection() {
     if (this.streamPaused)
       return;
-    this.faceML5Detector.initDetector();
+    this.faceML5Detector.initDetector(this.verificationMode);
   }
   requestFacePose() {
     var pose = FacePosePick.randomEnum(FacePose);