@ekyc_qoobiss/qbs-ect-cmp 3.6.39 → 3.6.41
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/{TranslationUtils-bfe4477a.js → TranslationUtils-dd73945b.js} +31 -43
- package/dist/cjs/{agreement-check_19.cjs.entry.js → agreement-check_17.cjs.entry.js} +245 -882
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qbs-ect-cmp.cjs.js +1 -1
- package/dist/cjs/random-actions.cjs.entry.js +1 -1
- package/dist/collection/collection-manifest.json +1 -3
- package/dist/collection/components/common/how-to-info/how-to-info.js +11 -34
- package/dist/collection/components/common/id-capture/id-capture.js +39 -19
- package/dist/collection/components/common/selfie-capture/selfie-capture.js +26 -27
- package/dist/collection/components/controls/camera/camera.js +1 -62
- package/dist/collection/components/flow/agreement-info/agreement-info.js +4 -5
- package/dist/collection/components/flow/landing-validation/landing-validation.js +11 -19
- package/dist/collection/components/flow/mobile-redirect/mobile-redirect.js +1 -1
- package/dist/collection/components/flow/process-id/process-id.js +47 -161
- package/dist/collection/components/flow/sms-code-validation/sms-code-validation.js +7 -56
- package/dist/collection/components/flow/sms-send/sms-send.css +0 -0
- package/dist/collection/components/flow/sms-send/sms-send.js +91 -0
- package/dist/collection/components/flow/user-liveness/user-liveness.js +45 -118
- package/dist/collection/components/identification-component/identification-component.js +14 -41
- package/dist/collection/helpers/ApiCall.js +14 -15
- package/dist/collection/helpers/ML5.js +1 -1
- package/dist/collection/helpers/Stream.js +1 -47
- package/dist/collection/helpers/store.js +0 -18
- package/dist/collection/helpers/textValues.js +2 -0
- package/dist/collection/models/CaptureFlow.js +0 -16
- package/dist/collection/models/FlowStatus.js +16 -10
- package/dist/esm/{TranslationUtils-7e68bc94.js → TranslationUtils-741a728a.js} +31 -43
- package/dist/esm/{agreement-check_19.entry.js → agreement-check_17.entry.js} +245 -880
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qbs-ect-cmp.js +1 -1
- package/dist/esm/random-actions.entry.js +1 -1
- package/dist/qbs-ect-cmp/p-87c689d6.js +1 -0
- package/dist/qbs-ect-cmp/{p-d1d9feaf.entry.js → p-a130edd5.entry.js} +1 -1
- package/dist/qbs-ect-cmp/{p-4e3b735b.entry.js → p-b3fa0a37.entry.js} +2 -2
- package/dist/qbs-ect-cmp/qbs-ect-cmp.esm.js +1 -1
- package/dist/types/components/common/how-to-info/how-to-info.d.ts +0 -1
- package/dist/types/components/common/id-capture/id-capture.d.ts +5 -1
- package/dist/types/components/common/selfie-capture/selfie-capture.d.ts +3 -2
- package/dist/types/components/controls/camera/camera.d.ts +0 -7
- package/dist/types/components/flow/process-id/process-id.d.ts +0 -3
- package/dist/types/components/flow/sms-code-validation/sms-code-validation.d.ts +0 -3
- package/dist/types/components/flow/sms-send/sms-send.d.ts +17 -0
- package/dist/types/components/flow/user-liveness/user-liveness.d.ts +2 -6
- package/dist/types/components/identification-component/identification-component.d.ts +1 -2
- package/dist/types/components.d.ts +18 -65
- package/dist/types/helpers/ApiCall.d.ts +9 -3
- package/dist/types/helpers/Stream.d.ts +0 -11
- package/dist/types/helpers/textValues.d.ts +2 -0
- package/dist/types/models/CaptureFlow.d.ts +2 -19
- package/dist/types/models/FlowStatus.d.ts +18 -10
- package/dist/types/models/IAbortResult.d.ts +1 -0
- package/dist/types/models/IAddRequest.d.ts +1 -1
- package/dist/types/models/IEctStore.d.ts +0 -6
- package/dist/types/models/IOtpCheck.d.ts +1 -0
- package/dist/types/models/IOtpSend.d.ts +1 -0
- package/dist/types/models/IUploadFile.d.ts +1 -0
- package/package.json +1 -1
- package/dist/collection/components/common/id-back-capture/id-back-capture.css +0 -35
- package/dist/collection/components/common/id-back-capture/id-back-capture.js +0 -219
- package/dist/collection/components/common/id-tilt/id-tilt.css +0 -35
- package/dist/collection/components/common/id-tilt/id-tilt.js +0 -220
- package/dist/collection/components/common/selfie-tilt/selfie-tilt.css +0 -7
- package/dist/collection/components/common/selfie-tilt/selfie-tilt.js +0 -221
- package/dist/qbs-ect-cmp/p-d35256e9.js +0 -1
- package/dist/types/components/common/id-back-capture/id-back-capture.d.ts +0 -28
- package/dist/types/components/common/id-tilt/id-tilt.d.ts +0 -28
- package/dist/types/components/common/selfie-tilt/selfie-tilt.d.ts +0 -31
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/* .cameraContainer {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 100%;
|
|
4
|
-
z-index: 10;
|
|
5
|
-
position: relative;
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
} */
|
|
8
|
-
|
|
9
|
-
.logo {
|
|
10
|
-
max-height: 450px;
|
|
11
|
-
max-width: 450px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/* .block {
|
|
15
|
-
width: 90%;
|
|
16
|
-
padding-left: 5%;
|
|
17
|
-
padding-right: 5%;
|
|
18
|
-
margin-top: 5vh;
|
|
19
|
-
} */
|
|
20
|
-
|
|
21
|
-
.canvas-on-video {
|
|
22
|
-
max-width: 100%;
|
|
23
|
-
max-height: 100%;
|
|
24
|
-
position: absolute;
|
|
25
|
-
z-index: 2;
|
|
26
|
-
transform: scale(-1, 1);
|
|
27
|
-
}
|
|
28
|
-
/*
|
|
29
|
-
@media screen and (max-height: 414px) {
|
|
30
|
-
.logo {
|
|
31
|
-
background-size: 140px;
|
|
32
|
-
max-height: 140px;
|
|
33
|
-
max-width: 140px;
|
|
34
|
-
}
|
|
35
|
-
} */
|
|
@@ -1,219 +0,0 @@
|
|
|
1
|
-
import { h } from '@stencil/core';
|
|
2
|
-
import { Cameras } from '../../../helpers/Cameras';
|
|
3
|
-
import { Stream } from '../../../helpers/Stream';
|
|
4
|
-
import { IDML5Detector } from '../../../libs/IDML5Detector/IDML5Detector';
|
|
5
|
-
import { FaceML5Detector } from '../../../libs/FaceML5Detector/FaceML5Detector';
|
|
6
|
-
import { IDPose } from '../../../libs/IDML5Detector/IDPose';
|
|
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
|
-
import { IdCaptureValues } from '../../../helpers/textValues';
|
|
13
|
-
import { Translations } from '../../../helpers/TranslationUtils';
|
|
14
|
-
// import { IDPose } from '../../libs/IDML5Detector/IDPose';
|
|
15
|
-
export class IdBackCapture {
|
|
16
|
-
// @State() private animationPath: string;
|
|
17
|
-
constructor() {
|
|
18
|
-
this.photoIsReady = photos => {
|
|
19
|
-
//this.closeCamera();
|
|
20
|
-
this.eventPhotoCapture.emit(photos);
|
|
21
|
-
};
|
|
22
|
-
this.videoStarted = undefined;
|
|
23
|
-
this.cameraSize = undefined;
|
|
24
|
-
this.captureTaken = undefined;
|
|
25
|
-
this.verified = undefined;
|
|
26
|
-
this.titleMesage = undefined;
|
|
27
|
-
this.showDemo = undefined;
|
|
28
|
-
this.demoVideo = undefined;
|
|
29
|
-
this.captureTaken = false;
|
|
30
|
-
this.verified = false;
|
|
31
|
-
this.cameras = new Cameras();
|
|
32
|
-
this.showDemo = true;
|
|
33
|
-
this.baseComponent = new BaseComponent(FlowSteps.CiBackCapture);
|
|
34
|
-
}
|
|
35
|
-
eventVideoStarted(event) {
|
|
36
|
-
this.videoStarted = true;
|
|
37
|
-
this.cameraSize = event.detail;
|
|
38
|
-
}
|
|
39
|
-
async componentWillLoad() {
|
|
40
|
-
this.translations = await Translations.getValues();
|
|
41
|
-
//this.videoDemoStyle = this.device.isMobile ? { width: window.screen.width + 'px', height: window.screen.height + 'px', 'object-fit': 'fill' } : {};
|
|
42
|
-
if (!navigator.mediaDevices) {
|
|
43
|
-
this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
async componentDidLoad() {
|
|
47
|
-
await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Initialized);
|
|
48
|
-
this.titleMesage = this.translations.IdCaptureValues.TtileRotate;
|
|
49
|
-
this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Rotate];
|
|
50
|
-
this.demoVideo.play();
|
|
51
|
-
await delay(this.translations.GlobalValues.VideoLenght);
|
|
52
|
-
this.titleMesage = this.translations.IdCaptureValues.TitleBack;
|
|
53
|
-
this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.BackStraight];
|
|
54
|
-
this.demoVideo.play();
|
|
55
|
-
await delay(this.translations.GlobalValues.VideoLenght);
|
|
56
|
-
this.showDemo = false;
|
|
57
|
-
this.openCamera();
|
|
58
|
-
}
|
|
59
|
-
async openCamera() {
|
|
60
|
-
const constraints = this.cameras.GetConstraints(store.cameraId, store.device);
|
|
61
|
-
setTimeout(() => {
|
|
62
|
-
navigator.mediaDevices
|
|
63
|
-
.getUserMedia(constraints)
|
|
64
|
-
.then(stream => {
|
|
65
|
-
const superStream = Stream.getNewInstance(VerificationMode.Full);
|
|
66
|
-
superStream.initStream(stream);
|
|
67
|
-
})
|
|
68
|
-
.catch(e => {
|
|
69
|
-
this.closeCamera();
|
|
70
|
-
this.apiErrorEvent.emit(e);
|
|
71
|
-
});
|
|
72
|
-
}, 100);
|
|
73
|
-
}
|
|
74
|
-
closeCamera() {
|
|
75
|
-
if (Stream.instance) {
|
|
76
|
-
Stream.instance.dropStream();
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
disconnectedCallback() {
|
|
80
|
-
this.closeCamera();
|
|
81
|
-
Stream.instance = null;
|
|
82
|
-
IDML5Detector.instance = null;
|
|
83
|
-
FaceML5Detector.instance = null;
|
|
84
|
-
}
|
|
85
|
-
async verificationFinished() {
|
|
86
|
-
if (this.verified)
|
|
87
|
-
return;
|
|
88
|
-
this.verified = true;
|
|
89
|
-
this.titleMesage = this.translations.IdCaptureValues.Loading;
|
|
90
|
-
this.closeCamera();
|
|
91
|
-
this.showDemo = true;
|
|
92
|
-
var loops = 0;
|
|
93
|
-
this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
|
|
94
|
-
this.demoVideo.loop = false;
|
|
95
|
-
while (loops < 7) {
|
|
96
|
-
loops++;
|
|
97
|
-
this.demoVideo.play();
|
|
98
|
-
await delay(this.translations.GlobalValues.VideoLenght);
|
|
99
|
-
}
|
|
100
|
-
this.eventTimeElapsed.emit();
|
|
101
|
-
}
|
|
102
|
-
async takePhoto() {
|
|
103
|
-
if (this.captureTaken)
|
|
104
|
-
return;
|
|
105
|
-
this.captureTaken = true;
|
|
106
|
-
if (Stream.instance) {
|
|
107
|
-
let res = await Stream.instance.takePhoto();
|
|
108
|
-
this.photoIsReady(res);
|
|
109
|
-
}
|
|
110
|
-
else {
|
|
111
|
-
this.eventTimeElapsed.emit();
|
|
112
|
-
}
|
|
113
|
-
await this.baseComponent.logStep(FlowSteps.CiBackCapture, FlowMoments.Finalized);
|
|
114
|
-
}
|
|
115
|
-
render() {
|
|
116
|
-
let cameraStyle;
|
|
117
|
-
let cameraStyleInner;
|
|
118
|
-
if (this.videoStarted) {
|
|
119
|
-
cameraStyle = { width: Math.round(this.cameraSize.width) + 'px', height: Math.round((this.cameraSize.width * 9) / 16) + 'px', overflow: 'hidden', borderRadius: '10px' };
|
|
120
|
-
cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
|
|
121
|
-
}
|
|
122
|
-
let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
|
|
123
|
-
//let videoClass = this.device.isMobile ? '' : 'video-demo';
|
|
124
|
-
let bgDemo = this.verified ? 'container' : 'container bg-black';
|
|
125
|
-
return (h("div", { class: bgDemo }, h("div", { class: "container-video" }, h("div", { hidden: this.showDemo == false }, h("video", { id: "howtoBack", 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": "id" })))))), h("div", { class: "capture-title" }, h("h1", { class: titleClass }, this.titleMesage), h("p", { class: "main-text font-size-18 text-right mb-0" }, this.translations.GlobalValues.FooterText)))));
|
|
126
|
-
}
|
|
127
|
-
static get is() { return "id-back-capture"; }
|
|
128
|
-
static get originalStyleUrls() {
|
|
129
|
-
return {
|
|
130
|
-
"$": ["id-back-capture.css"]
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
static get styleUrls() {
|
|
134
|
-
return {
|
|
135
|
-
"$": ["id-back-capture.css"]
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
static get states() {
|
|
139
|
-
return {
|
|
140
|
-
"videoStarted": {},
|
|
141
|
-
"cameraSize": {},
|
|
142
|
-
"captureTaken": {},
|
|
143
|
-
"verified": {},
|
|
144
|
-
"titleMesage": {},
|
|
145
|
-
"showDemo": {},
|
|
146
|
-
"demoVideo": {}
|
|
147
|
-
};
|
|
148
|
-
}
|
|
149
|
-
static get events() {
|
|
150
|
-
return [{
|
|
151
|
-
"method": "eventPhotoCapture",
|
|
152
|
-
"name": "photoIdBackCapture",
|
|
153
|
-
"bubbles": true,
|
|
154
|
-
"cancelable": true,
|
|
155
|
-
"composed": true,
|
|
156
|
-
"docs": {
|
|
157
|
-
"tags": [],
|
|
158
|
-
"text": ""
|
|
159
|
-
},
|
|
160
|
-
"complexType": {
|
|
161
|
-
"original": "any",
|
|
162
|
-
"resolved": "any",
|
|
163
|
-
"references": {}
|
|
164
|
-
}
|
|
165
|
-
}, {
|
|
166
|
-
"method": "apiErrorEvent",
|
|
167
|
-
"name": "apiError",
|
|
168
|
-
"bubbles": true,
|
|
169
|
-
"cancelable": true,
|
|
170
|
-
"composed": true,
|
|
171
|
-
"docs": {
|
|
172
|
-
"tags": [],
|
|
173
|
-
"text": ""
|
|
174
|
-
},
|
|
175
|
-
"complexType": {
|
|
176
|
-
"original": "any",
|
|
177
|
-
"resolved": "any",
|
|
178
|
-
"references": {}
|
|
179
|
-
}
|
|
180
|
-
}, {
|
|
181
|
-
"method": "eventTimeElapsed",
|
|
182
|
-
"name": "timeElapsed",
|
|
183
|
-
"bubbles": true,
|
|
184
|
-
"cancelable": true,
|
|
185
|
-
"composed": true,
|
|
186
|
-
"docs": {
|
|
187
|
-
"tags": [],
|
|
188
|
-
"text": ""
|
|
189
|
-
},
|
|
190
|
-
"complexType": {
|
|
191
|
-
"original": "any",
|
|
192
|
-
"resolved": "any",
|
|
193
|
-
"references": {}
|
|
194
|
-
}
|
|
195
|
-
}];
|
|
196
|
-
}
|
|
197
|
-
static get elementRef() { return "component"; }
|
|
198
|
-
static get listeners() {
|
|
199
|
-
return [{
|
|
200
|
-
"name": "videoStarted",
|
|
201
|
-
"method": "eventVideoStarted",
|
|
202
|
-
"target": undefined,
|
|
203
|
-
"capture": false,
|
|
204
|
-
"passive": false
|
|
205
|
-
}, {
|
|
206
|
-
"name": "verificationFinished",
|
|
207
|
-
"method": "verificationFinished",
|
|
208
|
-
"target": undefined,
|
|
209
|
-
"capture": false,
|
|
210
|
-
"passive": false
|
|
211
|
-
}, {
|
|
212
|
-
"name": "takePhoto",
|
|
213
|
-
"method": "takePhoto",
|
|
214
|
-
"target": undefined,
|
|
215
|
-
"capture": false,
|
|
216
|
-
"passive": false
|
|
217
|
-
}];
|
|
218
|
-
}
|
|
219
|
-
}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
/* .cameraContainer {
|
|
2
|
-
width: 100%;
|
|
3
|
-
height: 100%;
|
|
4
|
-
z-index: 10;
|
|
5
|
-
position: relative;
|
|
6
|
-
overflow: hidden;
|
|
7
|
-
} */
|
|
8
|
-
|
|
9
|
-
.logo {
|
|
10
|
-
max-height: 450px;
|
|
11
|
-
max-width: 450px;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
/* .block {
|
|
15
|
-
width: 90%;
|
|
16
|
-
padding-left: 5%;
|
|
17
|
-
padding-right: 5%;
|
|
18
|
-
margin-top: 5vh;
|
|
19
|
-
} */
|
|
20
|
-
|
|
21
|
-
.canvas-on-video {
|
|
22
|
-
max-width: 100%;
|
|
23
|
-
max-height: 100%;
|
|
24
|
-
position: absolute;
|
|
25
|
-
z-index: 2;
|
|
26
|
-
transform: scale(-1, 1);
|
|
27
|
-
}
|
|
28
|
-
/*
|
|
29
|
-
@media screen and (max-height: 414px) {
|
|
30
|
-
.logo {
|
|
31
|
-
background-size: 140px;
|
|
32
|
-
max-height: 140px;
|
|
33
|
-
max-width: 140px;
|
|
34
|
-
}
|
|
35
|
-
} */
|
|
@@ -1,220 +0,0 @@
|
|
|
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 { Translations } from '../../../helpers/TranslationUtils';
|
|
14
|
-
// import { IDPose } from '../../libs/IDML5Detector/IDPose';
|
|
15
|
-
export class IdTilt {
|
|
16
|
-
// @State() private animationPath: string;
|
|
17
|
-
constructor() {
|
|
18
|
-
this.photoIsReady = photos => {
|
|
19
|
-
//this.closeCamera();
|
|
20
|
-
this.eventPhotoCapture.emit(photos);
|
|
21
|
-
};
|
|
22
|
-
this.videoStarted = undefined;
|
|
23
|
-
this.cameraSize = undefined;
|
|
24
|
-
this.captureTaken = undefined;
|
|
25
|
-
this.verified = undefined;
|
|
26
|
-
this.titleMesage = undefined;
|
|
27
|
-
this.showDemo = undefined;
|
|
28
|
-
this.demoVideo = undefined;
|
|
29
|
-
this.captureTaken = false;
|
|
30
|
-
this.verified = false;
|
|
31
|
-
this.cameras = new Cameras();
|
|
32
|
-
this.showDemo = true;
|
|
33
|
-
this.baseComponent = new BaseComponent(FlowSteps.CiTilt);
|
|
34
|
-
}
|
|
35
|
-
eventVideoStarted(event) {
|
|
36
|
-
this.videoStarted = true;
|
|
37
|
-
this.cameraSize = event.detail;
|
|
38
|
-
}
|
|
39
|
-
async componentWillLoad() {
|
|
40
|
-
this.translations = await Translations.getValues();
|
|
41
|
-
this.titleMesage = this.translations.IdCaptureValues.IDPoseMapping;
|
|
42
|
-
//this.videoDemoStyle = this.device.isMobile ? { 'width': window.screen.width + 'px', 'height': window.screen.height + 'px', 'object-fit': 'fill' } : {};
|
|
43
|
-
if (!navigator.mediaDevices) {
|
|
44
|
-
this.apiErrorEvent.emit({ message: 'This browser does not support webRTC' });
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
async componentDidLoad() {
|
|
48
|
-
await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Initialized);
|
|
49
|
-
this.demoVideo.src = IdCaptureValues.IDPoseDemoMapping[IDPose.Tilted];
|
|
50
|
-
this.demoVideo.play();
|
|
51
|
-
await delay(this.translations.GlobalValues.VideoLenght);
|
|
52
|
-
this.showDemo = false;
|
|
53
|
-
this.openCamera();
|
|
54
|
-
}
|
|
55
|
-
async openCamera() {
|
|
56
|
-
const constraints = this.cameras.GetConstraints(store.cameraId, store.device);
|
|
57
|
-
setTimeout(() => {
|
|
58
|
-
navigator.mediaDevices
|
|
59
|
-
.getUserMedia(constraints)
|
|
60
|
-
.then(stream => {
|
|
61
|
-
const superStream = Stream.getNewInstance(VerificationMode.Tilt);
|
|
62
|
-
superStream.initStream(stream);
|
|
63
|
-
})
|
|
64
|
-
.catch(e => {
|
|
65
|
-
this.closeCamera();
|
|
66
|
-
this.apiErrorEvent.emit(e);
|
|
67
|
-
});
|
|
68
|
-
}, 100);
|
|
69
|
-
}
|
|
70
|
-
closeCamera() {
|
|
71
|
-
if (Stream.instance) {
|
|
72
|
-
Stream.instance.dropStream();
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
disconnectedCallback() {
|
|
76
|
-
this.closeCamera();
|
|
77
|
-
Stream.instance = null;
|
|
78
|
-
IDML5Detector.instance = null;
|
|
79
|
-
FaceML5Detector.instance = null;
|
|
80
|
-
}
|
|
81
|
-
async takePhoto() {
|
|
82
|
-
if (this.captureTaken)
|
|
83
|
-
return;
|
|
84
|
-
this.captureTaken = true;
|
|
85
|
-
if (Stream.instance) {
|
|
86
|
-
let res = await Stream.instance.takePhoto();
|
|
87
|
-
this.photoIsReady(res);
|
|
88
|
-
}
|
|
89
|
-
else {
|
|
90
|
-
this.eventTimeElapsed.emit();
|
|
91
|
-
}
|
|
92
|
-
await this.baseComponent.logStep(FlowSteps.CiTilt, FlowMoments.Finalized);
|
|
93
|
-
}
|
|
94
|
-
async verificationFinished() {
|
|
95
|
-
if (this.verified)
|
|
96
|
-
return;
|
|
97
|
-
this.verified = true;
|
|
98
|
-
this.titleMesage = this.translations.IdCaptureValues.Loading;
|
|
99
|
-
this.closeCamera();
|
|
100
|
-
this.showDemo = true;
|
|
101
|
-
var loops = 0;
|
|
102
|
-
this.demoVideo.src = 'https://ekyc.blob.core.windows.net/$web/animations/uploading_id.mp4';
|
|
103
|
-
this.demoVideo.loop = false;
|
|
104
|
-
while (loops < 7) {
|
|
105
|
-
loops++;
|
|
106
|
-
this.demoVideo.play();
|
|
107
|
-
await delay(this.translations.GlobalValues.VideoLenght);
|
|
108
|
-
}
|
|
109
|
-
this.eventTimeElapsed.emit();
|
|
110
|
-
}
|
|
111
|
-
render() {
|
|
112
|
-
let cameraStyle;
|
|
113
|
-
let cameraStyleInner;
|
|
114
|
-
if (this.videoStarted) {
|
|
115
|
-
cameraStyle = {
|
|
116
|
-
width: Math.round(this.cameraSize.width) + 'px',
|
|
117
|
-
height: Math.round((this.cameraSize.width * 9) / 16) + 'px',
|
|
118
|
-
overflow: 'hidden',
|
|
119
|
-
borderRadius: '10px',
|
|
120
|
-
};
|
|
121
|
-
cameraStyleInner = { marginTop: Math.round((this.cameraSize.height - (this.cameraSize.width * 9) / 16) / 2) * -1 + 'px' };
|
|
122
|
-
}
|
|
123
|
-
let titleClass = this.verified ? 'color-black-2 text-center' : 'color-white text-center';
|
|
124
|
-
//let videoClass = this.device.isMobile ? '' : 'video-demo';
|
|
125
|
-
let bgDemo = this.verified ? 'container' : 'container bg-black';
|
|
126
|
-
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.translations.GlobalValues.FooterText)))));
|
|
127
|
-
}
|
|
128
|
-
static get is() { return "id-tilt"; }
|
|
129
|
-
static get originalStyleUrls() {
|
|
130
|
-
return {
|
|
131
|
-
"$": ["id-tilt.css"]
|
|
132
|
-
};
|
|
133
|
-
}
|
|
134
|
-
static get styleUrls() {
|
|
135
|
-
return {
|
|
136
|
-
"$": ["id-tilt.css"]
|
|
137
|
-
};
|
|
138
|
-
}
|
|
139
|
-
static get states() {
|
|
140
|
-
return {
|
|
141
|
-
"videoStarted": {},
|
|
142
|
-
"cameraSize": {},
|
|
143
|
-
"captureTaken": {},
|
|
144
|
-
"verified": {},
|
|
145
|
-
"titleMesage": {},
|
|
146
|
-
"showDemo": {},
|
|
147
|
-
"demoVideo": {}
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
static get events() {
|
|
151
|
-
return [{
|
|
152
|
-
"method": "eventPhotoCapture",
|
|
153
|
-
"name": "photoTiltCapture",
|
|
154
|
-
"bubbles": true,
|
|
155
|
-
"cancelable": true,
|
|
156
|
-
"composed": true,
|
|
157
|
-
"docs": {
|
|
158
|
-
"tags": [],
|
|
159
|
-
"text": ""
|
|
160
|
-
},
|
|
161
|
-
"complexType": {
|
|
162
|
-
"original": "any",
|
|
163
|
-
"resolved": "any",
|
|
164
|
-
"references": {}
|
|
165
|
-
}
|
|
166
|
-
}, {
|
|
167
|
-
"method": "apiErrorEvent",
|
|
168
|
-
"name": "apiError",
|
|
169
|
-
"bubbles": true,
|
|
170
|
-
"cancelable": true,
|
|
171
|
-
"composed": true,
|
|
172
|
-
"docs": {
|
|
173
|
-
"tags": [],
|
|
174
|
-
"text": ""
|
|
175
|
-
},
|
|
176
|
-
"complexType": {
|
|
177
|
-
"original": "any",
|
|
178
|
-
"resolved": "any",
|
|
179
|
-
"references": {}
|
|
180
|
-
}
|
|
181
|
-
}, {
|
|
182
|
-
"method": "eventTimeElapsed",
|
|
183
|
-
"name": "timeElapsed",
|
|
184
|
-
"bubbles": true,
|
|
185
|
-
"cancelable": true,
|
|
186
|
-
"composed": true,
|
|
187
|
-
"docs": {
|
|
188
|
-
"tags": [],
|
|
189
|
-
"text": ""
|
|
190
|
-
},
|
|
191
|
-
"complexType": {
|
|
192
|
-
"original": "any",
|
|
193
|
-
"resolved": "any",
|
|
194
|
-
"references": {}
|
|
195
|
-
}
|
|
196
|
-
}];
|
|
197
|
-
}
|
|
198
|
-
static get elementRef() { return "component"; }
|
|
199
|
-
static get listeners() {
|
|
200
|
-
return [{
|
|
201
|
-
"name": "videoStarted",
|
|
202
|
-
"method": "eventVideoStarted",
|
|
203
|
-
"target": undefined,
|
|
204
|
-
"capture": false,
|
|
205
|
-
"passive": false
|
|
206
|
-
}, {
|
|
207
|
-
"name": "takePhoto",
|
|
208
|
-
"method": "takePhoto",
|
|
209
|
-
"target": undefined,
|
|
210
|
-
"capture": false,
|
|
211
|
-
"passive": false
|
|
212
|
-
}, {
|
|
213
|
-
"name": "verificationFinished",
|
|
214
|
-
"method": "verificationFinished",
|
|
215
|
-
"target": undefined,
|
|
216
|
-
"capture": false,
|
|
217
|
-
"passive": false
|
|
218
|
-
}];
|
|
219
|
-
}
|
|
220
|
-
}
|