@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
package/dist/{qbs-ect-cmp/id-tilt.entry.js → collection/components/common/id-tilt/id-tilt.js}
RENAMED
|
@@ -1,22 +1,19 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import '
|
|
9
|
-
import '
|
|
10
|
-
import '
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
import { Cameras } from '../../../helpers/Cameras';
|
|
3
|
+
import { Stream } from '../../../helpers/Stream';
|
|
4
|
+
import { IdCaptureValues } from '../../../helpers/textValues';
|
|
5
|
+
import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
|
|
6
|
+
import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
|
|
7
|
+
import { IDPose } from '../../../libs/IDML5Detector/IDPose';
|
|
8
|
+
import { delay } from '../../../utils/utils';
|
|
9
|
+
import store from '../../../helpers/store';
|
|
10
|
+
import { BaseComponent } from '../../base-component';
|
|
11
|
+
import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
|
|
12
|
+
import { VerificationMode } from '../../../models/IVerificationMode';
|
|
13
|
+
// import { IDPose } from '../../libs/IDML5Detector/IDPose';
|
|
14
|
+
export class IdTilt {
|
|
15
15
|
// @State() private animationPath: string;
|
|
16
|
-
constructor(
|
|
17
|
-
registerInstance(this, hostRef);
|
|
18
|
-
this.eventPhotoCapture = createEvent(this, "photoTiltCapture", 7);
|
|
19
|
-
this.apiErrorEvent = createEvent(this, "apiError", 7);
|
|
16
|
+
constructor() {
|
|
20
17
|
this.photoIsReady = photos => {
|
|
21
18
|
//this.closeCamera();
|
|
22
19
|
this.eventPhotoCapture.emit(photos);
|
|
@@ -54,7 +51,7 @@ const IdTilt = class {
|
|
|
54
51
|
this.openCamera();
|
|
55
52
|
}
|
|
56
53
|
async openCamera() {
|
|
57
|
-
const constraints = this.cameras.GetConstraints(
|
|
54
|
+
const constraints = this.cameras.GetConstraints(store.cameraId, store.device);
|
|
58
55
|
setTimeout(() => {
|
|
59
56
|
navigator.mediaDevices
|
|
60
57
|
.getUserMedia(constraints)
|
|
@@ -115,8 +112,81 @@ const IdTilt = class {
|
|
|
115
112
|
let bgDemo = this.verified ? 'container' : 'container bg-black';
|
|
116
113
|
return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoFront", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.showDemo }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("div", { style: cameraStyleInner }, h("camera-comp", { "capture-mode": "tilt" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
|
|
117
114
|
}
|
|
118
|
-
get
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
115
|
+
static get is() { return "id-tilt"; }
|
|
116
|
+
static get originalStyleUrls() {
|
|
117
|
+
return {
|
|
118
|
+
"$": ["id-tilt.css"]
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
static get styleUrls() {
|
|
122
|
+
return {
|
|
123
|
+
"$": ["id-tilt.css"]
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
static get states() {
|
|
127
|
+
return {
|
|
128
|
+
"videoStarted": {},
|
|
129
|
+
"cameraSize": {},
|
|
130
|
+
"captureTaken": {},
|
|
131
|
+
"verified": {},
|
|
132
|
+
"titleMesage": {},
|
|
133
|
+
"showDemo": {},
|
|
134
|
+
"demoVideo": {}
|
|
135
|
+
};
|
|
136
|
+
}
|
|
137
|
+
static get events() {
|
|
138
|
+
return [{
|
|
139
|
+
"method": "eventPhotoCapture",
|
|
140
|
+
"name": "photoTiltCapture",
|
|
141
|
+
"bubbles": true,
|
|
142
|
+
"cancelable": true,
|
|
143
|
+
"composed": true,
|
|
144
|
+
"docs": {
|
|
145
|
+
"tags": [],
|
|
146
|
+
"text": ""
|
|
147
|
+
},
|
|
148
|
+
"complexType": {
|
|
149
|
+
"original": "any",
|
|
150
|
+
"resolved": "any",
|
|
151
|
+
"references": {}
|
|
152
|
+
}
|
|
153
|
+
}, {
|
|
154
|
+
"method": "apiErrorEvent",
|
|
155
|
+
"name": "apiError",
|
|
156
|
+
"bubbles": true,
|
|
157
|
+
"cancelable": true,
|
|
158
|
+
"composed": true,
|
|
159
|
+
"docs": {
|
|
160
|
+
"tags": [],
|
|
161
|
+
"text": ""
|
|
162
|
+
},
|
|
163
|
+
"complexType": {
|
|
164
|
+
"original": "any",
|
|
165
|
+
"resolved": "any",
|
|
166
|
+
"references": {}
|
|
167
|
+
}
|
|
168
|
+
}];
|
|
169
|
+
}
|
|
170
|
+
static get elementRef() { return "component"; }
|
|
171
|
+
static get listeners() {
|
|
172
|
+
return [{
|
|
173
|
+
"name": "videoStarted",
|
|
174
|
+
"method": "eventVideoStarted",
|
|
175
|
+
"target": undefined,
|
|
176
|
+
"capture": false,
|
|
177
|
+
"passive": false
|
|
178
|
+
}, {
|
|
179
|
+
"name": "takePhoto",
|
|
180
|
+
"method": "takePhoto",
|
|
181
|
+
"target": undefined,
|
|
182
|
+
"capture": false,
|
|
183
|
+
"passive": false
|
|
184
|
+
}, {
|
|
185
|
+
"name": "verificationFinished",
|
|
186
|
+
"method": "verificationFinished",
|
|
187
|
+
"target": undefined,
|
|
188
|
+
"capture": false,
|
|
189
|
+
"passive": false
|
|
190
|
+
}];
|
|
191
|
+
}
|
|
192
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
import { BaseComponent } from '../../base-component';
|
|
3
|
+
import { FlowSteps } from '../../../models/FlowSteps';
|
|
4
|
+
export class RandomActions {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.baseComponent = new BaseComponent(FlowSteps.SelfieTilt);
|
|
7
|
+
}
|
|
8
|
+
componentWillLoad() { }
|
|
9
|
+
buttonClick() { }
|
|
10
|
+
render() {
|
|
11
|
+
return (h("div", { class: "container" }, h("div", { class: "row" }, h("div", { class: "text-center" }, h("h1", null, this.topTitle)), h("div", { class: "pos-relative show-bottom" }, h("div", { class: "btn-buletin" }, h("button", { class: "main-button", onClick: () => this.buttonClick() }, this.buttonText), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText))))));
|
|
12
|
+
}
|
|
13
|
+
static get is() { return "random-actions"; }
|
|
14
|
+
static get originalStyleUrls() {
|
|
15
|
+
return {
|
|
16
|
+
"$": ["random-actions.css"]
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
static get styleUrls() {
|
|
20
|
+
return {
|
|
21
|
+
"$": ["random-actions.css"]
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import '
|
|
8
|
-
import '
|
|
9
|
-
import '
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const SelfieCapture = class {
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
import { Cameras } from '../../../helpers/Cameras';
|
|
3
|
+
import { Stream } from '../../../helpers/Stream';
|
|
4
|
+
import { SelfieCaptureValues } from '../../../helpers/textValues';
|
|
5
|
+
import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
|
|
6
|
+
import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
|
|
7
|
+
import { delay } from '../../../utils/utils';
|
|
8
|
+
import store from '../../../helpers/store';
|
|
9
|
+
import { BaseComponent } from '../../base-component';
|
|
10
|
+
import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
|
|
11
|
+
import { VerificationMode } from '../../../models/IVerificationMode';
|
|
12
|
+
export class SelfieCapture {
|
|
14
13
|
// @State() private animationPath: string;
|
|
15
|
-
constructor(
|
|
16
|
-
registerInstance(this, hostRef);
|
|
17
|
-
this.eventPhotoCapture = createEvent(this, "photoSelfieCapture", 7);
|
|
18
|
-
this.apiErrorEvent = createEvent(this, "apiError", 7);
|
|
14
|
+
constructor() {
|
|
19
15
|
this.photoIsReady = photos => {
|
|
20
16
|
//this.closeCamera();
|
|
21
17
|
this.eventPhotoCapture.emit(photos);
|
|
@@ -59,7 +55,7 @@ const SelfieCapture = class {
|
|
|
59
55
|
this.openCamera();
|
|
60
56
|
}
|
|
61
57
|
async openCamera() {
|
|
62
|
-
const constraints = this.cameras.GetConstraints('',
|
|
58
|
+
const constraints = this.cameras.GetConstraints('', store.device, true);
|
|
63
59
|
setTimeout(() => {
|
|
64
60
|
navigator.mediaDevices
|
|
65
61
|
.getUserMedia(constraints)
|
|
@@ -104,7 +100,7 @@ const SelfieCapture = class {
|
|
|
104
100
|
}
|
|
105
101
|
render() {
|
|
106
102
|
let cameraStyle;
|
|
107
|
-
if (
|
|
103
|
+
if (store.device.isMobile && this.videoStarted) {
|
|
108
104
|
cameraStyle = {
|
|
109
105
|
'width': this.captureWidth + 'px',
|
|
110
106
|
'height': this.captureHeight + 'px',
|
|
@@ -119,8 +115,83 @@ const SelfieCapture = class {
|
|
|
119
115
|
let bgDemo = this.verified ? 'container' : 'container bg-black';
|
|
120
116
|
return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
|
|
121
117
|
}
|
|
122
|
-
get
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
118
|
+
static get is() { return "selfie-capture"; }
|
|
119
|
+
static get originalStyleUrls() {
|
|
120
|
+
return {
|
|
121
|
+
"$": ["selfie-capture.css"]
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
static get styleUrls() {
|
|
125
|
+
return {
|
|
126
|
+
"$": ["selfie-capture.css"]
|
|
127
|
+
};
|
|
128
|
+
}
|
|
129
|
+
static get states() {
|
|
130
|
+
return {
|
|
131
|
+
"videoStarted": {},
|
|
132
|
+
"captureTaken": {},
|
|
133
|
+
"verified": {},
|
|
134
|
+
"titleMesage": {},
|
|
135
|
+
"demoEnded": {},
|
|
136
|
+
"demoVideo": {},
|
|
137
|
+
"uploadingLink": {},
|
|
138
|
+
"captureHeight": {},
|
|
139
|
+
"captureWidth": {}
|
|
140
|
+
};
|
|
141
|
+
}
|
|
142
|
+
static get events() {
|
|
143
|
+
return [{
|
|
144
|
+
"method": "eventPhotoCapture",
|
|
145
|
+
"name": "photoSelfieCapture",
|
|
146
|
+
"bubbles": true,
|
|
147
|
+
"cancelable": true,
|
|
148
|
+
"composed": true,
|
|
149
|
+
"docs": {
|
|
150
|
+
"tags": [],
|
|
151
|
+
"text": ""
|
|
152
|
+
},
|
|
153
|
+
"complexType": {
|
|
154
|
+
"original": "any",
|
|
155
|
+
"resolved": "any",
|
|
156
|
+
"references": {}
|
|
157
|
+
}
|
|
158
|
+
}, {
|
|
159
|
+
"method": "apiErrorEvent",
|
|
160
|
+
"name": "apiError",
|
|
161
|
+
"bubbles": true,
|
|
162
|
+
"cancelable": true,
|
|
163
|
+
"composed": true,
|
|
164
|
+
"docs": {
|
|
165
|
+
"tags": [],
|
|
166
|
+
"text": ""
|
|
167
|
+
},
|
|
168
|
+
"complexType": {
|
|
169
|
+
"original": "any",
|
|
170
|
+
"resolved": "any",
|
|
171
|
+
"references": {}
|
|
172
|
+
}
|
|
173
|
+
}];
|
|
174
|
+
}
|
|
175
|
+
static get elementRef() { return "component"; }
|
|
176
|
+
static get listeners() {
|
|
177
|
+
return [{
|
|
178
|
+
"name": "videoStarted",
|
|
179
|
+
"method": "eventVideoStarted",
|
|
180
|
+
"target": undefined,
|
|
181
|
+
"capture": false,
|
|
182
|
+
"passive": false
|
|
183
|
+
}, {
|
|
184
|
+
"name": "takePhoto",
|
|
185
|
+
"method": "takePhoto",
|
|
186
|
+
"target": undefined,
|
|
187
|
+
"capture": false,
|
|
188
|
+
"passive": false
|
|
189
|
+
}, {
|
|
190
|
+
"name": "verificationFinished",
|
|
191
|
+
"method": "verificationFinished",
|
|
192
|
+
"target": undefined,
|
|
193
|
+
"capture": false,
|
|
194
|
+
"passive": false
|
|
195
|
+
}];
|
|
196
|
+
}
|
|
197
|
+
}
|
|
@@ -1,21 +1,17 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import '
|
|
8
|
-
import '
|
|
9
|
-
import '
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
const SelfieTilt = class {
|
|
1
|
+
import { h } from '@stencil/core';
|
|
2
|
+
import { Cameras } from '../../../helpers/Cameras';
|
|
3
|
+
import { Stream } from '../../../helpers/Stream';
|
|
4
|
+
import { SelfieCaptureValues } from '../../../helpers/textValues';
|
|
5
|
+
import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
|
|
6
|
+
import { delay } from '../../../utils/utils';
|
|
7
|
+
import store from '../../../helpers/store';
|
|
8
|
+
import { BaseComponent } from '../../base-component';
|
|
9
|
+
import { FlowMoments, FlowSteps } from '../../../models/FlowSteps';
|
|
10
|
+
import { VerificationMode } from '../../../models/IVerificationMode';
|
|
11
|
+
import { FacePose } from '../../../libs/FaceML5Detector/FacePose';
|
|
12
|
+
export class SelfieTilt {
|
|
14
13
|
// @State() private animationPath: string;
|
|
15
|
-
constructor(
|
|
16
|
-
registerInstance(this, hostRef);
|
|
17
|
-
this.eventPhotoCapture = createEvent(this, "photoSelfieTiltCapture", 7);
|
|
18
|
-
this.apiErrorEvent = createEvent(this, "apiError", 7);
|
|
14
|
+
constructor() {
|
|
19
15
|
this.photoIsReady = photos => {
|
|
20
16
|
//this.closeCamera();
|
|
21
17
|
this.eventPhotoCapture.emit(photos);
|
|
@@ -62,7 +58,7 @@ const SelfieTilt = class {
|
|
|
62
58
|
this.openCamera();
|
|
63
59
|
}
|
|
64
60
|
async openCamera() {
|
|
65
|
-
const constraints = this.cameras.GetConstraints('',
|
|
61
|
+
const constraints = this.cameras.GetConstraints('', store.device, true);
|
|
66
62
|
setTimeout(() => {
|
|
67
63
|
navigator.mediaDevices
|
|
68
64
|
.getUserMedia(constraints)
|
|
@@ -106,7 +102,7 @@ const SelfieTilt = class {
|
|
|
106
102
|
}
|
|
107
103
|
render() {
|
|
108
104
|
let cameraStyle;
|
|
109
|
-
if (
|
|
105
|
+
if (store.device.isMobile && this.videoStarted) {
|
|
110
106
|
cameraStyle = {
|
|
111
107
|
'width': this.captureWidth + 'px',
|
|
112
108
|
'height': this.captureHeight + 'px',
|
|
@@ -121,8 +117,83 @@ const SelfieTilt = class {
|
|
|
121
117
|
let bgDemo = this.verified ? 'container' : 'container bg-black';
|
|
122
118
|
return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.demoEnded }, h("video", { id: "howtoSelfie", class: "video-demo", playsinline: true, ref: el => (this.demoVideo = el) }, h("source", { type: "video/mp4" }))), h("div", { hidden: this.demoEnded == false }, h("div", { hidden: this.verified }, h("div", { class: "video-capture" }, h("div", { style: cameraStyle }, h("camera-comp", { "capture-mode": "selfie" }))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.baseComponent.translations.GlobalValues.FooterText)))));
|
|
123
119
|
}
|
|
124
|
-
get
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
120
|
+
static get is() { return "selfie-tilt"; }
|
|
121
|
+
static get originalStyleUrls() {
|
|
122
|
+
return {
|
|
123
|
+
"$": ["selfie-tilt.css"]
|
|
124
|
+
};
|
|
125
|
+
}
|
|
126
|
+
static get styleUrls() {
|
|
127
|
+
return {
|
|
128
|
+
"$": ["selfie-tilt.css"]
|
|
129
|
+
};
|
|
130
|
+
}
|
|
131
|
+
static get states() {
|
|
132
|
+
return {
|
|
133
|
+
"videoStarted": {},
|
|
134
|
+
"captureTaken": {},
|
|
135
|
+
"verified": {},
|
|
136
|
+
"titleMesage": {},
|
|
137
|
+
"demoEnded": {},
|
|
138
|
+
"demoVideo": {},
|
|
139
|
+
"uploadingLink": {},
|
|
140
|
+
"captureHeight": {},
|
|
141
|
+
"captureWidth": {}
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
static get events() {
|
|
145
|
+
return [{
|
|
146
|
+
"method": "eventPhotoCapture",
|
|
147
|
+
"name": "photoSelfieTiltCapture",
|
|
148
|
+
"bubbles": true,
|
|
149
|
+
"cancelable": true,
|
|
150
|
+
"composed": true,
|
|
151
|
+
"docs": {
|
|
152
|
+
"tags": [],
|
|
153
|
+
"text": ""
|
|
154
|
+
},
|
|
155
|
+
"complexType": {
|
|
156
|
+
"original": "any",
|
|
157
|
+
"resolved": "any",
|
|
158
|
+
"references": {}
|
|
159
|
+
}
|
|
160
|
+
}, {
|
|
161
|
+
"method": "apiErrorEvent",
|
|
162
|
+
"name": "apiError",
|
|
163
|
+
"bubbles": true,
|
|
164
|
+
"cancelable": true,
|
|
165
|
+
"composed": true,
|
|
166
|
+
"docs": {
|
|
167
|
+
"tags": [],
|
|
168
|
+
"text": ""
|
|
169
|
+
},
|
|
170
|
+
"complexType": {
|
|
171
|
+
"original": "any",
|
|
172
|
+
"resolved": "any",
|
|
173
|
+
"references": {}
|
|
174
|
+
}
|
|
175
|
+
}];
|
|
176
|
+
}
|
|
177
|
+
static get elementRef() { return "component"; }
|
|
178
|
+
static get listeners() {
|
|
179
|
+
return [{
|
|
180
|
+
"name": "videoStarted",
|
|
181
|
+
"method": "eventVideoStarted",
|
|
182
|
+
"target": undefined,
|
|
183
|
+
"capture": false,
|
|
184
|
+
"passive": false
|
|
185
|
+
}, {
|
|
186
|
+
"name": "takePhoto",
|
|
187
|
+
"method": "takePhoto",
|
|
188
|
+
"target": undefined,
|
|
189
|
+
"capture": false,
|
|
190
|
+
"passive": false
|
|
191
|
+
}, {
|
|
192
|
+
"name": "verificationFinished",
|
|
193
|
+
"method": "verificationFinished",
|
|
194
|
+
"target": undefined,
|
|
195
|
+
"capture": false,
|
|
196
|
+
"passive": false
|
|
197
|
+
}];
|
|
198
|
+
}
|
|
199
|
+
}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
.camera {
|
|
2
|
+
width: 100%;
|
|
3
|
+
height: 100%;
|
|
4
|
+
color: white;
|
|
5
|
+
display: flex;
|
|
6
|
+
align-items: center;
|
|
7
|
+
justify-content: center;
|
|
8
|
+
position: relative;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.cameraCanvas,
|
|
12
|
+
.cameraCanvasSelfie,
|
|
13
|
+
.cameraCanvasSelfieDesk {
|
|
14
|
+
z-index: 3;
|
|
15
|
+
max-width: 100%;
|
|
16
|
+
max-height: 100%;
|
|
17
|
+
border-radius: 10px;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.cameraCanvasSelfie,
|
|
21
|
+
.cameraCanvasSelfieDesk {
|
|
22
|
+
transform: scale(-1, 1);
|
|
23
|
+
-webkit-transform: scale(-1, 1);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.cameraVideo,
|
|
27
|
+
.cameraVideoSelfie,
|
|
28
|
+
.cameraVideoSelfieDesk {
|
|
29
|
+
z-index: 2;
|
|
30
|
+
position: absolute;
|
|
31
|
+
max-width: 100%;
|
|
32
|
+
max-height: 100%;
|
|
33
|
+
border-radius: 10px;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.cameraVideoSelfie,
|
|
37
|
+
.cameraVideoSelfieDesk {
|
|
38
|
+
transform: scale(-1, 1);
|
|
39
|
+
-webkit-transform: scale(-1, 1);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.cameraMobile {
|
|
43
|
+
position: fixed;
|
|
44
|
+
top: 0;
|
|
45
|
+
left: 0;
|
|
46
|
+
background: black;
|
|
47
|
+
}
|