@ekyc_qoobiss/qbs-ect-cmp 1.5.11

package/dist/collection/helpers/index.js

@@ -0,0 +1,54 @@
+export const initDevice = () => {
+  let device = {
+    isMobile: false,
+    isAndroid: false,
+    isLinux: false,
+    isMac: false,
+    isWin: false,
+    isChrome: false,
+    isFirefox: false,
+    isSafari: false,
+    isIos: false,
+  };
+  device.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+  device.isAndroid = /Android/i.test(navigator.userAgent);
+  device.isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+  device.isLinux = /linux/i.test(navigator.platform);
+  device.isMac = /mac/i.test(navigator.platform);
+  device.isWin = /win/i.test(navigator.platform);
+  device.isChrome = /chrome/i.test(navigator.userAgent);
+  device.isFirefox = /firefox/i.test(navigator.userAgent);
+  device.isSafari = !device.isChrome ? /safari/i.test(navigator.userAgent) : false;
+  device.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
+  device.isAndroid = /Android/i.test(navigator.userAgent);
+  device.isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
+  if (!device.isIos) {
+    const isIPad = navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
+    if (isIPad) {
+      device.isIos = true;
+      device.isMobile = true;
+    }
+  }
+  return device;
+};
+export const convertToDataUrl = async (file) => {
+  return new Promise(async (resolve) => {
+    let arr = [];
+    for (let i = 0; i < file.length; i++) {
+      const fr = new FileReader();
+      fr.onload = () => {
+        arr.push(fr.result);
+        if (arr.length === file.length)
+          resolve(arr);
+      };
+      fr.readAsDataURL(file[i]);
+    }
+  });
+};
+export const blobToBase64 = (blob) => {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+};

package/dist/collection/helpers/security.js

@@ -0,0 +1,25 @@
+import { blobToBase64 } from '../utils/utils';
+import * as piexif from 'piexifjs';
+export const addExifInImg = async (blob, track, videoSize) => {
+  const base64 = await blobToBase64(blob);
+  const exif = piexif.load(base64);
+  const devices = await navigator.mediaDevices.enumerateDevices();
+  const cameraNames = devices.filter(device => device.kind === 'videoinput').map(device => device.label);
+  const json = {
+    width: videoSize.width,
+    height: videoSize.height,
+    usedCamera: track.label,
+    camerasOnDevice: cameraNames,
+  };
+  const newExif = {
+    '0th': Object.assign(Object.assign({}, exif['0th']), { [piexif.ImageIFD.Model]: json.usedCamera, [piexif.ImageIFD.ImageWidth]: json.width, [piexif.ImageIFD.ImageLength]: json.height }),
+    'Exif': Object.assign(Object.assign({}, exif['Exif']), { [piexif.ExifIFD.UserComment]: JSON.stringify(json) }),
+    'GPS': Object.assign({}, exif['GPS']),
+    'Interop': Object.assign({}, exif['Interop']),
+    '1st': Object.assign({}, exif['1st']),
+    'thumbnail': exif['thumbnail'],
+  };
+  const newExifBinary = piexif.dump(newExif);
+  const newPhotoData = piexif.insert(newExifBinary, base64);
+  return await fetch(newPhotoData).then(res => res.blob());
+};

package/dist/collection/helpers/store.js

@@ -0,0 +1,15 @@
+import { createStore } from '@stencil/store';
+import { SessionKeys } from './textValues';
+const { state, onChange } = createStore({
+  flowStatus: '',
+  requestId: '',
+  token: '',
+  cameraIds: [],
+  cameraId: '',
+  hasIdBack: false,
+  apiBaseUrl: 'https://apiro.id-kyc.com',
+});
+onChange('flowStatus', value => {
+  sessionStorage.setItem(SessionKeys.FlowStatusKey, value);
+});
+export default state;

package/dist/collection/helpers/textValues.js

