@ekyc_qoobiss/qbs-ect-cmp 1.2.0

package/dist/collection/helpers/Stream.js

@@ -0,0 +1,223 @@
+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 {
+  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;
+  }
+  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;
+  }
+  setVerificationFinished(fun) {
+    this.verificationFinished = fun;
+  }
+  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);
+  }
+  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();
+  }
+  verificationReady() {
+    this.verificationFinished();
+  }
+  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 {
+      // @ts-ignore
+      this.videoElement.src = window.URL.createObjectURL(stream);
+    }
+    this.videoElement.addEventListener('loadedmetadata', async (_e) => {
+      this.videoElement.play().then(() => {
+        this.streamPaused = false;
+        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: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
+    if (!MediaRecorder.isTypeSupported(options.mimeType)) {
+      if (this.device.isIos || this.device.isSafari)
+        options.mimeType = Stream.mp4MimeType.mime;
+    }
+    this.recordedChunks = [];
+    this.mediaRecorder = new MediaRecorder(this.stream, options);
+    this.mediaRecorder.ondataavailable = event => {
+      this.recordedChunks.push(event.data);
+    };
+    this.mediaRecorder.onstop = _e => {
+      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);
+  }
+  async takePhoto() {
+    const canvas = document.createElement('canvas');
+    canvas.style.visibility = 'hidden';
+    canvas.width = this.videoElement.videoWidth;
+    canvas.height = this.videoElement.videoHeight;
+    return 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);
+  }
+}
+Stream.mp4MimeType = { type: 'video/mp4', codec: 'codecs:h264', extension: 'mp4', mime: 'video/mp4;codecs:h264' };
+Stream.webmMimeType = { type: 'video/webm', codec: 'codecs=vp8', extension: 'webm', mime: 'video/webm;codecs=vp8' };
+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);
+}

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,39 @@
+import { createStore } from '@stencil/store';
+import { FlowStatus } from '../models/FlowStatus';
+import { SessionKeys } from './textValues';
+const { state, onChange } = createStore({
+  flowStatus: FlowStatus.LANDING,
+  environment: 'PROD',
+  requestId: '',
+  redirectId: '',
+  initialised: false,
+  token: '',
+  cameraIds: [],
+  cameraId: '',
+  hasIdBack: false,
+  agreementsValidation: true,
+  phoneValidation: true,
+  apiBaseUrl: 'https://apiro.id-kyc.com',
+});
+onChange('flowStatus', value => {
+  sessionStorage.setItem(SessionKeys.FlowStatusKey, FlowStatus[value]);
+});
+onChange('token', value => {
+  sessionStorage.setItem(SessionKeys.TokenKey, value);
+});
+onChange('requestId', value => {
+  sessionStorage.setItem(SessionKeys.RequestIdKey, value);
+});
+onChange('initialised', value => {
+  sessionStorage.setItem(SessionKeys.InitialisedKey, String(value));
+});
+onChange('hasIdBack', value => {
+  sessionStorage.setItem(SessionKeys.HasIdBackKey, String(value));
+});
+onChange('agreementsValidation', value => {
+  sessionStorage.setItem(SessionKeys.AgreementValidationKey, String(value));
+});
+onChange('phoneValidation', value => {
+  sessionStorage.setItem(SessionKeys.PhoneValidationKey, String(value));
+});
+export default state;

package/dist/collection/helpers/textValues.js

@@ -0,0 +1,128 @@
+import store from './store';
+export class GlobalValues {
+}
+GlobalValues.FooterText = 'Qoobiss eKYC';
+GlobalValues.VideoLenght = 3100;
+export class HowToValues extends GlobalValues {
+}
+HowToValues.IdTitile = 'Prezintă actul tău de identitate';
+HowToValues.IdSubTitileFace = 'Este necesară captarea actului de identitate. Urmează intrucțiunile ce vor fi afișate pe ecran.';
+HowToValues.IdSubTitileBack = 'Este necesară captarea actului de identitate. Urmează intrucțiunile ce vor fi afișate pe ecran.';
+HowToValues.IdButton = 'Sunt gata!';
+HowToValues.SelfieTitile = 'Validare video';
+HowToValues.SelfieSubTitile = 'Este necesară realizarea unei înregistrări video. Respectă intrucțiunile ce vor fi afișate 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';
+SessionKeys.TokenKey = 'qbs-ect-token';
+SessionKeys.InitialisedKey = 'qbs-ect-initialised';
+SessionKeys.HasIdBackKey = 'qbs-ect-has-id-back';
+SessionKeys.AgreementValidationKey = 'qbs-ect-agreement-validation';
+SessionKeys.PhoneValidationKey = 'qbs-ect-phone-validation';
+export class IdCaptureValues extends GlobalValues {
+}
+IdCaptureValues.Button = 'Încerc din nou';
+IdCaptureValues.Title = 'Încadrează actul de identitate în chenarul de pe ecran.';
+IdCaptureValues.TitleBack = 'Încadrează spatele actului de identitate în chenarul de pe ecran.';
+IdCaptureValues.TtileRotate = 'Întoarce actul de identitate.';
+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: '',
+  1: 'Înclină actul de identitate spre spate.',
+  2: '',
+  3: '',
+  4: '',
+};
+IdCaptureValues.IDPoseDemoMapping = {
+  0: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_front.mp4',
+  1: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_front_tilt.mp4',
+  2: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_rotate.mp4',
+  3: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_back.mp4',
+  4: 'https://ekyc.blob.core.windows.net/$web/animations/id/id_back_tilt.mp4',
+};
+IdCaptureValues.Loading = 'Transferăm datele. Asteptați...';
+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 = 'Transferăm datele. Asteptați...';
+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.',
+  4: '',
+};
+SelfieCaptureValues.FacePoseDemoMapping = {
+  0: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_rotate_left.mp4',
+  1: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_rotate_right.mp4',
+  2: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_back.mp4',
+  3: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_front.mp4',
+  // 4: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_left.mp4',
+  // 5: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_tilt_right.mp4',
+  4: 'https://ekyc.blob.core.windows.net/$web/animations/selfie/selfie_main.mp4',
+};
+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';
+export class ApiUrls {
+  constructor() {
+    this.uriEnv = '/';
+    this.uriEnv = store.environment == 'QA' ? '/dev_' : '/';
+    this.OtpSend = this.uriEnv + 'validation/otp/send';
+    this.OtpCheck = this.uriEnv + 'validation/otp/check';
+    this.IdentityInsert = this.uriEnv + 'validation/identity/insert';
+    this.UploadCapture = this.uriEnv + 'validation/upload/capture';
+    this.GetAgreement = this.uriEnv + 'validation/agreement/content';
+    this.GenerateAgreement = this.uriEnv + 'validation/agreement/generate';
+    this.SendLink = this.uriEnv + 'validation/otp/sendlink';
+    this.GetStatus = this.uriEnv + 'validation/identity/status';
+    this.AddLog = this.uriEnv + 'validation/logs/add';
+  }
+}
+export class MobileRedirectValues extends GlobalValues {
+}
+MobileRedirectValues.InfoTop = 'Pentru a continua scanați codul de mai jos cu un smartphone.';
+MobileRedirectValues.InfoBottom = 'Sau introduceți un număr de telefon pentru a primi link-ul pe smartphone.';
+MobileRedirectValues.Validation = 'Număr de telefon invalid!';
+MobileRedirectValues.InfoWaiting = 'Așteptăm finalizarea procesului pe smartphone.';

package/dist/collection/index.js

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