@ekyc_qoobiss/qbs-ect-cmp 1.5.11

package/dist/collection/components/sms-code-validation/sms-code-validation.js

@@ -0,0 +1,91 @@
+import { h } from '@stencil/core';
+import { ApiCall } from '../../helpers/ApiCall';
+import store from '../../helpers/store';
+import { PhoneValidationValues, CodeValidationValues } from '../../helpers/textValues';
+export class SmsCodeValidation {
+  constructor() {
+    this.title = undefined;
+    this.details = undefined;
+    this.buttonText = undefined;
+    this.phoneNumber = undefined;
+    this.code = undefined;
+    this.apiCall = new ApiCall();
+  }
+  async doAction() {
+    if (store.flowStatus == 'CODE' || store.flowStatus == 'CODEERROR') {
+      var codeChecked = await this.apiCall.CheckOTPCode(store.requestId, this.code);
+      if (typeof codeChecked === 'boolean' && codeChecked) {
+        store.flowStatus = 'HOWTOID';
+      }
+      else {
+        store.flowStatus = 'CODEERROR';
+      }
+    }
+    if (store.flowStatus == 'PHONE') {
+      var codeSent = await this.apiCall.SendOTPCode(store.requestId, this.phoneNumber);
+      if (typeof codeSent === 'boolean' && codeSent) {
+        store.flowStatus = 'CODE';
+      }
+    }
+  }
+  componentWillRender() {
+    if (store.flowStatus == 'PHONE') {
+      this.title = PhoneValidationValues.Title;
+      this.details = PhoneValidationValues.Description;
+      this.buttonText = PhoneValidationValues.Button;
+    }
+    if (store.flowStatus == 'CODE' || store.flowStatus == 'CODEERROR') {
+      this.title = CodeValidationValues.Title;
+      this.details = CodeValidationValues.Description;
+      this.buttonText = CodeValidationValues.Button;
+    }
+  }
+  handleChangePhone(ev) {
+    let value = ev.target ? ev.target.value : '';
+    this.phoneNumber = value.replace(/\D/g, '');
+    if (this.phoneNumber.length > 10)
+      this.phoneNumber = this.phoneNumber.substring(0, 10);
+    ev.target.value = this.phoneNumber;
+  }
+  handleChangeCode(ev) {
+    let value = ev.target ? ev.target.value : '';
+    this.code = value;
+    if (this.code.length > 4)
+      this.code = this.code.substring(0, 4);
+    ev.target.value = this.code;
+  }
+  render() {
+    let inputBlock;
+    let errorBlock;
+    if (store.flowStatus == 'CODEERROR') {
+      errorBlock = h("p", { class: "main-text font-size-18 mt-15 color-red" }, CodeValidationValues.Error);
+    }
+    if (store.flowStatus == 'PHONE') {
+      inputBlock = (h("div", { class: "input-container mb-15" }, h("label", { class: "font-size-18 mb-1" }, h("b", null, PhoneValidationValues.Label)), h("input", { type: "tel", id: "phoneInput", class: "main-input", onInput: ev => this.handleChangePhone(ev), value: this.phoneNumber })));
+    }
+    else {
+      inputBlock = (h("div", { class: "input-container mb-15" }, h("input", { type: "text", id: "codeInput", class: "main-input", onInput: ev => this.handleChangeCode(ev), value: this.code })));
+    }
+    return (h("div", { class: "container" }, h("div", { class: "row row-validare" }, h("div", null, h("h1", null, this.title), errorBlock == null ? h("p", { class: "main-text font-size-2 mt-15 mb-20" }, this.details) : errorBlock), inputBlock, h("div", { class: "btn-buletin" }, h("button", { id: "action", class: "main-button", onClick: () => this.doAction() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, PhoneValidationValues.FooterText)))));
+  }
+  static get is() { return "sms-code-validation"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["sms-code-validation.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sms-code-validation.css"]
+    };
+  }
+  static get states() {
+    return {
+      "title": {},
+      "details": {},
+      "buttonText": {},
+      "phoneNumber": {},
+      "code": {}
+    };
+  }
+}

package/dist/collection/helpers/ApiCall.js