@@ -0,0 +1,82 @@
+export class GlobalValues {
+}
+GlobalValues.FooterText = 'Qoobiss eKYC';
+export class HowToValues extends GlobalValues {
+}
+HowToValues.IdTitile = 'Pentru realizarea procesului de identificare este necesară verificarea actului de identitate';
+HowToValues.IdSubTitileFace = 'Prezintă fața actului de identitate';
+HowToValues.IdSubTitileBack = 'Prezintă spatele actului de identitate';
+HowToValues.IdDescriptionR1 = 'Urmărește cu atenție indicațiile de pe ecran.';
+HowToValues.IdDescriptionR2 = 'Ai grijă să nu se formeze în niciun moment reflexii de lumină pe actul de identitate.';
+HowToValues.IdDescriptionR3 = 'Folosește actul de identitate în original! Utilizarea copiilor duce la invalidarea procesului!';
+HowToValues.IdButton = 'Sunt gata!';
+HowToValues.SelfieTitile = 'Trebuie să realizăm o scurtă înregistrare cu tine în fața camerei telefonului sau a calculatorului.';
+HowToValues.SelfieDescriptionR1 = 'Asigură-te că ești într-o zonă cu sufiecientă lumină.';
+HowToValues.SelfieDescriptionR2 = 'Urmărește cu atenție indicațiile de pe ecran.';
+HowToValues.SelfieButton = 'Sunt gata!';
+export class LandingValues extends GlobalValues {
+}
+LandingValues.Title = 'Validarea identității la distanță este o procedură simplă și rapidă';
+LandingValues.Description = 'Asigură-te că ai:';
+LandingValues.IdInfo = 'Actul de identitate, în original';
+LandingValues.DeviceInfo = 'Un telefon mobil sau un calculator cu camera web';
+LandingValues.SmsInfo = 'Acces la un telefon mobil ce permite primirea de mesaje SMS';
+LandingValues.Warning = 'ATENȚIE! În cadrul acestui proces se poate utiliza doar cartea de identitate Românească.';
+LandingValues.WarningMd = 'ATENȚIE! In cadrul acestui proces se pot utiliza doar buletinele de identitate din Republica Moldova.';
+LandingValues.Terms = 'Prin continuarea procesului, confirmi că ai citit termenii de utilizare și ești de acord cu aceștia.';
+LandingValues.Button = 'Am înțeles';
+export class PhoneValidationValues extends GlobalValues {
+}
+PhoneValidationValues.Title = 'Este necesar să validăm numărul tău de telefon';
+PhoneValidationValues.Description = 'Introdu mai jos numarul tau de telefon:';
+PhoneValidationValues.Button = 'Trimite SMS de verificare';
+PhoneValidationValues.Label = 'Numarul tau de telefon';
+export class CodeValidationValues extends GlobalValues {
+}
+CodeValidationValues.Title = 'Introdu codul de validare primit prin sms:';
+CodeValidationValues.Description = ' ';
+CodeValidationValues.Button = 'Validează';
+CodeValidationValues.Error = 'Codul introdus nu este valid. Asigură-te că îl introduci corect';
+export class CompleteValues extends GlobalValues {
+}
+CompleteValues.Title = 'Procesul a fost finalizat.';
+CompleteValues.Description = 'Vei fi redirecționat în câteva momente.';
+CompleteValues.Message = 'Îți mulțumim!';
+export class SessionKeys {
+}
+SessionKeys.FlowStatusKey = 'qbs-ect-flowstatus';
+SessionKeys.RequestIdKey = 'qbs-ect-requestid';
+export class IdCaptureValues extends GlobalValues {
+}
+IdCaptureValues.Button = 'Încerc din nou';
+IdCaptureValues.Title = 'Încadrează actul de identitate în chenarul de pe ecran.';
+IdCaptureValues.Error = 'Procesul a eșuat. Te rugăm să respecți întocmai instrucțiunile de pe ecran. Ai grijă să încadrezi integral actul în chenraul de pe ecran și să nu apară reflexii de lumină pe suprafața acestuia.';
+IdCaptureValues.IDPoseMapping = {
+  0: 'Înclină actul de identitate spre spate.',
+  1: 'Îndreaptă actul de identitate si reîncadrează-l în chenarul de pe ecran.',
+};
+IdCaptureValues.Loading = 'Datele sunt încărcate';
+export class SelfieCaptureValues extends GlobalValues {
+}
+SelfieCaptureValues.Title = 'Încadrează fața în chenarul de pe ecran.';
+SelfieCaptureValues.FinalTitle = 'Îndreaptă capul și încadrează fața în chenarul de pe ecran.';
+SelfieCaptureValues.Error = 'Procesul a eșuat. Te rugăm să respecți întocmai instrucțiunile de pe ecran.';
+SelfieCaptureValues.Loading = 'Datele sunt încărcate';
+SelfieCaptureValues.FacePoseMapping = {
+  0: 'Întoarce capul spre stânga.',
+  1: 'Întoarce capul spre dreapta.',
+  2: 'Înclină capul spre spate.',
+  3: 'Înclină capul în față.',
+  4: 'Înclină capul spre stânga.',
+  5: 'Înclină capul spre dreapta.',
+};
+export class AgreementInfoValues extends GlobalValues {
+}
+AgreementInfoValues.Title = 'Pentru începerea identificării avem nevoie de acordurile tale:';
+AgreementInfoValues.Button = 'Încep identificarea';
+AgreementInfoValues.Terms = 'Am luat la cunoștință și sunt de acord cu Termenii și condițiile generale de utilizare';
+AgreementInfoValues.Agreement = 'Îmi exprim acordul pentru prelucrarea datelor cu caracter personal';
+export class AgreementCheckValues extends GlobalValues {
+}
+AgreementCheckValues.ButtonYes = 'Sunt de acord';
+AgreementCheckValues.ButtonNo = 'Nu sunt de acord';

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,206 @@
+import { ML5 } from '../../helpers/ML5';
+import { getVideoRatio } from '../../helpers/canvas';
+import { FacePose } from '../FaceML5Detector/FacePose';
+import { FaceLandmarks } from '../FaceML5Detector/FacePose';
+// @ts-ignore
+import face_white_svg from '../../assets/canvas-masks/face_white.svg';
+// @ts-ignore
+import face_green_svg from '../../assets/canvas-masks/face_green.svg';
+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;
+    this.requestedFacePose = null;
+    this.presentedFacePose = null;
+    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.stream = stream;
+    this.ml5 = ML5.getInstance();
+    this.isMobile = isMobile;
+  }
+  static getInstance(stream, isMobile) {
+    if (!FaceML5Detector.instance) {
+      FaceML5Detector.instance = new FaceML5Detector(stream, isMobile);
+    }
+    return FaceML5Detector.instance;
+  }
+  updateHtmlElements(videoElement, canvasElement, _component) {
+    this.videoElement = videoElement;
+    this.canvasElement = canvasElement;
+    // this.component = component;
+  }
+  initDetector() {
+    this.initTime = Date.now();
+    this.continue = true;
+    this.width = this.videoElement.videoWidth;
+    this.height = this.videoElement.videoHeight;
+    this.videoRatio = getVideoRatio(this.videoElement);
+    this.drawFrame('white');
+    this.delay(2000).then(() => this.detectFaces());
+  }
+  detectFaces() {
+    if (this.validFaceFoundAgain) {
+      if (this.start == null)
+        this.start = Date.now();
+      if (Date.now() > this.start + 3000) {
+        this.continue = false;
+        this.stream.autoCapturing();
+      }
+    }
+    if (Date.now() - this.initTime >= this.MAX_DETECTION) {
+      this.continue = false;
+      this.stream.timeElapsed();
+    }
+    if (this.presentedFacePose != null && !this.validFacePose) {
+      this.continue = false;
+      this.stream.timeElapsed();
+    }
+    if (this.continue)
+      this.ml5.faceapi.detect(this.videoElement, this.gotResults.bind(this));
+  }
+  async gotResults(error, results) {
+    if (error) {
+      alert(error);
+      this.stream.timeElapsed();
+      return;
+    }
+    if (results.length > 0) {
+      if (this.isSingleFace(results) && this.checkProbability(results) && this.checkFaceSize(results) && this.checkFaceIndent(results)) {
+        if (!this.validFaceFound) {
+          this.validFaceFound = true;
+          this.frontFace = new FaceLandmarks(results[0], this.width, this.height);
+          this.stream.stopAnimation();
+          await this.drawFrame('green');
+          this.requestedFacePose = this.stream.requestFacePose();
+        }
+        if (this.validFaceFound && !this.validFaceFoundAgain) {
+          await this.checkFacePose(results);
+        }
+      }
+    }
+    this.detectFaces();
+  }
+  async drawFrame(color, persistent = false) {
+    return new Promise(resolve => {
+      const img = new Image();
+      if (color == 'green')
+        img.src = face_green_svg;
+      else
+        img.src = face_white_svg;
+      img.onload = async () => {
+        const canvas = this.canvasElement;
+        const canvasContext = canvas.getContext('2d');
+        const hRatio = canvas.width / img.width;
+        const vRatio = canvas.height / img.height;
+        const ratio = Math.min(hRatio, vRatio);
+        const portraitOrientation = canvas.width < canvas.height;
+        const paddingX = !portraitOrientation ? 40 : 80;
+        const paddingY = portraitOrientation ? 160 : 80;
+        const centerShift_x = (canvas.width - img.width * ratio) / 2;
+        const centerShift_y = (canvas.height - img.height * ratio) / 2;
+        canvasContext.drawImage(img, 0, 0, img.width, img.height, centerShift_x + paddingX, centerShift_y + paddingY, img.width * ratio - paddingX * 2, img.height * ratio - paddingY * 2);
+        if (color != 'white' && !persistent) {
+          await this.delay(1000);
+          this.drawFrame('white');
+        }
+        resolve();
+      };
+    });
+  }
+  delay(time) {
+    return new Promise(resolve => setTimeout(resolve, time));
+  }
+  isSingleFace(results) {
+    return results.length == this.MAX_NUMBER_FACES;
+  }
+  checkProbability(result) {
+    return result[0].detection.score > this.MIN_FACE_SCORE;
+  }
+  checkFaceSize(result) {
+    const faceBox = result[0].detection.box;
+    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));
+  }
+  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);
+  }
+  async checkFacePose(results) {
+    let face = new FaceLandmarks(results[0], this.width, this.height);
+    // this.drawLandmarks(results);
+    // this.drawPoints(face);
+    if (this.presentedFacePose == null) {
+      let ff = this.frontFace;
+      // console.log(face.eyesLevel() +'-'+ '');
+      // console.log(ff.eyesLevel() +'-'+ '');
+      // console.log('-----');
+      if (face.leftEyeNoseDistanceX() < ff.leftEyeNoseDistanceX() * 0.6 &&
+        face.rightEyeNoseDistanceX() > ff.rightEyeNoseDistanceX() * 1.2 &&
+        face.leftEyeNoseDistanceY() > ff.leftEyeNoseDistanceY() * 0.7 &&
+        face.leftEyeNoseDistanceY() < ff.leftEyeNoseDistanceY() * 1.3 &&
+        face.rightEyeNoseDistanceY() > ff.rightEyeNoseDistanceY() * 0.7 &&
+        face.rightEyeNoseDistanceY() < ff.rightEyeNoseDistanceY() * 1.3) {
+        this.presentedFacePose = FacePose.LookLeft;
+      }
+      else if (face.rightEyeNoseDistanceX() < ff.rightEyeNoseDistanceX() * 0.6 &&
+        face.leftEyeNoseDistanceX() > ff.leftEyeNoseDistanceX() * 1.2 &&
+        face.leftEyeNoseDistanceY() > ff.leftEyeNoseDistanceY() * 0.7 &&
+        face.leftEyeNoseDistanceY() < ff.leftEyeNoseDistanceY() * 1.3 &&
+        face.rightEyeNoseDistanceY() > ff.rightEyeNoseDistanceY() * 0.7 &&
+        face.rightEyeNoseDistanceY() < ff.rightEyeNoseDistanceY() * 1.3) {
+        this.presentedFacePose = FacePose.LookRight;
+      }
+      else if (face.eyesNoseDistance() < ff.eyesNoseDistance() * 0.45) {
+        this.presentedFacePose = FacePose.LookUp;
+      }
+      else if (face.leftEyeEyeBrowDistance() < ff.leftEyeEyeBrowDistance() * 0.8 && face.rightEyeEyeBrowDistance() < ff.rightEyeEyeBrowDistance() * 0.8) {
+        this.presentedFacePose = FacePose.LookDown;
+      }
+      else if (face.eyesLevel() >= this.frontFace.eyesLevel() + this.height * 0.05) {
+        this.presentedFacePose = FacePose.TiltLeft;
+      }
+      else if (face.eyesLevel() <= this.frontFace.eyesLevel() - this.height * 0.05) {
+        this.presentedFacePose = FacePose.TiltRight;
+      }
+      // if (this.presentedFacePose != null)
+      //   console.log(FacePose[this.presentedFacePose]);
+      if (this.presentedFacePose != null && this.presentedFacePose == this.requestedFacePose) {
+        this.validFacePose = true;
+        this.stream.stopAnimation();
+        await this.drawFrame('green');
+        this.stream.changeFacePose();
+      }
+    }
+    if (this.validFacePose && this.requestedFacePose != null) {
+      if (face.leftEyeNoseDistanceX() < face.rightEyeNoseDistanceX() * 1.2 &&
+        face.leftEyeNoseDistanceX() > face.rightEyeNoseDistanceX() * 0.8 &&
+        Math.abs(face.eyesLevel()) < this.height * 0.1) {
+        this.validFaceFoundAgain = true;
+        this.stream.stopAnimation();
+        this.drawFrame('green', true);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+export var FacePose;
+(function (FacePose) {
+  FacePose[FacePose["LookLeft"] = 0] = "LookLeft";
+  FacePose[FacePose["LookRight"] = 1] = "LookRight";
+  FacePose[FacePose["LookUp"] = 2] = "LookUp";
+  FacePose[FacePose["LookDown"] = 3] = "LookDown";
+  FacePose[FacePose["TiltLeft"] = 4] = "TiltLeft";
+  FacePose[FacePose["TiltRight"] = 5] = "TiltRight";
+})(FacePose || (FacePose = {}));
+export class FacePosePick {
+  static randomEnum(anEnum) {
+    const enumValues = Object.keys(anEnum)
+      .map(n => Number.parseInt(n))
+      .filter(n => !Number.isNaN(n));
+    const randomIndex = Math.floor(Math.random() * enumValues.length);
+    const randomEnumValue = enumValues[randomIndex];
+    return randomEnumValue;
+  }
+}
+export class FaceLandmarks {
+  constructor(result, w, h) {
+    this.leftEye = this.centerOfPoints(result.parts.rightEye, w, h);
+    this.rightEye = this.centerOfPoints(result.parts.leftEye, w, h);
+    this.leftEyeBrow = this.centerOfPoints(result.parts.rightEyeBrow, w, h);
+    this.rightEyeBrow = this.centerOfPoints(result.parts.leftEyeBrow, w, h);
+    this.mouth = this.centerOfPoints(result.parts.mouth, w, h);
+    this.nose = this.centerOfPoints(result.parts.nose, w, h);
+  }
+  eyesDistance() {
+    return Math.round(Math.hypot(this.leftEye.x - this.rightEye.x, this.leftEye.y - this.rightEye.y));
+  }
+  eyesLevel() {
+    return Math.round(this.leftEye.y - this.rightEye.y);
+  }
+  eyesCenter() {
+    var fp = new FacePoint();
+    fp.x = Math.round((this.leftEye.x + this.rightEye.x) / 2);
+    fp.y = Math.round((this.leftEye.y + this.rightEye.y) / 2);
+    return fp;
+  }
+  leftEyeNoseDistanceX() {
+    return Math.abs(this.leftEye.x - this.nose.x);
+  }
+  rightEyeNoseDistanceX() {
+    return Math.abs(this.rightEye.x - this.nose.x);
+  }
+  leftEyeNoseDistanceY() {
+    return Math.abs(this.leftEye.y - this.nose.y);
+  }
+  rightEyeNoseDistanceY() {
+    return Math.abs(this.rightEye.y - this.nose.y);
+  }
+  eyesNoseDistance() {
+    return Math.round(Math.hypot(this.eyesCenter().x - this.nose.x, this.eyesCenter().y - this.nose.y));
+  }
+  noseMouthDistance() {
+    return Math.round(Math.hypot(this.nose.x - this.mouth.x, this.nose.y - this.mouth.y));
+  }
+  eyesMouthDistance() {
+    return Math.round(Math.hypot(this.eyesCenter().x - this.mouth.x, this.eyesCenter().y - this.mouth.y));
+  }
+  leftEyeEyeBrowDistance() {
+    return Math.round(Math.hypot(this.leftEye.x - this.leftEyeBrow.x, this.leftEye.y - this.leftEyeBrow.y));
+  }
+  rightEyeEyeBrowDistance() {
+    return Math.round(Math.hypot(this.rightEye.x - this.rightEyeBrow.x, this.rightEye.y - this.rightEyeBrow.y));
+  }
+  centerOfPoints(arr, _width, _height) {
+    var minX, maxX, minY, maxY;
+    for (var i = 0; i < arr.length; i++) {
+      minX = arr[i].x < minX || minX == null ? arr[i].x : minX;
+      maxX = arr[i].x > maxX || maxX == null ? arr[i].x : maxX;
+      minY = arr[i].y < minY || minY == null ? arr[i].y : minY;
+      maxY = arr[i].y > maxY || maxY == null ? arr[i].y : maxY;
+    }
+    var point = [(minX + maxX) / 2, (minY + maxY) / 2];
+    var fp = new FacePoint();
+    fp.x = Math.round(point[0]);
+    fp.y = Math.round(point[1]);
+    return fp;
+  }
+}
+export class FacePoint {
+}

package/dist/collection/libs/IDML5Detector/IDML5Detector.js

@@ -0,0 +1,110 @@
+import { ML5 } from '../../helpers/ML5';
+import { IDPose } from './IDPose';
+// @ts-ignore
+import id_white_svg from '../../assets/canvas-masks/id_white.svg';
+// @ts-ignore
+import id_green_svg from '../../assets/canvas-masks/id_green.svg';
+export class IDML5Detector {
+  constructor(stream, _isMobile) {
+    this.MAX_DETECTION = 1000 * 20;
+    this.initTime = null;
+    this.full = 0;
+    this.tilted = 0;
+    this.start = null;
+    this.stream = stream;
+    this.ml5 = ML5.getInstance();
+  }
+  static getInstance(stream, isMobile) {
+    if (!IDML5Detector.instance) {
+      IDML5Detector.instance = new IDML5Detector(stream, isMobile);
+    }
+    return IDML5Detector.instance;
+  }
+  updateHtmlElements(videoElement, canvasElement, _component) {
+    this.videoElement = videoElement;
+    this.canvasElement = canvasElement;
+    // this.component = component;
+  }
+  initDetector() {
+    this.initTime = Date.now();
+    this.continue = true;
+    // this.width = this.videoElement.videoWidth;
+    // this.height = this.videoElement.videoHeight;
+    this.drawFrame('white');
+    this.delay(2000).then(() => this.classifyVideo());
+  }
+  classifyVideo() {
+    if (this.full == 2 && this.tilted == 1) {
+      if (this.start == null)
+        this.start = Date.now();
+      if (Date.now() > this.start + 3000) {
+        this.continue = false;
+        this.stream.autoCapturing();
+      }
+    }
+    if (Date.now() - this.initTime >= this.MAX_DETECTION) {
+      this.continue = false;
+      this.stream.timeElapsed();
+    }
+    if (this.continue)
+      this.ml5.classifier.classify(this.videoElement, this.gotResults.bind(this));
+  }
+  async gotResults(error, results) {
+    if (error) {
+      alert(error);
+      this.stream.timeElapsed();
+      return;
+    }
+    if (results[0].label == 'full' && results[0].confidence > 0.9) {
+      if (this.full == 0) {
+        this.full = 1;
+        this.stream.stopAnimation();
+        await this.drawFrame('green');
+        this.stream.changeIDPose(IDPose.Tilted);
+      }
+      if (this.full == 1 && this.tilted == 1) {
+        this.full = 2;
+        this.stream.stopAnimation();
+        this.drawFrame('green', true);
+      }
+    }
+    if (results[0].label == 'tilted' && results[0].confidence > 0.8) {
+      if (this.full == 1 && this.tilted == 0) {
+        this.tilted = 1;
+        this.stream.stopAnimation();
+        await this.drawFrame('green');
+        this.stream.changeIDPose(IDPose.Straight);
+      }
+    }
+    this.classifyVideo();
+  }
+  async drawFrame(color, persistent = false) {
+    return new Promise(resolve => {
+      const img = new Image();
+      if (color == 'green')
+        img.src = id_green_svg;
+      else
+        img.src = id_white_svg;
+      img.onload = async () => {
+        const canvas = this.canvasElement;
+        const canvasContext = canvas.getContext('2d');
+        const hRatio = canvas.width / img.width;
+        const vRatio = canvas.height / img.height;
+        const ratio = Math.min(hRatio, vRatio);
+        const paddingX = 75;
+        const paddingY = 75;
+        const centerShift_x = (canvas.width - img.width * ratio) / 2;
+        const centerShift_y = (canvas.height - img.height * ratio) / 2;
+        canvasContext.drawImage(img, 0, 0, img.width, img.height, centerShift_x + paddingX, centerShift_y + paddingY, img.width * ratio - paddingX * 2, img.height * ratio - paddingY * 2);
+        if (color != 'white' && !persistent) {
+          await this.delay(1000);
+          this.drawFrame('white');
+        }
+        resolve();
+      };
+    });
+  }
+  delay(time) {
+    return new Promise(resolve => setTimeout(resolve, time));
+  }
+}

package/dist/collection/libs/IDML5Detector/IDPose.js

@@ -0,0 +1,5 @@
+export var IDPose;
+(function (IDPose) {
+  IDPose[IDPose["Tilted"] = 0] = "Tilted";
+  IDPose[IDPose["Straight"] = 1] = "Straight";
+})(IDPose || (IDPose = {}));

package/dist/collection/models/ICamera.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/models/IConstraints.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/models/IDevice.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/utils.js

@@ -0,0 +1,10 @@
+export function format(first, middle, last) {
+  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export const blobToBase64 = (blob) => {
+  return new Promise((resolve, _) => {
+    const reader = new FileReader();
+    reader.onloadend = () => resolve(reader.result);
+    reader.readAsDataURL(blob);
+  });
+};