@ekyc_qoobiss/qbs-ect-cmp 1.2.0

package/dist/collection/components/common/id-back-capture/id-back-capture.js

@@ -0,0 +1,212 @@
+import { h } from '@stencil/core';
+import Events from '../../../helpers/Events';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { IdCaptureValues } from '../../../helpers/textValues';
+import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { IDPose } from '../../../libs/IDML5Detector/IDPose';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdBackCapture {
+  // @State() private animationPath: string;
+  constructor() {
+    this.delay = ms => new Promise(res => setTimeout(res, ms));
+    this.photoIsReady = photos => {
+      //this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.device = undefined;
+    this.videoStarted = undefined;
+    this.cameraSize = undefined;
+    this.captureTaken = undefined;
+    this.verified = undefined;
+    this.titleMesage = undefined;
+    this.showDemo = undefined;
+    this.demoVideo = undefined;
+    this.captureTaken = false;
+    this.verified = false;
+    this.cameras = new Cameras();
+    this.showDemo = true;
+  }
+  async eventChangeTitle(event) {
+    this.showDemo = true;
+    this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
+    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackTilted];
+    this.demoVideo.play();
+    await this.delay(IdCaptureValues.VideoLenght);
+    this.showDemo = false;
+  }
+  eventVideoStarted(event) {
+    this.videoStarted = true;
+    this.cameraSize = event.detail;
+  }
+  async componentWillLoad() {
+    Events.init(this.component);
+    //this.videoDemoStyle = this.device.isMobile ? { width: window.screen.width + 'px', height: window.screen.height + 'px', 'object-fit': 'fill' } : {};
+    if (!navigator.mediaDevices) {
+      Events.flowError('This browser does not support webRTC');
+    }
+  }
+  async componentDidLoad() {
+    this.titleMesage = IdCaptureValues.TtileRotate;
+    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
+    this.demoVideo.play();
+    await this.delay(IdCaptureValues.VideoLenght);
+    this.titleMesage = IdCaptureValues.TitleBack;
+    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
+    this.demoVideo.play();
+    await this.delay(IdCaptureValues.VideoLenght);
+    this.showDemo = false;
+    this.openCamera();
+  }
+  async openCamera() {
+    let _cameras = await this.cameras.GetCameras(this.device);
+    var recommCamera = this.cameras.GetRecommendedCamera(_cameras);
+    var constraints = this.cameras.GetConstraints(recommCamera === null || recommCamera === void 0 ? void 0 : recommCamera.deviceId, this.device);
+    setTimeout(() => {
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(stream => {
+        const superStream = Stream.getInstance();
+        superStream.initStream(stream);
+      })
+        .catch(e => {
+        this.closeCamera();
+        Events.flowError(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (Stream.instance) {
+      Stream.getInstance().dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    IDML5Detector.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  verificationFinished() {
+    if (this.verified)
+      return;
+    this.verified = true;
+    this.titleMesage = IdCaptureValues.Loading;
+    this.closeCamera();
+    this.showDemo = true;
+    this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
+    this.demoVideo.loop = true;
+    this.demoVideo.play();
+  }
+  async takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    let res = await Stream.getInstance().takePhoto();
+    this.photoIsReady(res);
+  }
+  render() {
+    let cameraStyle;
+    let cameraStyleInner;
+    if (this.videoStarted) {
+      cameraStyle = { width: Math.round(this.cameraSize.width) + 'px', height: Math.round((this.cameraSize.width * 9) / 16) + 'px', overflow: 'hidden', borderRadius: '10px' };
+      cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
+    }
+    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.showDemo == false }, h("video", { id: "howtoBack", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { device: this.device, "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText)))));
+  }
+  static get is() { return "id-back-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-back-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-back-capture.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "device": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Device",
+          "resolved": "Device",
+          "references": {
+            "Device": {
+              "location": "import",
+              "path": "../../../models/IDevice"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "cameraSize": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "showDemo": {},
+      "demoVideo": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoIdBackCapture",
+        "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": "verificationFinished",
+        "method": "verificationFinished",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/common/id-capture/id-capture.css

@@ -0,0 +1,35 @@
+/* .cameraContainer {
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  position: relative;
+  overflow: hidden;
+} */
+
+.logo {
+  max-height: 450px;
+  max-width: 450px;
+}
+
+/* .block {
+  width: 90%;
+  padding-left: 5%;
+  padding-right: 5%;
+  margin-top: 5vh;
+} */
+
+.canvas-on-video {
+  max-width: 100%;
+  max-height: 100%;
+  position: absolute;
+  z-index: 2;
+  transform: scale(-1, 1);
+}
+/* 
+@media screen and (max-height: 414px) {
+  .logo {
+    background-size: 140px;
+    max-height: 140px;
+    max-width: 140px;
+  }
+} */

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

@@ -0,0 +1,213 @@
+import { h } from '@stencil/core';
+import Events from '../../../helpers/Events';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { IdCaptureValues } from '../../../helpers/textValues';
+import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { IDPose } from '../../../libs/IDML5Detector/IDPose';
+// import { IDPose } from '../../libs/IDML5Detector/IDPose';
+export class IdCapture {
+  // @State() private animationPath: string;
+  constructor() {
+    this.delay = ms => new Promise(res => setTimeout(res, ms));
+    this.photoIsReady = photos => {
+      //this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.device = undefined;
+    this.videoStarted = undefined;
+    this.cameraSize = undefined;
+    this.captureTaken = undefined;
+    this.verified = undefined;
+    this.titleMesage = undefined;
+    this.showDemo = undefined;
+    this.demoVideo = undefined;
+    this.captureTaken = false;
+    this.verified = false;
+    this.cameras = new Cameras();
+    this.showDemo = true;
+  }
+  async eventChangeTitle(event) {
+    this.showDemo = true;
+    this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
+    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
+    this.demoVideo.play();
+    await this.delay(IdCaptureValues.VideoLenght);
+    this.showDemo = false;
+  }
+  eventVideoStarted(event) {
+    this.videoStarted = true;
+    this.cameraSize = event.detail;
+  }
+  async componentWillLoad() {
+    Events.init(this.component);
+    this.titleMesage = IdCaptureValues.Title;
+    //this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
+    if (!navigator.mediaDevices) {
+      Events.flowError('This browser does not support webRTC');
+    }
+  }
+  async componentDidLoad() {
+    this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Straight];
+    this.demoVideo.play();
+    await this.delay(IdCaptureValues.VideoLenght);
+    this.showDemo = false;
+    this.openCamera();
+  }
+  async openCamera() {
+    let _cameras = await this.cameras.GetCameras(this.device);
+    var recommCamera = this.cameras.GetRecommendedCamera(_cameras);
+    var constraints = this.cameras.GetConstraints(recommCamera === null || recommCamera === void 0 ? void 0 : recommCamera.deviceId, this.device);
+    setTimeout(() => {
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(stream => {
+        const superStream = Stream.getInstance();
+        superStream.initStream(stream);
+      })
+        .catch(e => {
+        this.closeCamera();
+        Events.flowError(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (Stream.instance) {
+      Stream.getInstance().dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    IDML5Detector.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  async takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    let res = await Stream.getInstance().takePhoto();
+    this.photoIsReady(res);
+  }
+  async verificationFinished() {
+    if (this.verified)
+      return;
+    this.verified = true;
+    this.titleMesage = IdCaptureValues.Loading;
+    this.closeCamera();
+    this.showDemo = true;
+    this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
+    this.demoVideo.loop = true;
+    this.demoVideo.play();
+  }
+  render() {
+    let cameraStyle;
+    let cameraStyleInner;
+    if (this.videoStarted) {
+      cameraStyle = {
+        width: Math.round(this.cameraSize.width) + 'px',
+        height: Math.round((this.cameraSize.width * 9) / 16) + 'px',
+        overflow: 'hidden',
+        borderRadius: '10px',
+      };
+      cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
+    }
+    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.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { device: this.device, "capture-mode": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, IdCaptureValues.FooterText)))));
+  }
+  static get is() { return "id-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["id-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["id-capture.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "device": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Device",
+          "resolved": "Device",
+          "references": {
+            "Device": {
+              "location": "import",
+              "path": "../../../models/IDevice"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "cameraSize": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "showDemo": {},
+      "demoVideo": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoIdCapture",
+        "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/common/selfie-capture/selfie-capture.css

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

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

@@ -0,0 +1,222 @@
+import { h } from '@stencil/core';
+import Events from '../../../helpers/Events';
+import { Cameras } from '../../../helpers/Cameras';
+import { Stream } from '../../../helpers/Stream';
+import { SelfieCaptureValues } from '../../../helpers/textValues';
+import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
+import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
+export class SelfieCapture {
+  // @State() private animationPath: string;
+  constructor() {
+    this.delay = ms => new Promise(res => setTimeout(res, ms));
+    this.photoIsReady = photos => {
+      //this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.device = undefined;
+    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';
+  }
+  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 this.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() {
+    Events.init(this.component);
+    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) {
+      Events.flowError('This browser does not support webRTC');
+    }
+  }
+  async componentDidLoad() {
+    this.demoVideo.src = SelfieCaptureValues.FacePoseDemoMapping[FacePose.Main];
+    this.demoVideo.play();
+    await this.delay(SelfieCaptureValues.VideoLenght);
+    this.demoEnded = true;
+    this.openCamera();
+  }
+  async openCamera() {
+    const constraints = this.cameras.GetConstraints('', this.device, true);
+    setTimeout(() => {
+      navigator.mediaDevices
+        .getUserMedia(constraints)
+        .then(stream => {
+        const superStream = Stream.getInstance();
+        superStream.initStream(stream);
+      })
+        .catch(e => {
+        this.closeCamera();
+        Events.flowError(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (Stream.instance) {
+      Stream.getInstance().dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  async takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    let res = await Stream.getInstance().takePhoto();
+    this.photoIsReady(res);
+  }
+  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 (this.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", { device: this.device, "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-capture"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["selfie-capture.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["selfie-capture.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "device": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "Device",
+          "resolved": "Device",
+          "references": {
+            "Device": {
+              "location": "import",
+              "path": "../../../models/IDevice"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        }
+      }
+    };
+  }
+  static get states() {
+    return {
+      "videoStarted": {},
+      "captureTaken": {},
+      "verified": {},
+      "titleMesage": {},
+      "demoEnded": {},
+      "demoVideo": {},
+      "uploadingLink": {},
+      "captureHeight": {},
+      "captureWidth": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "eventPhotoCapture",
+        "name": "photoSelfieCapture",
+        "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
+      }];
+  }
+}