@ekyc_qoobiss/qbs-ect-cmp 1.5.11

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

@@ -0,0 +1,201 @@
+import { h, getAssetPath } 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';
+export class IdBackCapture {
+  constructor() {
+    this.photoIsReady = photos => {
+      this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.device = undefined;
+    this.videoStarted = undefined;
+    this.cameraSize = undefined;
+    this.stopAnimation = undefined;
+    this.captureTaken = undefined;
+    this.titleMesage = undefined;
+    this.animationPath = undefined;
+    this.captureTaken = false;
+    this.cameras = new Cameras();
+  }
+  eventChangeTitle(event) {
+    this.stopAnimation = false;
+    if (event.detail == IDPose.Tilted) {
+      this.animationPath = getAssetPath('../../assets/animations/id/tilt-id.gif');
+    }
+    if (event.detail == IDPose.Straight) {
+      this.animationPath = getAssetPath('../../assets/animations/id/straighten-id.gif');
+    }
+    this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
+  }
+  eventVideoStarted(event) {
+    this.videoStarted = true;
+    this.cameraSize = event.detail;
+  }
+  eventStopAnimation() {
+    this.stopAnimation = true;
+  }
+  async componentWillLoad() {
+    Events.init(this.component);
+    this.titleMesage = IdCaptureValues.Title;
+    if (!navigator.mediaDevices) {
+      Events.errorEvent('This browser does not support webRTC');
+    }
+  }
+  componentDidLoad() {
+    this.openCamera();
+    this.animationPath = getAssetPath('../../assets/animations/id/present-id.gif');
+  }
+  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.errorEvent(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (Stream.instance) {
+      Events.closeEvent();
+      Stream.getInstance().dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    IDML5Detector.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    this.titleMesage = IdCaptureValues.Loading;
+    Stream.getInstance()
+      .takePhoto()
+      .then(res => {
+      this.photoIsReady(res[0]);
+    });
+  }
+  render() {
+    let loadingBlock;
+    if (this.captureTaken) {
+      loadingBlock = (h("div", { class: "pos-relative" }, h("div", { class: "dot-effect" }, h("div", { class: "snippet", "data-title": ".dot-shuttle" }, h("div", { class: "stage filter-contrast" }, h("div", { class: "dot-shuttle" }))))));
+    }
+    let animationBlock;
+    if (this.videoStarted && this.stopAnimation !== true) {
+      animationBlock = (h("img", { class: "animation", "data-src": this.animationPath, src: this.animationPath }));
+    }
+    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' };
+    }
+    return (h("div", { class: "container bg-black" }, h("div", { class: "row ctheight-100" }, h("div", null, h("h1", { class: "color-white" }, this.titleMesage)), h("div", { hidden: this.captureTaken, class: "chenar-buletin pos-relative" }, animationBlock, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { device: this.device, "capture-mode": "id" })))), loadingBlock, h("div", { class: "pos-relative" }, 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": {},
+      "stopAnimation": {},
+      "captureTaken": {},
+      "titleMesage": {},
+      "animationPath": {}
+    };
+  }
+  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": "stopAnimation",
+        "method": "eventStopAnimation",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/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/id-capture/id-capture.js

@@ -0,0 +1,201 @@
+import { h, getAssetPath } 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';
+export class IdCapture {
+  constructor() {
+    this.photoIsReady = photos => {
+      this.closeCamera();
+      this.eventPhotoCapture.emit(photos);
+    };
+    this.device = undefined;
+    this.videoStarted = undefined;
+    this.cameraSize = undefined;
+    this.stopAnimation = undefined;
+    this.captureTaken = undefined;
+    this.titleMesage = undefined;
+    this.animationPath = undefined;
+    this.captureTaken = false;
+    this.cameras = new Cameras();
+  }
+  eventChangeTitle(event) {
+    this.stopAnimation = false;
+    if (event.detail == IDPose.Tilted) {
+      this.animationPath = getAssetPath('../../assets/animations/id/tilt-id.gif');
+    }
+    if (event.detail == IDPose.Straight) {
+      this.animationPath = getAssetPath('../../assets/animations/id/straighten-id.gif');
+    }
+    this.titleMesage = IdCaptureValues.IDPoseMapping[event.detail];
+  }
+  eventVideoStarted(event) {
+    this.videoStarted = true;
+    this.cameraSize = event.detail;
+  }
+  eventStopAnimation() {
+    this.stopAnimation = true;
+  }
+  async componentWillLoad() {
+    Events.init(this.component);
+    this.titleMesage = IdCaptureValues.Title;
+    if (!navigator.mediaDevices) {
+      Events.errorEvent('This browser does not support webRTC');
+    }
+  }
+  componentDidLoad() {
+    this.openCamera();
+    this.animationPath = getAssetPath('../../assets/animations/id/present-id.gif');
+  }
+  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.errorEvent(e);
+      });
+    }, 100);
+  }
+  closeCamera() {
+    if (Stream.instance) {
+      Events.closeEvent();
+      Stream.getInstance().dropStream();
+    }
+  }
+  disconnectedCallback() {
+    this.closeCamera();
+    Stream.instance = null;
+    IDML5Detector.instance = null;
+    FaceML5Detector.instance = null;
+  }
+  takePhoto() {
+    if (this.captureTaken)
+      return;
+    this.captureTaken = true;
+    this.titleMesage = IdCaptureValues.Loading;
+    Stream.getInstance()
+      .takePhoto()
+      .then(res => {
+      this.photoIsReady(res[0]);
+    });
+  }
+  render() {
+    let loadingBlock;
+    if (this.captureTaken) {
+      loadingBlock = (h("div", { class: "pos-relative" }, h("div", { class: "dot-effect" }, h("div", { class: "snippet", "data-title": ".dot-shuttle" }, h("div", { class: "stage filter-contrast" }, h("div", { class: "dot-shuttle" }))))));
+    }
+    let animationBlock;
+    if (this.videoStarted && this.stopAnimation !== true) {
+      animationBlock = (h("img", { class: "animation", "data-src": this.animationPath, src: this.animationPath }));
+    }
+    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' };
+    }
+    return (h("div", { class: "container bg-black" }, h("div", { class: "row ctheight-100" }, h("div", null, h("h1", { class: "color-white" }, this.titleMesage)), h("div", { hidden: this.captureTaken, class: "chenar-buletin pos-relative" }, animationBlock, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { device: this.device, "capture-mode": "id" })))), loadingBlock, h("div", { class: "pos-relative" }, 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": {},
+      "stopAnimation": {},
+      "captureTaken": {},
+      "titleMesage": {},
+      "animationPath": {}
+    };
+  }
+  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": "stopAnimation",
+        "method": "eventStopAnimation",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "takePhoto",
+        "method": "takePhoto",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}