@ekyc_qoobiss/qbs-ect-cmp 3.6.27 → 3.6.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/agreement-check_19.cjs.entry.js +9498 -0
- package/dist/cjs/base-component-aa9e52bf.js +832 -0
- package/dist/cjs/index-41696e0e.js +1573 -0
- package/dist/cjs/index.cjs.js +2 -0
- package/dist/cjs/loader-dots.cjs.entry.js +19 -0
- package/dist/cjs/loader.cjs.js +22 -0
- package/dist/cjs/qbs-ect-cmp.cjs.js +23 -0
- package/dist/cjs/random-actions.cjs.entry.js +23 -0
- package/dist/collection/assets/canvas-masks/face_green.svg +8 -0
- package/dist/collection/assets/canvas-masks/face_white.svg +8 -0
- package/dist/collection/assets/canvas-masks/id_green.svg +6 -0
- package/dist/collection/assets/canvas-masks/id_white.svg +6 -0
- package/dist/collection/assets/complete.svg +4 -0
- package/dist/collection/assets/landing/device.svg +14 -0
- package/dist/collection/assets/landing/id.svg +3 -0
- package/dist/collection/assets/landing/info.svg +3 -0
- package/dist/collection/assets/landing/validation.svg +16 -0
- package/dist/collection/assets/loader.svg +29 -0
- package/dist/collection/collection-manifest.json +32 -0
- package/dist/collection/components/base-component.js +63 -0
- package/dist/collection/components/common/agreement-check/agreement-check.css +0 -0
- package/dist/collection/components/common/agreement-check/agreement-check.js +104 -0
- package/dist/collection/components/common/camera-error/camera-error.css +0 -0
- package/dist/{qbs-ect-cmp/camera-error.entry.js → collection/components/common/camera-error/camera-error.js} +52 -20
- package/dist/collection/components/common/capture-error/capture-error.css +0 -0
- package/dist/{qbs-ect-cmp/capture-error.entry.js → collection/components/common/capture-error/capture-error.js} +63 -16
- package/dist/collection/components/common/how-to-info/how-to-info.css +0 -0
- package/dist/collection/components/common/how-to-info/how-to-info.js +121 -0
- package/dist/collection/components/common/id-back-capture/id-back-capture.css +35 -0
- package/dist/{qbs-ect-cmp/id-back-capture.entry.js → collection/components/common/id-back-capture/id-back-capture.js} +94 -24
- package/dist/collection/components/common/id-capture/id-capture.css +35 -0
- package/dist/{qbs-ect-cmp/id-capture.entry.js → collection/components/common/id-capture/id-capture.js} +94 -24
- package/dist/collection/components/common/id-tilt/id-tilt.css +35 -0
- package/dist/{qbs-ect-cmp/id-tilt.entry.js → collection/components/common/id-tilt/id-tilt.js} +94 -24
- package/dist/collection/components/common/random-actions/random-actions.css +0 -0
- package/dist/collection/components/common/random-actions/random-actions.js +24 -0
- package/dist/collection/components/common/selfie-capture/selfie-capture.css +7 -0
- package/dist/{qbs-ect-cmp/selfie-capture.entry.js → collection/components/common/selfie-capture/selfie-capture.js} +95 -24
- package/dist/collection/components/common/selfie-tilt/selfie-tilt.css +7 -0
- package/dist/{qbs-ect-cmp/selfie-tilt.entry.js → collection/components/common/selfie-tilt/selfie-tilt.js} +95 -24
- package/dist/collection/components/controls/camera/camera.css +47 -0
- package/dist/collection/components/controls/camera/camera.js +289 -0
- package/dist/collection/components/controls/loader-dots/loader-dots.css +61 -0
- package/dist/collection/components/controls/loader-dots/loader-dots.js +18 -0
- package/dist/collection/components/flow/agreement-info/agreement-info.css +0 -0
- package/dist/{qbs-ect-cmp/agreement-info.entry.js → collection/components/flow/agreement-info/agreement-info.js} +57 -18
- package/dist/collection/components/flow/end-redirect/end-redirect.css +128 -0
- package/dist/collection/components/flow/end-redirect/end-redirect.js +47 -0
- package/dist/collection/components/flow/error-end/error-end.css +0 -0
- package/dist/collection/components/flow/error-end/error-end.js +61 -0
- package/dist/collection/components/flow/landing-validation/landing-validation.css +0 -0
- package/dist/collection/components/flow/landing-validation/landing-validation.js +122 -0
- package/dist/collection/components/flow/mobile-redirect/mobile-redirect.css +10 -0
- package/dist/collection/components/flow/mobile-redirect/mobile-redirect.js +143 -0
- package/dist/collection/components/flow/process-id/process-id.css +0 -0
- package/dist/{qbs-ect-cmp/process-id.entry.js → collection/components/flow/process-id/process-id.js} +100 -32
- package/dist/collection/components/flow/sms-code-validation/sms-code-validation.css +0 -0
- package/dist/{qbs-ect-cmp/sms-code-validation.entry.js → collection/components/flow/sms-code-validation/sms-code-validation.js} +63 -30
- package/dist/collection/components/flow/user-liveness/user-liveness.css +0 -0
- package/dist/{qbs-ect-cmp/user-liveness.entry.js → collection/components/flow/user-liveness/user-liveness.js} +91 -25
- package/dist/collection/components/identification-component/identification-component.css +991 -0
- package/dist/collection/components/identification-component/identification-component.js +408 -0
- package/dist/collection/global.js +0 -0
- package/dist/collection/helpers/ApiCall.js +223 -0
- package/dist/{qbs-ect-cmp/Cameras-dfbebc29.js → collection/helpers/Cameras.js} +6 -9
- package/dist/collection/helpers/DeviceDetection.js +85 -0
- package/dist/collection/helpers/Events.js +58 -0
- package/dist/collection/helpers/ML5.js +38 -0
- package/dist/collection/helpers/Stream.js +229 -0
- package/dist/collection/helpers/TranslationUtils.js +37 -0
- package/dist/collection/helpers/canvas.js +10 -0
- package/dist/collection/helpers/index.js +21 -0
- package/dist/collection/helpers/security.js +25 -0
- package/dist/collection/helpers/store.js +48 -0
- package/dist/collection/helpers/textValues.js +48 -0
- package/dist/collection/index.js +1 -0
- package/dist/collection/libs/FaceML5Detector/FaceML5Detector.js +182 -0
- package/dist/collection/libs/FaceML5Detector/FacePose.js +85 -0
- package/dist/collection/libs/IDML5Detector/IDML5Detector.js +99 -0
- package/dist/{qbs-ect-cmp/IDPose-181bcb25.js → collection/libs/IDML5Detector/IDPose.js} +2 -4
- package/dist/{qbs-ect-cmp/CaptureFlow-db5d90a4.js → collection/models/CaptureFlow.js} +4 -6
- package/dist/collection/models/FlowStatus.js +14 -0
- package/dist/collection/models/FlowSteps.js +30 -0
- package/dist/collection/models/IAbortResult.js +1 -0
- package/dist/collection/models/IAddRequest.js +1 -0
- package/dist/collection/models/IAgreement.js +1 -0
- package/dist/collection/models/ICamera.js +1 -0
- package/dist/{qbs-ect-cmp/IDevice-15ecfdeb.js → collection/models/IDevice.js} +4 -6
- package/dist/collection/models/IEctStore.js +1 -0
- package/dist/collection/models/IGeneration.js +1 -0
- package/dist/collection/models/ILinkSend.js +1 -0
- package/dist/collection/models/ILogResult.js +1 -0
- package/dist/collection/models/IOrderStatus.js +1 -0
- package/dist/collection/models/IOtpCheck.js +1 -0
- package/dist/collection/models/IOtpSend.js +1 -0
- package/dist/collection/models/ITranslationValues.js +1 -0
- package/dist/collection/models/IUploadFile.js +1 -0
- package/dist/collection/models/IVerificationMode.js +5 -0
- package/dist/collection/models/OrderStatuses.js +8 -0
- package/dist/{qbs-ect-cmp/utils-8225f0b7.js → collection/utils/utils.js} +8 -10
- package/dist/esm/agreement-check_19.entry.js +9476 -0
- package/dist/{qbs-ect-cmp/base-component-2e490fd9.js → esm/base-component-b7f50d31.js} +384 -62
- package/dist/esm/index-cf54a432.js +1543 -0
- package/dist/esm/index.js +1 -0
- package/dist/{qbs-ect-cmp → esm}/loader-dots.entry.js +1 -1
- package/dist/esm/loader.js +18 -0
- package/dist/esm/polyfills/core-js.js +11 -0
- package/dist/esm/polyfills/css-shim.js +1 -0
- package/dist/esm/polyfills/dom.js +79 -0
- package/dist/esm/polyfills/es5-html-element.js +1 -0
- package/dist/esm/polyfills/index.js +34 -0
- package/dist/esm/polyfills/system.js +6 -0
- package/dist/esm/qbs-ect-cmp.js +18 -0
- package/dist/{qbs-ect-cmp → esm}/random-actions.entry.js +2 -4
- package/dist/index.cjs.js +1 -0
- package/dist/index.js +1 -0
- package/dist/loader/cdn.js +3 -0
- package/dist/loader/index.cjs.js +3 -0
- package/dist/loader/index.d.ts +21 -0
- package/dist/loader/index.es2017.js +3 -0
- package/dist/loader/index.js +4 -0
- package/dist/loader/package.json +11 -0
- package/dist/qbs-ect-cmp/index.esm.js +0 -1
- package/dist/qbs-ect-cmp/p-054dc5b3.entry.js +1 -0
- package/dist/qbs-ect-cmp/p-215a7e76.entry.js +1 -0
- package/dist/qbs-ect-cmp/p-7bedffaa.js +1 -0
- package/dist/qbs-ect-cmp/p-8942656c.js +2 -0
- package/dist/qbs-ect-cmp/p-c32a782a.entry.js +1373 -0
- package/dist/qbs-ect-cmp/qbs-ect-cmp.css +1 -320
- package/dist/qbs-ect-cmp/qbs-ect-cmp.esm.js +1 -148
- package/package.json +1 -1
- package/dist/qbs-ect-cmp/ML5-657ef934.js +0 -1370
- package/dist/qbs-ect-cmp/Stream-b867a2be.js +0 -3104
- package/dist/qbs-ect-cmp/_commonjsHelpers-321aa363.js +0 -44
- package/dist/qbs-ect-cmp/agreement-check.entry.js +0 -41
- package/dist/qbs-ect-cmp/app-globals-0f993ce5.js +0 -3
- package/dist/qbs-ect-cmp/camera-comp.entry.js +0 -103
- package/dist/qbs-ect-cmp/css-shim-b7d3d95f.js +0 -4
- package/dist/qbs-ect-cmp/dom-64053c71.js +0 -73
- package/dist/qbs-ect-cmp/end-redirect.entry.js +0 -25
- package/dist/qbs-ect-cmp/error-end.entry.js +0 -19
- package/dist/qbs-ect-cmp/how-to-info.entry.js +0 -52
- package/dist/qbs-ect-cmp/identification-component.entry.js +0 -909
- package/dist/qbs-ect-cmp/index-78a05b9e.js +0 -3371
- package/dist/qbs-ect-cmp/landing-validation.entry.js +0 -90
- package/dist/qbs-ect-cmp/mobile-redirect.entry.js +0 -2984
- package/dist/qbs-ect-cmp/shadow-css-98135883.js +0 -387
- package/dist/qbs-ect-cmp/textValues-6bcc85dd.js +0 -302
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { ML5 } from '../../helpers/ML5';
|
|
2
|
+
// import { getVideoRatio } from '../../helpers/canvas';
|
|
3
|
+
import { FacePose } from '../FaceML5Detector/FacePose';
|
|
4
|
+
import { FaceLandmarks } from '../FaceML5Detector/FacePose';
|
|
5
|
+
// @ts-ignore
|
|
6
|
+
import face_white_svg from '../../assets/canvas-masks/face_white.svg';
|
|
7
|
+
// @ts-ignore
|
|
8
|
+
import face_green_svg from '../../assets/canvas-masks/face_green.svg';
|
|
9
|
+
import store from '../../helpers/store';
|
|
10
|
+
import { delay } from '../../utils/utils';
|
|
11
|
+
import { VerificationMode } from '../../models/IVerificationMode';
|
|
12
|
+
export class FaceML5Detector {
|
|
13
|
+
static getInstance(stream, isMobile) {
|
|
14
|
+
if (!FaceML5Detector.instance) {
|
|
15
|
+
FaceML5Detector.instance = new FaceML5Detector(stream, isMobile);
|
|
16
|
+
}
|
|
17
|
+
return FaceML5Detector.instance;
|
|
18
|
+
}
|
|
19
|
+
constructor(stream, isMobile) {
|
|
20
|
+
this.MAX_DETECTION = 1000 * 30;
|
|
21
|
+
this.initTime = null;
|
|
22
|
+
this.validFaceFound = false;
|
|
23
|
+
this.start = null;
|
|
24
|
+
this.frontFace = null;
|
|
25
|
+
this.presentedFacePose = null;
|
|
26
|
+
this.validFacePose = false;
|
|
27
|
+
this.checkPose = false;
|
|
28
|
+
this.MAX_NUMBER_FACES = 1;
|
|
29
|
+
this.MIN_FACE_SCORE = 0.65;
|
|
30
|
+
// private readonly MIN_FACE_SIZE_FOR_MOBILE = 200;
|
|
31
|
+
// private readonly MIN_FACE_SIZE_FOR_DESKTOP = 350;
|
|
32
|
+
this.MIN_OCCUPIED_SPACE_FOR_DESKTOP = 15;
|
|
33
|
+
this.MIN_OCCUPIED_SPACE_FOR_MOBILE = 20;
|
|
34
|
+
this.X_OFFSET_FROM_FRAME = 0;
|
|
35
|
+
this.Y_OFFSET_FROM_FRAME = 0;
|
|
36
|
+
this.stream = stream;
|
|
37
|
+
this.ml5 = ML5.getInstance();
|
|
38
|
+
this.isMobile = isMobile;
|
|
39
|
+
}
|
|
40
|
+
updateHtmlElements(videoElement, canvasElement, _component) {
|
|
41
|
+
this.videoElement = videoElement;
|
|
42
|
+
this.canvasElement = canvasElement;
|
|
43
|
+
// this.component = component;
|
|
44
|
+
}
|
|
45
|
+
initDetector(mode) {
|
|
46
|
+
this.initTime = Date.now();
|
|
47
|
+
this.continue = true;
|
|
48
|
+
this.checkPose = mode == VerificationMode.Tilt;
|
|
49
|
+
this.width = this.videoElement.videoWidth;
|
|
50
|
+
this.height = this.videoElement.videoHeight;
|
|
51
|
+
// this.videoRatio = getVideoRatio(this.videoElement);
|
|
52
|
+
this.drawFrame('white');
|
|
53
|
+
delay(2000).then(() => this.detectFaces());
|
|
54
|
+
}
|
|
55
|
+
detectFaces() {
|
|
56
|
+
if (this.validFaceFound || this.validFacePose) {
|
|
57
|
+
if (this.start == null)
|
|
58
|
+
this.start = Date.now();
|
|
59
|
+
if (Date.now() > this.start + 3000) {
|
|
60
|
+
this.continue = false;
|
|
61
|
+
this.stream.verificationReady();
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
else if (Date.now() - this.initTime >= this.MAX_DETECTION) {
|
|
65
|
+
this.continue = false;
|
|
66
|
+
this.stream.timeElapsed();
|
|
67
|
+
}
|
|
68
|
+
// if (this.presentedFacePose != null && !this.validFacePose) {
|
|
69
|
+
// this.continue = false;
|
|
70
|
+
// this.stream.timeElapsed();
|
|
71
|
+
// }
|
|
72
|
+
if (this.continue)
|
|
73
|
+
this.ml5.faceapi.detect(this.videoElement, this.gotResults.bind(this));
|
|
74
|
+
}
|
|
75
|
+
async gotResults(error, results) {
|
|
76
|
+
if (error) {
|
|
77
|
+
alert(error);
|
|
78
|
+
this.stream.timeElapsed();
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
if (results.length > 0) {
|
|
82
|
+
if (this.checkPose) {
|
|
83
|
+
await this.checkFacePose(results);
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
if (this.isSingleFace(results) && this.checkProbability(results) && this.checkFaceSize(results) && this.checkFaceIndent(results)) {
|
|
87
|
+
if (!this.validFaceFound) {
|
|
88
|
+
this.validFaceFound = true;
|
|
89
|
+
this.stream.autoCapturing();
|
|
90
|
+
// this.frontFace = new FaceLandmarks(results[0], this.width, this.height);
|
|
91
|
+
await this.drawFrame('green', true);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
this.detectFaces();
|
|
97
|
+
}
|
|
98
|
+
async drawFrame(color, persistent = false) {
|
|
99
|
+
return new Promise(resolve => {
|
|
100
|
+
const img = new Image();
|
|
101
|
+
if (color == 'green')
|
|
102
|
+
img.src = face_green_svg;
|
|
103
|
+
else
|
|
104
|
+
img.src = face_white_svg;
|
|
105
|
+
img.onload = async () => {
|
|
106
|
+
const canvas = this.canvasElement;
|
|
107
|
+
const canvasContext = canvas.getContext('2d');
|
|
108
|
+
const hRatio = canvas.width / img.width;
|
|
109
|
+
const vRatio = canvas.height / img.height;
|
|
110
|
+
const ratio = Math.min(hRatio, vRatio);
|
|
111
|
+
const portraitOrientation = canvas.width < canvas.height;
|
|
112
|
+
const paddingX = !portraitOrientation ? 40 : 80;
|
|
113
|
+
const paddingY = portraitOrientation ? 160 : 80;
|
|
114
|
+
const centerShift_x = (canvas.width - img.width * ratio) / 2;
|
|
115
|
+
const centerShift_y = (canvas.height - img.height * ratio) / 2;
|
|
116
|
+
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);
|
|
117
|
+
if (color != 'white' && !persistent) {
|
|
118
|
+
await delay(1000);
|
|
119
|
+
this.drawFrame('white');
|
|
120
|
+
}
|
|
121
|
+
resolve();
|
|
122
|
+
};
|
|
123
|
+
});
|
|
124
|
+
}
|
|
125
|
+
isSingleFace(results) {
|
|
126
|
+
return results.length == this.MAX_NUMBER_FACES;
|
|
127
|
+
}
|
|
128
|
+
checkProbability(result) {
|
|
129
|
+
// console.log('prob: ' + result[0].detection.score);
|
|
130
|
+
return result[0].detection.score > this.MIN_FACE_SCORE;
|
|
131
|
+
}
|
|
132
|
+
checkFaceSize(result) {
|
|
133
|
+
const faceBox = result[0].detection.box;
|
|
134
|
+
const { area } = faceBox;
|
|
135
|
+
// const { width, height, area } = faceBox;
|
|
136
|
+
const { imageHeight, imageWidth } = result[0].detection;
|
|
137
|
+
const occupiedSize = 100 / ((imageHeight * imageWidth) / area);
|
|
138
|
+
// const minSide = Math.min(width / this.videoRatio, height / this.videoRatio);
|
|
139
|
+
// console.log('size: ' + occupiedSize +'/'+(this.isMobile ? this.MIN_OCCUPIED_SPACE_FOR_MOBILE : this.MIN_OCCUPIED_SPACE_FOR_DESKTOP));
|
|
140
|
+
return (
|
|
141
|
+
// minSide > (this.isMobile ? this.MIN_FACE_SIZE_FOR_MOBILE : this.MIN_FACE_SIZE_FOR_DESKTOP) &&
|
|
142
|
+
occupiedSize > (this.isMobile ? this.MIN_OCCUPIED_SPACE_FOR_MOBILE : this.MIN_OCCUPIED_SPACE_FOR_DESKTOP));
|
|
143
|
+
}
|
|
144
|
+
checkFaceIndent(result) {
|
|
145
|
+
const faceBox = result[0].detection.box;
|
|
146
|
+
const { top, left, bottom, right } = faceBox;
|
|
147
|
+
const { imageHeight, imageWidth } = result[0].detection;
|
|
148
|
+
const topIndent = (top * 100) / imageHeight;
|
|
149
|
+
const leftIndent = (left * 100) / imageWidth;
|
|
150
|
+
const rightIndent = ((imageWidth - right) * 100) / imageWidth;
|
|
151
|
+
const bottomIndent = ((imageHeight - bottom) * 100) / imageHeight;
|
|
152
|
+
// console.log('indent: '+topIndent+' | '+leftIndent+' | '+rightIndent+' | '+bottomIndent);
|
|
153
|
+
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);
|
|
154
|
+
}
|
|
155
|
+
async checkFacePose(results) {
|
|
156
|
+
let face = new FaceLandmarks(results[0], this.width, this.height);
|
|
157
|
+
// this.drawLandmarks(results);
|
|
158
|
+
// this.drawPoints(face);
|
|
159
|
+
if (this.frontFace == null) {
|
|
160
|
+
this.frontFace = face;
|
|
161
|
+
// await this.drawFrame('green');
|
|
162
|
+
if (store.debug)
|
|
163
|
+
console.log('face ok');
|
|
164
|
+
}
|
|
165
|
+
else if (this.frontFace != null && this.presentedFacePose == null) {
|
|
166
|
+
let ff = this.frontFace;
|
|
167
|
+
if (face.nose.y < ff.nose.y - ff.eyesDistance() * 0.4)
|
|
168
|
+
this.presentedFacePose = FacePose.LookUp;
|
|
169
|
+
if (face.nose.y > ff.nose.y + ff.eyesDistance() * 0.4)
|
|
170
|
+
this.presentedFacePose = FacePose.LookDown;
|
|
171
|
+
if (face.nose.x > ff.nose.x + ff.eyesDistance() * 0.5)
|
|
172
|
+
this.presentedFacePose = FacePose.LookLeft;
|
|
173
|
+
if (face.nose.x < ff.nose.x - ff.eyesDistance() * 0.5)
|
|
174
|
+
this.presentedFacePose = FacePose.LookRight;
|
|
175
|
+
if (this.stream.facePose !== null) {
|
|
176
|
+
await delay(3000);
|
|
177
|
+
this.validFacePose = true;
|
|
178
|
+
await this.drawFrame('green', true);
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
export var FacePose;
|
|
2
|
+
(function (FacePose) {
|
|
3
|
+
FacePose[FacePose["LookLeft"] = 0] = "LookLeft";
|
|
4
|
+
FacePose[FacePose["LookRight"] = 1] = "LookRight";
|
|
5
|
+
FacePose[FacePose["LookUp"] = 2] = "LookUp";
|
|
6
|
+
FacePose[FacePose["LookDown"] = 3] = "LookDown";
|
|
7
|
+
//TiltLeft,
|
|
8
|
+
//TiltRight,
|
|
9
|
+
FacePose[FacePose["Main"] = 4] = "Main";
|
|
10
|
+
})(FacePose || (FacePose = {}));
|
|
11
|
+
export class FacePosePick {
|
|
12
|
+
static randomEnum(anEnum) {
|
|
13
|
+
const enumValues = Object.keys(anEnum)
|
|
14
|
+
.map(n => Number.parseInt(n))
|
|
15
|
+
.filter(n => !Number.isNaN(n));
|
|
16
|
+
const randomIndex = Math.floor(Math.random() * (enumValues.length - 1));
|
|
17
|
+
const randomEnumValue = enumValues[randomIndex];
|
|
18
|
+
return randomEnumValue;
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
export class FaceLandmarks {
|
|
22
|
+
constructor(result, w, h) {
|
|
23
|
+
this.leftEye = this.centerOfPoints(result.parts.rightEye, w, h);
|
|
24
|
+
this.rightEye = this.centerOfPoints(result.parts.leftEye, w, h);
|
|
25
|
+
this.leftEyeBrow = this.centerOfPoints(result.parts.rightEyeBrow, w, h);
|
|
26
|
+
this.rightEyeBrow = this.centerOfPoints(result.parts.leftEyeBrow, w, h);
|
|
27
|
+
this.mouth = this.centerOfPoints(result.parts.mouth, w, h);
|
|
28
|
+
this.nose = this.centerOfPoints(result.parts.nose, w, h);
|
|
29
|
+
}
|
|
30
|
+
eyesDistance() {
|
|
31
|
+
return Math.round(Math.hypot(this.leftEye.x - this.rightEye.x, this.leftEye.y - this.rightEye.y));
|
|
32
|
+
}
|
|
33
|
+
eyesLevel() {
|
|
34
|
+
return Math.round(this.leftEye.y - this.rightEye.y);
|
|
35
|
+
}
|
|
36
|
+
eyesCenter() {
|
|
37
|
+
var fp = new FacePoint();
|
|
38
|
+
fp.x = Math.round((this.leftEye.x + this.rightEye.x) / 2);
|
|
39
|
+
fp.y = Math.round((this.leftEye.y + this.rightEye.y) / 2);
|
|
40
|
+
return fp;
|
|
41
|
+
}
|
|
42
|
+
leftEyeNoseDistanceX() {
|
|
43
|
+
return Math.abs(this.leftEye.x - this.nose.x);
|
|
44
|
+
}
|
|
45
|
+
rightEyeNoseDistanceX() {
|
|
46
|
+
return Math.abs(this.rightEye.x - this.nose.x);
|
|
47
|
+
}
|
|
48
|
+
leftEyeNoseDistanceY() {
|
|
49
|
+
return Math.abs(this.leftEye.y - this.nose.y);
|
|
50
|
+
}
|
|
51
|
+
rightEyeNoseDistanceY() {
|
|
52
|
+
return Math.abs(this.rightEye.y - this.nose.y);
|
|
53
|
+
}
|
|
54
|
+
eyesNoseDistance() {
|
|
55
|
+
return Math.round(Math.hypot(this.eyesCenter().x - this.nose.x, this.eyesCenter().y - this.nose.y));
|
|
56
|
+
}
|
|
57
|
+
noseMouthDistance() {
|
|
58
|
+
return Math.round(Math.hypot(this.nose.x - this.mouth.x, this.nose.y - this.mouth.y));
|
|
59
|
+
}
|
|
60
|
+
eyesMouthDistance() {
|
|
61
|
+
return Math.round(Math.hypot(this.eyesCenter().x - this.mouth.x, this.eyesCenter().y - this.mouth.y));
|
|
62
|
+
}
|
|
63
|
+
leftEyeEyeBrowDistance() {
|
|
64
|
+
return Math.round(Math.hypot(this.leftEye.x - this.leftEyeBrow.x, this.leftEye.y - this.leftEyeBrow.y));
|
|
65
|
+
}
|
|
66
|
+
rightEyeEyeBrowDistance() {
|
|
67
|
+
return Math.round(Math.hypot(this.rightEye.x - this.rightEyeBrow.x, this.rightEye.y - this.rightEyeBrow.y));
|
|
68
|
+
}
|
|
69
|
+
centerOfPoints(arr, _width, _height) {
|
|
70
|
+
var minX, maxX, minY, maxY;
|
|
71
|
+
for (var i = 0; i < arr.length; i++) {
|
|
72
|
+
minX = arr[i].x < minX || minX == null ? arr[i].x : minX;
|
|
73
|
+
maxX = arr[i].x > maxX || maxX == null ? arr[i].x : maxX;
|
|
74
|
+
minY = arr[i].y < minY || minY == null ? arr[i].y : minY;
|
|
75
|
+
maxY = arr[i].y > maxY || maxY == null ? arr[i].y : maxY;
|
|
76
|
+
}
|
|
77
|
+
var point = [(minX + maxX) / 2, (minY + maxY) / 2];
|
|
78
|
+
var fp = new FacePoint();
|
|
79
|
+
fp.x = Math.round(point[0]);
|
|
80
|
+
fp.y = Math.round(point[1]);
|
|
81
|
+
return fp;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
export class FacePoint {
|
|
85
|
+
}
|
|
@@ -0,0 +1,99 @@
|
|
|
1
|
+
import { ML5 } from '../../helpers/ML5';
|
|
2
|
+
// @ts-ignore
|
|
3
|
+
import id_white_svg from '../../assets/canvas-masks/id_white.svg';
|
|
4
|
+
// @ts-ignore
|
|
5
|
+
import id_green_svg from '../../assets/canvas-masks/id_green.svg';
|
|
6
|
+
import { delay } from '../../utils/utils';
|
|
7
|
+
import { VerificationMode } from '../../models/IVerificationMode';
|
|
8
|
+
export class IDML5Detector {
|
|
9
|
+
static getInstance(stream, isMobile) {
|
|
10
|
+
if (!IDML5Detector.instance) {
|
|
11
|
+
IDML5Detector.instance = new IDML5Detector(stream, isMobile);
|
|
12
|
+
}
|
|
13
|
+
return IDML5Detector.instance;
|
|
14
|
+
}
|
|
15
|
+
constructor(stream, _isMobile) {
|
|
16
|
+
this.MAX_DETECTION = 1000 * 25;
|
|
17
|
+
this.initTime = null;
|
|
18
|
+
this.checked = false;
|
|
19
|
+
this.start = null;
|
|
20
|
+
this.stream = stream;
|
|
21
|
+
this.ml5 = ML5.getInstance();
|
|
22
|
+
}
|
|
23
|
+
updateHtmlElements(videoElement, canvasElement, _component) {
|
|
24
|
+
this.videoElement = videoElement;
|
|
25
|
+
this.canvasElement = canvasElement;
|
|
26
|
+
// this.component = component;
|
|
27
|
+
}
|
|
28
|
+
initDetector(mode) {
|
|
29
|
+
this.initTime = Date.now();
|
|
30
|
+
this.continue = true;
|
|
31
|
+
if (mode == VerificationMode.Full)
|
|
32
|
+
this.targetedLabel = 'full';
|
|
33
|
+
else
|
|
34
|
+
this.targetedLabel = 'tilted';
|
|
35
|
+
// this.width = this.videoElement.videoWidth;
|
|
36
|
+
// this.height = this.videoElement.videoHeight;
|
|
37
|
+
this.drawFrame('white');
|
|
38
|
+
delay(2000).then(() => this.classifyVideo());
|
|
39
|
+
}
|
|
40
|
+
classifyVideo() {
|
|
41
|
+
if (this.checked) {
|
|
42
|
+
if (this.start == null)
|
|
43
|
+
this.start = Date.now();
|
|
44
|
+
if (Date.now() > this.start + 500) {
|
|
45
|
+
this.continue = false;
|
|
46
|
+
this.stream.verificationReady();
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
if (Date.now() - this.initTime >= this.MAX_DETECTION) {
|
|
50
|
+
this.continue = false;
|
|
51
|
+
this.stream.timeElapsed();
|
|
52
|
+
}
|
|
53
|
+
if (this.continue)
|
|
54
|
+
this.ml5.classifier.classify(this.videoElement, this.gotResults.bind(this));
|
|
55
|
+
}
|
|
56
|
+
async gotResults(error, results) {
|
|
57
|
+
if (error) {
|
|
58
|
+
alert(error);
|
|
59
|
+
this.stream.timeElapsed();
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (results[0].label == this.targetedLabel && results[0].confidence > 0.9 && !this.checked) {
|
|
63
|
+
this.checked = true;
|
|
64
|
+
this.stream.autoCapturing();
|
|
65
|
+
await this.drawFrame('green');
|
|
66
|
+
}
|
|
67
|
+
if (results[0].label == this.targetedLabel && results[0].confidence > 0.8 && !this.checked) {
|
|
68
|
+
this.checked = true;
|
|
69
|
+
await this.drawFrame('green');
|
|
70
|
+
}
|
|
71
|
+
this.classifyVideo();
|
|
72
|
+
}
|
|
73
|
+
async drawFrame(color, persistent = false) {
|
|
74
|
+
return new Promise(resolve => {
|
|
75
|
+
const img = new Image();
|
|
76
|
+
if (color == 'green')
|
|
77
|
+
img.src = id_green_svg;
|
|
78
|
+
else
|
|
79
|
+
img.src = id_white_svg;
|
|
80
|
+
img.onload = async () => {
|
|
81
|
+
const canvas = this.canvasElement;
|
|
82
|
+
const canvasContext = canvas.getContext('2d');
|
|
83
|
+
const hRatio = canvas.width / img.width;
|
|
84
|
+
const vRatio = canvas.height / img.height;
|
|
85
|
+
const ratio = Math.min(hRatio, vRatio);
|
|
86
|
+
const paddingX = 150;
|
|
87
|
+
const paddingY = 150;
|
|
88
|
+
const centerShift_x = (canvas.width - img.width * ratio) / 2;
|
|
89
|
+
const centerShift_y = (canvas.height - img.height * ratio) / 2;
|
|
90
|
+
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);
|
|
91
|
+
if (color != 'white' && !persistent) {
|
|
92
|
+
await delay(1000);
|
|
93
|
+
this.drawFrame('white');
|
|
94
|
+
}
|
|
95
|
+
resolve();
|
|
96
|
+
};
|
|
97
|
+
});
|
|
98
|
+
}
|
|
99
|
+
}
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
var IDPose;
|
|
1
|
+
export var IDPose;
|
|
2
2
|
(function (IDPose) {
|
|
3
3
|
IDPose[IDPose["Straight"] = 0] = "Straight";
|
|
4
4
|
IDPose[IDPose["Tilted"] = 1] = "Tilted";
|
|
5
5
|
IDPose[IDPose["Rotate"] = 2] = "Rotate";
|
|
6
6
|
IDPose[IDPose["BackStraight"] = 3] = "BackStraight";
|
|
7
7
|
IDPose[IDPose["BackTilted"] = 4] = "BackTilted";
|
|
8
|
-
})(IDPose || (IDPose = {}));
|
|
9
|
-
|
|
10
|
-
export { IDPose as I };
|
|
8
|
+
})(IDPose || (IDPose = {}));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var CaptureUploadTypes;
|
|
1
|
+
export var CaptureUploadTypes;
|
|
2
2
|
(function (CaptureUploadTypes) {
|
|
3
3
|
CaptureUploadTypes["IdFront"] = "IdFront";
|
|
4
4
|
CaptureUploadTypes["IdBack"] = "IdBack";
|
|
@@ -10,7 +10,7 @@ var CaptureUploadTypes;
|
|
|
10
10
|
CaptureUploadTypes["TiltVideo"] = "TiltVideo";
|
|
11
11
|
CaptureUploadTypes["None"] = "None";
|
|
12
12
|
})(CaptureUploadTypes || (CaptureUploadTypes = {}));
|
|
13
|
-
var IdCaptureFlowStatus;
|
|
13
|
+
export var IdCaptureFlowStatus;
|
|
14
14
|
(function (IdCaptureFlowStatus) {
|
|
15
15
|
IdCaptureFlowStatus[IdCaptureFlowStatus["HowToFront"] = 0] = "HowToFront";
|
|
16
16
|
IdCaptureFlowStatus[IdCaptureFlowStatus["IdFront"] = 1] = "IdFront";
|
|
@@ -19,12 +19,10 @@ var IdCaptureFlowStatus;
|
|
|
19
19
|
IdCaptureFlowStatus[IdCaptureFlowStatus["Tilt"] = 4] = "Tilt";
|
|
20
20
|
IdCaptureFlowStatus[IdCaptureFlowStatus["End"] = 5] = "End";
|
|
21
21
|
})(IdCaptureFlowStatus || (IdCaptureFlowStatus = {}));
|
|
22
|
-
var SelfieFlowStatus;
|
|
22
|
+
export var SelfieFlowStatus;
|
|
23
23
|
(function (SelfieFlowStatus) {
|
|
24
24
|
SelfieFlowStatus[SelfieFlowStatus["HowToSelfie"] = 0] = "HowToSelfie";
|
|
25
25
|
SelfieFlowStatus[SelfieFlowStatus["Selfie"] = 1] = "Selfie";
|
|
26
26
|
SelfieFlowStatus[SelfieFlowStatus["Gesture"] = 2] = "Gesture";
|
|
27
27
|
SelfieFlowStatus[SelfieFlowStatus["End"] = 3] = "End";
|
|
28
|
-
})(SelfieFlowStatus || (SelfieFlowStatus = {}));
|
|
29
|
-
|
|
30
|
-
export { CaptureUploadTypes as C, IdCaptureFlowStatus as I, SelfieFlowStatus as S };
|
|
28
|
+
})(SelfieFlowStatus || (SelfieFlowStatus = {}));
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
export var FlowStatus;
|
|
2
|
+
(function (FlowStatus) {
|
|
3
|
+
FlowStatus[FlowStatus["LANDING"] = 0] = "LANDING";
|
|
4
|
+
FlowStatus[FlowStatus["AGREEMENT"] = 1] = "AGREEMENT";
|
|
5
|
+
FlowStatus[FlowStatus["PHONE"] = 2] = "PHONE";
|
|
6
|
+
FlowStatus[FlowStatus["CODE"] = 3] = "CODE";
|
|
7
|
+
FlowStatus[FlowStatus["CODEERROR"] = 4] = "CODEERROR";
|
|
8
|
+
FlowStatus[FlowStatus["ID"] = 5] = "ID";
|
|
9
|
+
FlowStatus[FlowStatus["LIVENESS"] = 6] = "LIVENESS";
|
|
10
|
+
FlowStatus[FlowStatus["COMPLETE"] = 7] = "COMPLETE";
|
|
11
|
+
FlowStatus[FlowStatus["ERROREND"] = 8] = "ERROREND";
|
|
12
|
+
FlowStatus[FlowStatus["CAMERAERROR"] = 9] = "CAMERAERROR";
|
|
13
|
+
FlowStatus[FlowStatus["NONE"] = 10] = "NONE";
|
|
14
|
+
})(FlowStatus || (FlowStatus = {}));
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
export var FlowSteps;
|
|
2
|
+
(function (FlowSteps) {
|
|
3
|
+
FlowSteps[FlowSteps["ComponentLoaded"] = 'component-loaded'] = "ComponentLoaded";
|
|
4
|
+
FlowSteps[FlowSteps["MobileRedirect"] = 'mobile-redirect'] = "MobileRedirect";
|
|
5
|
+
FlowSteps[FlowSteps["Landing"] = 'landing'] = "Landing";
|
|
6
|
+
FlowSteps[FlowSteps["Agreements"] = 'agreements'] = "Agreements";
|
|
7
|
+
FlowSteps[FlowSteps["OtpSend"] = 'otp-send'] = "OtpSend";
|
|
8
|
+
FlowSteps[FlowSteps["OtpCheck"] = 'otp-check'] = "OtpCheck";
|
|
9
|
+
FlowSteps[FlowSteps["CiFront"] = 'ci-front'] = "CiFront";
|
|
10
|
+
FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
|
|
11
|
+
FlowSteps[FlowSteps["CiFrontCapture"] = 'ci-front-capture'] = "CiFrontCapture";
|
|
12
|
+
FlowSteps[FlowSteps["CiBack"] = 'ci-back'] = "CiBack";
|
|
13
|
+
FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
|
|
14
|
+
FlowSteps[FlowSteps["CiBackCapture"] = 'ci-back-capture'] = "CiBackCapture";
|
|
15
|
+
FlowSteps[FlowSteps["CiTilt"] = 'ci-tilt'] = "CiTilt";
|
|
16
|
+
FlowSteps[FlowSteps["CiError"] = 'ci-error'] = "CiError";
|
|
17
|
+
FlowSteps[FlowSteps["SelfieHowTo"] = 'selfie-how-to'] = "SelfieHowTo";
|
|
18
|
+
FlowSteps[FlowSteps["SelfieTilt"] = 'selfie-tilt'] = "SelfieTilt";
|
|
19
|
+
FlowSteps[FlowSteps["SelfieCapture"] = 'selfie-capture'] = "SelfieCapture";
|
|
20
|
+
FlowSteps[FlowSteps["Selfie"] = 'selfie'] = "Selfie";
|
|
21
|
+
FlowSteps[FlowSteps["SelfieError"] = 'selfie-error'] = "SelfieError";
|
|
22
|
+
FlowSteps[FlowSteps["End"] = 'end'] = "End";
|
|
23
|
+
FlowSteps[FlowSteps["CameraError"] = 'camera-error'] = "CameraError";
|
|
24
|
+
})(FlowSteps || (FlowSteps = {}));
|
|
25
|
+
export var FlowMoments;
|
|
26
|
+
(function (FlowMoments) {
|
|
27
|
+
FlowMoments[FlowMoments["Initialized"] = 'initialized'] = "Initialized";
|
|
28
|
+
FlowMoments[FlowMoments["Finalized"] = 'finalized'] = "Finalized";
|
|
29
|
+
FlowMoments[FlowMoments["None"] = 'none'] = "None";
|
|
30
|
+
})(FlowMoments || (FlowMoments = {}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
var MobileOS;
|
|
1
|
+
export var MobileOS;
|
|
2
2
|
(function (MobileOS) {
|
|
3
3
|
MobileOS["Android"] = "android";
|
|
4
4
|
MobileOS["iOS"] = "ios";
|
|
5
5
|
MobileOS["Unknown"] = "unknown";
|
|
6
6
|
MobileOS["WindowsPhone"] = "Windows Phone";
|
|
7
7
|
})(MobileOS || (MobileOS = {}));
|
|
8
|
-
var DesktopOS;
|
|
8
|
+
export var DesktopOS;
|
|
9
9
|
(function (DesktopOS) {
|
|
10
10
|
DesktopOS["Linux"] = "linux";
|
|
11
11
|
DesktopOS["MacOS"] = "mac_os";
|
|
@@ -13,13 +13,11 @@ var DesktopOS;
|
|
|
13
13
|
DesktopOS["Unknown"] = "unknown";
|
|
14
14
|
DesktopOS["Windows"] = "windows";
|
|
15
15
|
})(DesktopOS || (DesktopOS = {}));
|
|
16
|
-
var Browser;
|
|
16
|
+
export var Browser;
|
|
17
17
|
(function (Browser) {
|
|
18
18
|
Browser["Chrome"] = "chrome";
|
|
19
19
|
Browser["Firefox"] = "firefox";
|
|
20
20
|
Browser["Safari"] = "safari";
|
|
21
21
|
Browser["Mi"] = "mi";
|
|
22
22
|
Browser["Unknown"] = "unknown";
|
|
23
|
-
})(Browser || (Browser = {}));
|
|
24
|
-
|
|
25
|
-
export { Browser as B, DesktopOS as D, MobileOS as M };
|
|
23
|
+
})(Browser || (Browser = {}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export var OrderStatuses;
|
|
2
|
+
(function (OrderStatuses) {
|
|
3
|
+
OrderStatuses[OrderStatuses["Capturing"] = 0] = "Capturing";
|
|
4
|
+
OrderStatuses[OrderStatuses["FinishedCapturing"] = 1] = "FinishedCapturing";
|
|
5
|
+
OrderStatuses[OrderStatuses["Waiting"] = 2] = "Waiting";
|
|
6
|
+
OrderStatuses[OrderStatuses["NotFound"] = 3] = "NotFound";
|
|
7
|
+
OrderStatuses[OrderStatuses["Aborted"] = 4] = "Aborted";
|
|
8
|
+
})(OrderStatuses || (OrderStatuses = {}));
|
|
@@ -1,22 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
function format(first, middle, last) {
|
|
1
|
+
import store from '../helpers/store';
|
|
2
|
+
import { SessionKeys } from '../helpers/textValues';
|
|
3
|
+
export function format(first, middle, last) {
|
|
4
4
|
return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
|
|
5
5
|
}
|
|
6
|
-
const blobToBase64 = (blob) => {
|
|
6
|
+
export const blobToBase64 = (blob) => {
|
|
7
7
|
return new Promise((resolve, _) => {
|
|
8
8
|
const reader = new FileReader();
|
|
9
9
|
reader.onloadend = () => resolve(reader.result);
|
|
10
10
|
reader.readAsDataURL(blob);
|
|
11
11
|
});
|
|
12
12
|
};
|
|
13
|
-
const delay = ms => new Promise(res => setTimeout(res, ms));
|
|
14
|
-
const getLogMessage = (param_req_id = '', param_redirect_id = '', param_token = '') => {
|
|
13
|
+
export const delay = ms => new Promise(res => setTimeout(res, ms));
|
|
14
|
+
export const getLogMessage = (param_req_id = '', param_redirect_id = '', param_token = '') => {
|
|
15
15
|
return {
|
|
16
|
-
store_values: { request_id:
|
|
16
|
+
store_values: { request_id: store.requestId, redirect_id: store.redirectId, token: store.token },
|
|
17
17
|
session_values: { request_id: sessionStorage.getItem(SessionKeys.RequestIdKey), token: sessionStorage.getItem(SessionKeys.TokenKey) },
|
|
18
18
|
parameter_values: { request_id: param_req_id, redirect_id: param_redirect_id, token: param_token },
|
|
19
19
|
};
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export { blobToBase64 as b, delay as d, getLogMessage as g };
|
|
20
|
+
};
|