@@ -0,0 +1,153 @@
+import store from './store';
+export class ApiCall {
+  constructor() {
+    this.toBase64 = (file) => new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = error => reject(error);
+    });
+  }
+  async Post(url, data) {
+    try {
+      let resp = await fetch(store.apiBaseUrl + url, {
+        method: 'POST',
+        body: data,
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'IDKYC-TOKEN ' + store.token,
+          // 'ApiKey': '2E1DF612-E9F3-4B8A-9154-5256E412D90C',
+        },
+      });
+      if (!resp.ok) {
+        return new Error(resp.statusText);
+      }
+      return await resp.json();
+    }
+    catch (err) {
+      console.log(err);
+      return err;
+    }
+  }
+  async Get(url) {
+    try {
+      let resp = await fetch(store.apiBaseUrl + url, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': 'IDKYC-TOKEN ' + store.token,
+          // 'ApiKey': '2E1DF612-E9F3-4B8A-9154-5256E412D90C',
+        },
+      });
+      if (!resp.ok) {
+        return new Error(resp.statusText);
+      }
+      return await resp.json();
+    }
+    catch (err) {
+      console.log(err);
+      return err;
+    }
+  }
+  async SendOTPCode(requestId, phoneNumber) {
+    let data = { requestId: requestId, phone: phoneNumber };
+    let jsonResp = await this.Post('/validation/otp/send', JSON.stringify(data));
+    if (typeof jsonResp != 'boolean') {
+      return false;
+    }
+    return jsonResp;
+  }
+  async CheckOTPCode(requestId, otpCode) {
+    let data = { requestId: requestId, otp: otpCode };
+    let jsonResp = await this.Post('/validation/otp/check', JSON.stringify(data));
+    if (typeof jsonResp != 'boolean') {
+      return false;
+    }
+    return jsonResp;
+  }
+  async AddIdentificationRequest(requestId, deviceInfo) {
+    let data = { requestId: requestId, clientDeviceInfo: deviceInfo };
+    let jsonResp = await this.Post('/validation/identity/insert', JSON.stringify(data));
+    if (typeof jsonResp.hasIdBack == 'boolean') {
+      store.hasIdBack = jsonResp.hasIdBack;
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  async UploadFileForRequestB64(requestId, type, file) {
+    let data = {
+      requestId: requestId,
+      type: type,
+      data: await this.toBase64(file),
+    };
+    let respJson = await this.Post('/validation/upload/capture', JSON.stringify(data));
+    if (respJson && respJson.file_path) {
+      if (type == 'IdFront') {
+        return respJson.isValid;
+      }
+      return true;
+    }
+    else {
+      return false;
+    }
+  }
+  async UploadFileForRequest(requestId, type, file) {
+    try {
+      let data = new FormData();
+      data.append('requestId', requestId);
+      data.append('type', type);
+      data.append('file', file);
+      let resp = await fetch(store.apiBaseUrl + '/validation/upload/file', {
+        method: 'POST',
+        body: data,
+      });
+      if (!resp.ok) {
+        console.log(resp.statusText);
+        return false;
+      }
+      let respJson = await resp.json();
+      if (respJson && respJson.file_path) {
+        if (type == 'IdFront') {
+          return respJson.isValid;
+        }
+        return true;
+      }
+      else {
+        return false;
+      }
+    }
+    catch (err) {
+      console.log(err);
+      return false;
+    }
+  }
+  async GetAgreement(agreementType) {
+    try {
+      let resp = await this.Get('/validation/agreement/content?type=' + agreementType + '&requestId=' + store.requestId);
+      if (resp) {
+        return resp.htmlText;
+      }
+      return '';
+    }
+    catch (err) {
+      console.log(err);
+      return '';
+    }
+  }
+  async GenerateAgreement(agreementType) {
+    try {
+      let data = { requestId: store.requestId, documentType: agreementType };
+      let resp = await this.Post('/validation/agreement/generate', JSON.stringify(data));
+      if (typeof resp != 'boolean') {
+        return false;
+      }
+      return resp;
+    }
+    catch (err) {
+      console.log(err);
+      return false;
+    }
+  }
+}

package/dist/collection/helpers/Cameras.js

@@ -0,0 +1,98 @@
+export class Cameras {
+  async GetCameras(deviceInfo) {
+    var allDevices = [];
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    const videoDevices = devices.filter(device => device.kind === 'videoinput');
+    for (const device of videoDevices) {
+      const updatedConstraints = this.GetConstraints(device.deviceId, deviceInfo);
+      const stream = await navigator.mediaDevices.getUserMedia(updatedConstraints);
+      stream.getVideoTracks().forEach(track => {
+        if (deviceInfo.isFirefox) {
+          const settings = track.getSettings();
+          let facingMode = settings.facingMode && settings.facingMode.length > 0 ? settings.facingMode[0] : '';
+          facingMode = facingMode === 'e' ? 'environment' : facingMode;
+          allDevices.push({
+            deviceId: device.deviceId,
+            name: device.label,
+            height: settings.height,
+            width: settings.width,
+            frameRate: Number(settings.frameRate.max),
+            torch: false,
+            recommended: false,
+            facingMode: facingMode,
+          });
+        }
+        else {
+          const capabilities = track.getCapabilities();
+          let facingMode = capabilities.facingMode && capabilities.facingMode.length > 0 ? capabilities.facingMode[0] : '';
+          facingMode = facingMode === 'e' ? 'environment' : facingMode;
+          allDevices.push({
+            deviceId: device.deviceId,
+            name: device.label,
+            height: capabilities.height.max,
+            width: capabilities.width.max,
+            frameRate: Number(capabilities.frameRate.max),
+            torch: capabilities.torch,
+            recommended: false,
+            facingMode: facingMode,
+          });
+        }
+      });
+      stream.getTracks().forEach(track => {
+        track.stop();
+      });
+    }
+    if (allDevices.length > 0) {
+      allDevices = allDevices.sort((a, b) => b.frameRate - a.frameRate);
+      var firstOption = allDevices.find(i => i.name.indexOf('0,') != -1 && i.facingMode === 'environment');
+      if (firstOption) {
+        allDevices[allDevices.indexOf(firstOption)].recommended = true;
+      }
+      else {
+        var firstEnv = allDevices.find(i => i.facingMode === 'environment');
+        if (firstEnv) {
+          allDevices[allDevices.indexOf(firstEnv)].recommended = true;
+        }
+      }
+    }
+    return allDevices;
+  }
+  GetConstraints(selectedDeviceId, device, portrait = false) {
+    let constraints = {
+      audio: false,
+      video: {
+        frameRate: 30
+      }
+    };
+    if (selectedDeviceId) {
+      constraints.video.deviceId = {
+        exact: selectedDeviceId,
+      };
+    }
+    if (device.isWin) {
+      constraints.video.width = { ideal: 1280 };
+    }
+    else {
+      if (portrait) {
+        constraints.video.facingMode = 'user';
+        constraints.video.width = { ideal: 1280 };
+        constraints.video.height = { ideal: 720 };
+      }
+      else {
+        constraints.video.facingMode = 'environment';
+        constraints.video.width = { ideal: 740 };
+        constraints.video.aspectRatio = 1;
+      }
+    }
+    return constraints;
+  }
+  GetRecommendedCamera(cameras) {
+    if (cameras && cameras.length > 0) {
+      var recommDevice = cameras.find(c => c.recommended);
+      if (recommDevice) {
+        return recommDevice;
+      }
+    }
+    return null;
+  }
+}

package/dist/collection/helpers/Events.js

@@ -0,0 +1,79 @@
+export default class Events {
+  static init(element) {
+    this.cameraModule = element;
+  }
+  static captureEvent(photos) {
+    this.cameraModule.dispatchEvent(new CustomEvent('capture', {
+      detail: {
+        photos,
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static recordingAvailable(recording) {
+    this.cameraModule.dispatchEvent(new CustomEvent('recordingAvailable', {
+      detail: {
+        recording,
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static closeEvent() {
+    this.cameraModule.dispatchEvent(new CustomEvent('close', {
+      bubbles: false,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static cameraReadyEvent() {
+    this.cameraModule.dispatchEvent(new CustomEvent('cameraReady', {
+      bubbles: false,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static errorEvent(error) {
+    this.cameraModule.dispatchEvent(new CustomEvent('error', {
+      detail: {
+        error,
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static detectionError(error) {
+    this.cameraModule.dispatchEvent(new CustomEvent('detectionError', {
+      detail: {
+        error,
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static loadedModels(loadedModels) {
+    this.cameraModule.dispatchEvent(new CustomEvent('loadedModels', {
+      detail: {
+        loadedModels,
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+  static detectorInitialized(initializationTime) {
+    this.cameraModule.dispatchEvent(new CustomEvent('detectorInitialized', {
+      detail: {
+        initializationTime,
+      },
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    }));
+  }
+}

package/dist/collection/helpers/ML5.js

@@ -0,0 +1,20 @@
+import ml5 from 'ml5';
+export class ML5 {
+  constructor() {
+    this.init();
+  }
+  static getInstance() {
+    if (!ML5.instance) {
+      ML5.instance = new ML5();
+    }
+    return ML5.instance;
+  }
+  async init() {
+    return new Promise(async (resolve) => {
+      this.classifier = await ml5.imageClassifier('../../assets/buletin-v2/model.json');
+      this.faceapi = await ml5.faceApi({ withLandmarks: true, withDescriptors: false });
+      resolve();
+      console.log('ML5 LOADED!!!');
+    });
+  }
+}

package/dist/collection/helpers/Stream.js

@@ -0,0 +1,223 @@
+import Events from './Events';
+import { IDML5Detector } from '../libs/IDML5Detector/IDML5Detector';
+import { FaceML5Detector } from '../libs/FaceML5Detector/FaceML5Detector';
+import { FacePose } from '../libs/FaceML5Detector/FacePose';
+import { FacePosePick } from '../libs/FaceML5Detector/FacePose';
+import { addExifInImg } from './security';
+var ImageFormat;
+(function (ImageFormat) {
+  ImageFormat["JPEG"] = "image/jpeg";
+  ImageFormat["PNG"] = "image/png";
+})(ImageFormat || (ImageFormat = {}));
+export class Stream {
+  constructor(device, _modelPath) {
+    this.streamPaused = false;
+    this.recordedChunks = [];
+    this.videoSize = { width: 0, height: 0 };
+    this.pauseStream = () => {
+      this.streamPaused = true;
+      this.mediaRecorder.pause();
+      this.videoElement.pause();
+      // this.dropMask();
+      // if (this.faceDetection) Detector.getInstance().stopDetector();
+    };
+    this.device = device;
+    this.idML5Detector = IDML5Detector.getInstance(this, device.isMobile);
+    this.faceML5Detector = FaceML5Detector.getInstance(this, device.isMobile);
+  }
+  setFaceDetection(val) {
+    this.faceDetection = val;
+    this.idDetection = !val;
+  }
+  setIdDetection(val) {
+    this.idDetection = val;
+    this.faceDetection = !val;
+  }
+  // public setProbabilityThreshold(val: number): void {
+  //   Detector.getInstance().setProbabilityThreshold(val);
+  // }
+  setCallbackChangeTitle(fun) {
+    this.callbackChangeTitle = fun;
+  }
+  setCallbackStopAnimation(fun) {
+    this.callbackStopAnimation = fun;
+  }
+  setCallbackVideoStarted(fun) {
+    this.callbackVideoStarted = fun;
+  }
+  setCallbackErrors(fun) {
+    this.callbackErrors = fun;
+  }
+  setCallbackAutoCapturing(fun) {
+    this.callbackAutoCapturing = fun;
+  }
+  // public setCallbackFaceDetectionErrors(fun: (e: PipelineResult) => void): void {
+  //   this.callbackFaceDetectionErrors = fun;
+  // }
+  setCallbackRecordingReady(fun) {
+    this.callbackRecordingReady = fun;
+  }
+  setCallbackTimeElapsed(fun) {
+    this.callbackTimeElapsed = fun;
+  }
+  static getInstance(device, modelPath) {
+    if (!Stream.instance) {
+      Stream.instance = new Stream(device, modelPath);
+    }
+    return Stream.instance;
+  }
+  // public returnErrors(errors: PipelineResult) {
+  //   this.callbackFaceDetectionErrors(errors);
+  // }
+  autoCapturing() {
+    this.callbackAutoCapturing();
+  }
+  timeElapsed() {
+    this.callbackTimeElapsed();
+  }
+  updateHtmlElements(videoElement, canvasElement, component) {
+    this.videoElement = videoElement;
+    this.canvasElement = canvasElement;
+    this.idML5Detector.updateHtmlElements(this.videoElement, this.canvasElement, component);
+    this.faceML5Detector.updateHtmlElements(this.videoElement, this.canvasElement, component);
+  }
+  static orientationChange() { }
+  startStream(stream) {
+    if (this.stream)
+      this.stream.getTracks().forEach((track) => track.stop());
+    this.stream = stream;
+    if ('srcObject' in this.videoElement) {
+      this.videoElement.srcObject = stream;
+    }
+    else {
+      this.videoElement.src = window.URL.createObjectURL(stream);
+    }
+    this.videoElement.addEventListener('loadedmetadata', async (_e) => {
+      this.videoElement.play().then(() => {
+        this.streamPaused = false;
+        Events.cameraReadyEvent();
+        this.updateCanvasSize(this.canvasElement);
+        this.updateVideoSize(this.videoElement);
+        this.callbackVideoStarted();
+        if (this.idDetection)
+          this.startIdDetection();
+        if (this.faceDetection)
+          this.startFaceDetection();
+      });
+    }, false);
+  }
+  async initStream(stream) {
+    this.startStream(stream);
+    this.recordStream();
+  }
+  async resumeStream() {
+    this.streamPaused = false;
+    this.mediaRecorder.resume();
+    await this.videoElement.play();
+    // this.drawMask();
+    // if (this.faceDetection) await Detector.getInstance().startDetector();
+  }
+  recordStream() {
+    var options = { mimeType: 'video/webm;codecs=vp8', videoBitsPerSecond: 1500000 };
+    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+      if (this.device.isIos || this.device.isSafari)
+        options.mimeType = 'video/mp4;codecs:h264';
+    }
+    this.recordedChunks = [];
+    this.mediaRecorder = new MediaRecorder(this.stream, options);
+    this.mediaRecorder.ondataavailable = event => {
+      this.recordedChunks.push(event.data);
+    };
+    this.mediaRecorder.onstop = async () => {
+      this.saveVideoRecording(this.recordedChunks, options.mimeType);
+      this.recordedChunks = [];
+    };
+    this.mediaRecorder.start(); // Start recording, and dump data every second
+  }
+  async saveVideoRecording(videoTosave, mimeType) {
+    var blob = new Blob(videoTosave, {
+      type: mimeType.split(';')[0],
+    });
+    this.callbackRecordingReady(blob);
+  }
+  updateCanvasSize(canvas) {
+    this.videoSize = { width: this.videoElement.videoWidth, height: this.videoElement.videoHeight };
+    canvas.width = this.videoSize.width;
+    canvas.height = this.videoSize.height;
+  }
+  updateVideoSize(video) {
+    this.videoSize = { width: this.videoElement.videoWidth, height: this.videoElement.videoHeight };
+    video.width = this.videoSize.width;
+    video.height = this.videoSize.height;
+  }
+  dropStream() {
+    if (!this.streamStopped()) {
+      this.stream.getTracks().forEach((track) => track.stop());
+      this.videoElement.srcObject = null;
+    }
+    if (this.mediaRecorder && this.mediaRecorder.state != 'inactive') {
+      this.mediaRecorder.stop();
+    }
+    // if (this.faceDetection) Detector.getInstance().stopDetector();
+  }
+  streamStopped() {
+    return !(this.stream && this.stream.getTracks && this.stream.getTracks().length > 0);
+  }
+  takePhoto() {
+    return new Promise(async (resolve) => {
+      const canvas = document.createElement('canvas');
+      canvas.width = this.videoElement.videoWidth;
+      canvas.height = this.videoElement.videoHeight;
+      resolve([await this.getFrame(canvas)]);
+    });
+  }
+  getFrame(canvas) {
+    return new Promise(resolve => {
+      const context = canvas.getContext('2d');
+      context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
+      canvas.toBlob((frame) => {
+        if (frame.type === ImageFormat.JPEG && !this.device.isIos) {
+          try {
+            addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
+          }
+          catch (e) {
+            resolve(frame);
+            this.callbackErrors(e, false);
+          }
+        }
+        else {
+          resolve(frame);
+        }
+      }, ImageFormat.PNG, 1);
+      let outCanvContext = this.canvasElement.getContext('2d');
+      outCanvContext.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
+    });
+  }
+  async startIdDetection() {
+    if (this.streamPaused)
+      return;
+    this.idML5Detector.initDetector();
+  }
+  async startFaceDetection() {
+    if (this.streamPaused)
+      return;
+    this.faceML5Detector.initDetector();
+  }
+  requestFacePose() {
+    var pose = FacePosePick.randomEnum(FacePose);
+    // var pose = FacePose.TiltLeft;
+    this.callbackChangeTitle(pose);
+    return pose;
+  }
+  changeFacePose() {
+    this.callbackChangeTitle(null);
+  }
+  changeIDPose(pose) {
+    this.callbackChangeTitle(pose);
+  }
+  stopAnimation() {
+    this.callbackStopAnimation();
+  }
+}
+window.addEventListener('resize', Stream.orientationChange, false);
+window.addEventListener('orientationchange', Stream.orientationChange, false);

package/dist/collection/helpers/canvas.js

@@ -0,0 +1,10 @@
+export function videoRatio(videoElement) {
+  const hRatio = videoElement.clientWidth / videoElement.videoWidth;
+  const vRatio = videoElement.clientHeight / videoElement.videoHeight;
+  return Math.min(hRatio, vRatio);
+}
+export function getVideoRatio(videoElement) {
+  const hRatio = videoElement.clientWidth / videoElement.videoWidth;
+  const vRatio = videoElement.clientHeight / videoElement.videoHeight;
+  return Math.min(hRatio, vRatio);
+}