@ekyc_qoobiss/qbs-ect-cmp 3.2.1 → 3.2.3
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_18.cjs.entry.js +379 -267
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/qbs-ect-cmp.cjs.js +1 -1
- package/dist/collection/components/base-component.js +48 -0
- package/dist/collection/components/common/camera-error/camera-error.js +9 -36
- package/dist/collection/components/common/id-back-capture/id-back-capture.js +2 -27
- package/dist/collection/components/common/id-capture/id-capture.js +2 -27
- package/dist/collection/components/common/selfie-capture/selfie-capture.js +4 -28
- package/dist/collection/components/controls/camera/camera.js +3 -23
- package/dist/collection/components/flow/agreement-info/agreement-info.js +6 -9
- package/dist/collection/components/flow/end-redirect/end-redirect.js +4 -9
- package/dist/collection/components/flow/id-double-side/id-double-side.js +31 -51
- package/dist/collection/components/flow/id-single-side/id-single-side.js +14 -42
- package/dist/collection/components/flow/landing-validation/landing-validation.js +19 -40
- package/dist/collection/components/flow/mobile-redirect/mobile-redirect.js +7 -10
- package/dist/collection/components/flow/sms-code-validation/sms-code-validation.js +12 -15
- package/dist/collection/components/flow/user-liveness/user-liveness.js +29 -49
- package/dist/collection/components/identification-component/identification-component.js +14 -15
- package/dist/collection/helpers/ApiCall.js +3 -3
- package/dist/collection/helpers/Cameras.js +3 -2
- package/dist/collection/helpers/DeviceDetection.js +83 -0
- package/dist/collection/helpers/Events.js +9 -0
- package/dist/collection/helpers/Stream.js +9 -8
- package/dist/collection/helpers/index.js +0 -33
- package/dist/collection/helpers/store.js +2 -0
- package/dist/collection/models/FlowSteps.js +19 -13
- package/dist/collection/models/IDevice.js +22 -1
- package/dist/collection/models/IEctStore.js +1 -0
- package/dist/esm/agreement-check_18.entry.js +379 -267
- package/dist/esm/loader.js +1 -1
- package/dist/esm/qbs-ect-cmp.js +1 -1
- package/dist/qbs-ect-cmp/{p-92eaaff9.entry.js → p-f242dbd4.entry.js} +2 -2
- package/dist/qbs-ect-cmp/qbs-ect-cmp.esm.js +1 -1
- package/dist/types/components/base-component.d.ts +14 -0
- package/dist/types/components/common/camera-error/camera-error.d.ts +1 -3
- package/dist/types/components/common/id-back-capture/id-back-capture.d.ts +0 -2
- package/dist/types/components/common/id-capture/id-capture.d.ts +0 -2
- package/dist/types/components/common/selfie-capture/selfie-capture.d.ts +0 -2
- package/dist/types/components/controls/camera/camera.d.ts +0 -2
- package/dist/types/components/flow/agreement-info/agreement-info.d.ts +3 -3
- package/dist/types/components/flow/end-redirect/end-redirect.d.ts +1 -1
- package/dist/types/components/flow/id-double-side/id-double-side.d.ts +4 -5
- package/dist/types/components/flow/id-single-side/id-single-side.d.ts +3 -5
- package/dist/types/components/flow/landing-validation/landing-validation.d.ts +2 -3
- package/dist/types/components/flow/mobile-redirect/mobile-redirect.d.ts +1 -1
- package/dist/types/components/flow/sms-code-validation/sms-code-validation.d.ts +2 -2
- package/dist/types/components/flow/user-liveness/user-liveness.d.ts +3 -4
- package/dist/types/components/identification-component/identification-component.d.ts +1 -2
- package/dist/types/components.d.ts +0 -19
- package/dist/types/helpers/ApiCall.d.ts +4 -4
- package/dist/types/helpers/Cameras.d.ts +4 -4
- package/dist/types/helpers/DeviceDetection.d.ts +18 -0
- package/dist/types/helpers/Events.d.ts +2 -0
- package/dist/types/helpers/Stream.d.ts +1 -3
- package/dist/types/helpers/index.d.ts +0 -2
- package/dist/types/helpers/store.d.ts +2 -17
- package/dist/types/models/FlowSteps.d.ts +18 -13
- package/dist/types/models/IDevice.d.ts +32 -9
- package/dist/types/models/IEctStore.d.ts +20 -0
- package/package.json +1 -1
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
|
-
import { ApiCall } from '../../../helpers/ApiCall';
|
|
3
2
|
import store from '../../../helpers/store';
|
|
4
3
|
import { Stream } from '../../../helpers/Stream';
|
|
5
4
|
import { FlowStatus } from '../../../models/FlowStatus';
|
|
6
5
|
import { FlowSteps } from '../../../models/FlowSteps';
|
|
7
6
|
import { getLogMessage } from '../../../utils/utils';
|
|
7
|
+
import { BaseComponent } from '../../base-component';
|
|
8
8
|
export class UserLiveness {
|
|
9
9
|
constructor() {
|
|
10
|
-
this.device = undefined;
|
|
11
10
|
this.showError = undefined;
|
|
12
11
|
this.showHowTo = undefined;
|
|
13
12
|
this.selfieFlow = {
|
|
@@ -17,15 +16,11 @@ export class UserLiveness {
|
|
|
17
16
|
photoFile: null,
|
|
18
17
|
recordingFile: null,
|
|
19
18
|
};
|
|
20
|
-
this.
|
|
19
|
+
this.baseComponent = new BaseComponent(FlowSteps.Selfie);
|
|
20
|
+
this.baseComponent.setEventEmitter(this.apiErrorEvent);
|
|
21
21
|
}
|
|
22
22
|
async componentDidLoad() {
|
|
23
|
-
|
|
24
|
-
await this.apiCall.AddStep(FlowSteps.Selfie);
|
|
25
|
-
}
|
|
26
|
-
catch (e) {
|
|
27
|
-
this.apiErrorEvent.emit(e);
|
|
28
|
-
}
|
|
23
|
+
await this.baseComponent.initialize();
|
|
29
24
|
}
|
|
30
25
|
componentWillLoad() {
|
|
31
26
|
this.showHowTo = true;
|
|
@@ -46,7 +41,7 @@ export class UserLiveness {
|
|
|
46
41
|
async captureSelfieImage(event) {
|
|
47
42
|
let selfiePhoto = event.detail;
|
|
48
43
|
if (selfiePhoto.length == 0 || selfiePhoto.size == 0) {
|
|
49
|
-
await this.apiCall.AddLog({ message: 'Empty selfie', blobData: selfiePhoto }, getLogMessage());
|
|
44
|
+
await this.baseComponent.apiCall.AddLog({ message: 'Empty selfie', blobData: selfiePhoto }, getLogMessage());
|
|
50
45
|
return;
|
|
51
46
|
}
|
|
52
47
|
try {
|
|
@@ -60,7 +55,7 @@ export class UserLiveness {
|
|
|
60
55
|
async capturedSelfieRecording(event) {
|
|
61
56
|
let selfieRecording = event.detail;
|
|
62
57
|
if (selfieRecording.length == 0 || selfieRecording.size == 0) {
|
|
63
|
-
await this.apiCall.AddLog({ message: 'Empty recording', blobData: selfieRecording }, getLogMessage());
|
|
58
|
+
await this.baseComponent.apiCall.AddLog({ message: 'Empty recording', blobData: selfieRecording }, getLogMessage());
|
|
64
59
|
return;
|
|
65
60
|
}
|
|
66
61
|
let mimeType = selfieRecording.type == Stream.mp4MimeType.type ? Stream.mp4MimeType : Stream.webmMimeType;
|
|
@@ -69,42 +64,49 @@ export class UserLiveness {
|
|
|
69
64
|
await this.uploadRecording();
|
|
70
65
|
}
|
|
71
66
|
catch (e) {
|
|
72
|
-
|
|
67
|
+
if (store.recordingRetryCount < 3) {
|
|
68
|
+
store.recordingRetryCount++;
|
|
69
|
+
this.triggerErrorFlow();
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
this.apiErrorEvent.emit(e);
|
|
73
|
+
}
|
|
73
74
|
}
|
|
74
75
|
}
|
|
75
76
|
async verificationFinished(_event) {
|
|
76
77
|
this.selfieFlow.verificationFinished = true;
|
|
77
|
-
this.endFlow();
|
|
78
|
+
await this.endFlow();
|
|
78
79
|
}
|
|
79
80
|
async uploadPhoto() {
|
|
80
81
|
if (this.selfieFlow.photoFile == null || this.selfieFlow.photoDone) {
|
|
81
82
|
return;
|
|
82
83
|
}
|
|
83
|
-
this.selfieFlow.photoDone = await this.apiCall.UploadFileForRequestB64(store.requestId, 'Selfie', this.selfieFlow.photoFile);
|
|
84
|
+
this.selfieFlow.photoDone = await this.baseComponent.apiCall.UploadFileForRequestB64(store.requestId, 'Selfie', this.selfieFlow.photoFile);
|
|
84
85
|
if (this.selfieFlow.photoDone) {
|
|
85
|
-
this.endFlow();
|
|
86
|
+
await this.endFlow();
|
|
86
87
|
}
|
|
87
88
|
else {
|
|
88
|
-
this.
|
|
89
|
-
this.selfieFlow.recordingFile = null;
|
|
90
|
-
this.showError = true;
|
|
89
|
+
this.triggerErrorFlow();
|
|
91
90
|
}
|
|
92
91
|
}
|
|
93
92
|
async uploadRecording() {
|
|
94
93
|
if (this.selfieFlow.recordingFile == null || this.selfieFlow.recordingDone) {
|
|
95
94
|
return;
|
|
96
95
|
}
|
|
97
|
-
this.selfieFlow.recordingDone = await this.apiCall.UploadFileForRequestB64(store.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
|
|
96
|
+
this.selfieFlow.recordingDone = await this.baseComponent.apiCall.UploadFileForRequestB64(store.requestId, 'SelfieVideo', this.selfieFlow.recordingFile);
|
|
98
97
|
if (this.selfieFlow.recordingDone) {
|
|
99
|
-
this.endFlow();
|
|
98
|
+
await this.endFlow();
|
|
100
99
|
}
|
|
101
100
|
else {
|
|
102
|
-
this.
|
|
103
|
-
this.selfieFlow.recordingFile = null;
|
|
104
|
-
this.showError = true;
|
|
101
|
+
this.triggerErrorFlow();
|
|
105
102
|
}
|
|
106
103
|
}
|
|
107
|
-
|
|
104
|
+
triggerErrorFlow() {
|
|
105
|
+
this.selfieFlow.photoFile = null;
|
|
106
|
+
this.selfieFlow.recordingFile = null;
|
|
107
|
+
this.showError = true;
|
|
108
|
+
}
|
|
109
|
+
async endFlow() {
|
|
108
110
|
if (!this.selfieFlow.photoDone) {
|
|
109
111
|
return;
|
|
110
112
|
}
|
|
@@ -114,11 +116,13 @@ export class UserLiveness {
|
|
|
114
116
|
if (!this.selfieFlow.verificationFinished) {
|
|
115
117
|
return;
|
|
116
118
|
}
|
|
119
|
+
store.recordingRetryCount = 0;
|
|
120
|
+
await this.baseComponent.finalize();
|
|
117
121
|
store.flowStatus = FlowStatus.COMPLETE;
|
|
118
122
|
}
|
|
119
123
|
render() {
|
|
120
124
|
let howTo = h("how-to-info", { idSide: "" });
|
|
121
|
-
let capture = h("selfie-capture", {
|
|
125
|
+
let capture = h("selfie-capture", { id: "camera" });
|
|
122
126
|
let error = h("capture-error", { type: "LIVENESS" });
|
|
123
127
|
return this.showHowTo ? howTo : this.showError ? error : capture;
|
|
124
128
|
}
|
|
@@ -133,30 +137,6 @@ export class UserLiveness {
|
|
|
133
137
|
"$": ["user-liveness.css"]
|
|
134
138
|
};
|
|
135
139
|
}
|
|
136
|
-
static get properties() {
|
|
137
|
-
return {
|
|
138
|
-
"device": {
|
|
139
|
-
"type": "unknown",
|
|
140
|
-
"mutable": false,
|
|
141
|
-
"complexType": {
|
|
142
|
-
"original": "Device",
|
|
143
|
-
"resolved": "Device",
|
|
144
|
-
"references": {
|
|
145
|
-
"Device": {
|
|
146
|
-
"location": "import",
|
|
147
|
-
"path": "../../../models/IDevice"
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
},
|
|
151
|
-
"required": false,
|
|
152
|
-
"optional": false,
|
|
153
|
-
"docs": {
|
|
154
|
-
"tags": [],
|
|
155
|
-
"text": ""
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
};
|
|
159
|
-
}
|
|
160
140
|
static get states() {
|
|
161
141
|
return {
|
|
162
142
|
"showError": {},
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import { h } from '@stencil/core';
|
|
2
|
-
import { initDevice } from '../../helpers';
|
|
3
2
|
import { SessionKeys } from '../../helpers/textValues';
|
|
4
|
-
import { ApiCall } from '../../helpers/ApiCall';
|
|
5
3
|
import store from '../../helpers/store';
|
|
6
4
|
import { ML5 } from '../../helpers/ML5';
|
|
7
5
|
import { FlowStatus } from '../../models/FlowStatus';
|
|
@@ -9,6 +7,7 @@ import Events from '../../helpers/Events';
|
|
|
9
7
|
import * as uuid from 'uuid';
|
|
10
8
|
import packageJson from '../../../package.json';
|
|
11
9
|
import { getLogMessage } from '../../utils/utils';
|
|
10
|
+
import { BaseComponent } from '../base-component';
|
|
12
11
|
export class IdentificationComponent {
|
|
13
12
|
async onTokenChange(newValue, _oldValue) {
|
|
14
13
|
if (store.debug)
|
|
@@ -75,7 +74,7 @@ export class IdentificationComponent {
|
|
|
75
74
|
}
|
|
76
75
|
agreementAcceptanceEmitted(data) {
|
|
77
76
|
try {
|
|
78
|
-
this.apiCall.GenerateAgreement(data.detail.agreementType);
|
|
77
|
+
this.baseComponent.apiCall.GenerateAgreement(data.detail.agreementType);
|
|
79
78
|
}
|
|
80
79
|
catch (e) {
|
|
81
80
|
this.apiErrorEmitter(e, 'Agreement Acceptance');
|
|
@@ -97,7 +96,7 @@ export class IdentificationComponent {
|
|
|
97
96
|
else {
|
|
98
97
|
this.errorTitle = data;
|
|
99
98
|
}
|
|
100
|
-
await this.apiCall.AddLog(apiLogData, getLogMessage(this.order_id, this.redirect_id, this.token));
|
|
99
|
+
await this.baseComponent.apiCall.AddLog(apiLogData, getLogMessage(this.order_id, this.redirect_id, this.token));
|
|
101
100
|
Events.flowError(data);
|
|
102
101
|
store.flowStatus = FlowStatus.ERROREND;
|
|
103
102
|
}
|
|
@@ -112,7 +111,8 @@ export class IdentificationComponent {
|
|
|
112
111
|
this.idSide = '';
|
|
113
112
|
this.errorMessage = undefined;
|
|
114
113
|
this.errorTitle = undefined;
|
|
115
|
-
this.
|
|
114
|
+
this.baseComponent = new BaseComponent(null);
|
|
115
|
+
this.baseComponent.setErrorCallback(this.apiErrorEmitter);
|
|
116
116
|
}
|
|
117
117
|
async componentWillLoad() {
|
|
118
118
|
Events.init(window);
|
|
@@ -183,7 +183,6 @@ export class IdentificationComponent {
|
|
|
183
183
|
flowStatusToSet = FlowStatus.LANDING;
|
|
184
184
|
}
|
|
185
185
|
}
|
|
186
|
-
this.apiCall = new ApiCall();
|
|
187
186
|
await this.initializeRequest();
|
|
188
187
|
store.flowStatus = flowStatusToSet;
|
|
189
188
|
}
|
|
@@ -202,16 +201,16 @@ export class IdentificationComponent {
|
|
|
202
201
|
}
|
|
203
202
|
try {
|
|
204
203
|
if (store.debug)
|
|
205
|
-
this.apiCall.AddLog('init log', this.logInit);
|
|
204
|
+
this.baseComponent.apiCall.AddLog('init log', this.logInit);
|
|
206
205
|
}
|
|
207
206
|
catch (_a) { }
|
|
208
207
|
try {
|
|
209
|
-
if (!
|
|
208
|
+
if (!store.device.isMobile && store.redirectId == '') {
|
|
210
209
|
store.redirectId = uuid.v4();
|
|
211
210
|
this.redirect_id = store.redirectId;
|
|
212
211
|
}
|
|
213
212
|
if (store.token != '' && (store.requestId != '' || store.redirectId != '')) {
|
|
214
|
-
store.initialised = await this.apiCall.AddIdentificationRequest(
|
|
213
|
+
store.initialised = await this.baseComponent.apiCall.AddIdentificationRequest(store.device, packageJson.version);
|
|
215
214
|
if (!this.order_id || this.order_id == '') {
|
|
216
215
|
this.order_id = store.requestId;
|
|
217
216
|
}
|
|
@@ -224,9 +223,9 @@ export class IdentificationComponent {
|
|
|
224
223
|
}
|
|
225
224
|
render() {
|
|
226
225
|
let currentBlock = h("div", null);
|
|
227
|
-
if (
|
|
226
|
+
if (store.device.isMobile || store.environment == 'DEMO') {
|
|
228
227
|
if (store.flowStatus == FlowStatus.LANDING) {
|
|
229
|
-
currentBlock = h("landing-validation",
|
|
228
|
+
currentBlock = h("landing-validation", null);
|
|
230
229
|
}
|
|
231
230
|
}
|
|
232
231
|
else {
|
|
@@ -245,13 +244,13 @@ export class IdentificationComponent {
|
|
|
245
244
|
currentBlock = h("sms-code-validation", null);
|
|
246
245
|
}
|
|
247
246
|
if (store.flowStatus == FlowStatus.ID && !store.hasIdBack) {
|
|
248
|
-
currentBlock = h("id-single-side", { id: "idFront"
|
|
247
|
+
currentBlock = h("id-single-side", { id: "idFront" });
|
|
249
248
|
}
|
|
250
249
|
if (store.flowStatus == FlowStatus.ID && store.hasIdBack) {
|
|
251
|
-
currentBlock = h("id-double-side", { id: "idFront"
|
|
250
|
+
currentBlock = h("id-double-side", { id: "idFront" });
|
|
252
251
|
}
|
|
253
252
|
if (store.flowStatus == FlowStatus.LIVENESS) {
|
|
254
|
-
currentBlock = h("user-liveness", {
|
|
253
|
+
currentBlock = h("user-liveness", { id: "camera" });
|
|
255
254
|
}
|
|
256
255
|
if (store.flowStatus == FlowStatus.COMPLETE) {
|
|
257
256
|
currentBlock = h("end-redirect", null);
|
|
@@ -260,7 +259,7 @@ export class IdentificationComponent {
|
|
|
260
259
|
currentBlock = h("error-end", { errorTitle: this.errorTitle, message: this.errorMessage });
|
|
261
260
|
}
|
|
262
261
|
if (store.flowStatus == FlowStatus.CAMERAERROR) {
|
|
263
|
-
currentBlock = h("camera-error",
|
|
262
|
+
currentBlock = h("camera-error", null);
|
|
264
263
|
}
|
|
265
264
|
return h("div", null, currentBlock);
|
|
266
265
|
}
|
|
@@ -2,7 +2,7 @@ import { OrderStatuses } from '../models/OrderStatuses';
|
|
|
2
2
|
import store from './store';
|
|
3
3
|
import { ApiUrls } from './textValues';
|
|
4
4
|
import { FlowStatus } from '../models/FlowStatus';
|
|
5
|
-
import { FlowSteps } from '../models/FlowSteps';
|
|
5
|
+
import { FlowMoments, FlowSteps } from '../models/FlowSteps';
|
|
6
6
|
export class ApiCall {
|
|
7
7
|
constructor() {
|
|
8
8
|
this.toBase64 = (file) => new Promise((resolve, reject) => {
|
|
@@ -123,8 +123,8 @@ export class ApiCall {
|
|
|
123
123
|
}
|
|
124
124
|
catch (_a) { }
|
|
125
125
|
}
|
|
126
|
-
async AddStep(step) {
|
|
127
|
-
let data = { requestId: store.requestId, redirectId: store.redirectId, step: FlowSteps[step] };
|
|
126
|
+
async AddStep(step, moment) {
|
|
127
|
+
let data = { requestId: store.requestId, redirectId: store.redirectId, step: FlowSteps[step], moment: FlowMoments[moment] };
|
|
128
128
|
let result = await this.post(this.urls.AddStep, JSON.stringify(data));
|
|
129
129
|
return result.saved;
|
|
130
130
|
}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Browser } from '../models/IDevice';
|
|
1
2
|
import store from './store';
|
|
2
3
|
export class Cameras {
|
|
3
4
|
async GetCameras(deviceInfo) {
|
|
@@ -9,7 +10,7 @@ export class Cameras {
|
|
|
9
10
|
const stream = await navigator.mediaDevices.getUserMedia(updatedConstraints);
|
|
10
11
|
stream.getVideoTracks().forEach(track => {
|
|
11
12
|
var _a, _b;
|
|
12
|
-
if (deviceInfo.
|
|
13
|
+
if (deviceInfo.browser === Browser.Firefox) {
|
|
13
14
|
const settings = track.getSettings();
|
|
14
15
|
let facingMode = settings.facingMode && settings.facingMode.length > 0 ? settings.facingMode[0] : '';
|
|
15
16
|
facingMode = facingMode === 'e' ? 'environment' : facingMode;
|
|
@@ -75,7 +76,7 @@ export class Cameras {
|
|
|
75
76
|
exact: selectedDeviceId,
|
|
76
77
|
};
|
|
77
78
|
}
|
|
78
|
-
if (device.
|
|
79
|
+
if (device.isDesktop) {
|
|
79
80
|
constraints.video.width = { ideal: 1280 };
|
|
80
81
|
}
|
|
81
82
|
else {
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { Browser, DesktopOS, MobileOS } from '../models/IDevice';
|
|
2
|
+
export class DeviceDetection {
|
|
3
|
+
constructor() {
|
|
4
|
+
var _a, _b, _c, _d;
|
|
5
|
+
this.supportedScreenOrientation = (_b = (_a = ((screen === null || screen === void 0 ? void 0 : screen.orientation) || {}).type) !== null && _a !== void 0 ? _a : screen.mozOrientation) !== null && _b !== void 0 ? _b : screen.msOrientation;
|
|
6
|
+
this.safariScreenOrientation = !(screen === null || screen === void 0 ? void 0 : screen.orientation) && matchMedia('(orientation: portrait)').matches ? 'portrait-primary' : 'landscape-primary';
|
|
7
|
+
this.initialScreenOrientation = (_d = (_c = this.supportedScreenOrientation) !== null && _c !== void 0 ? _c : this.safariScreenOrientation) !== null && _d !== void 0 ? _d : 'portrait-primary';
|
|
8
|
+
this.userAgent = navigator.userAgent || navigator.vendor || window.opera || undefined;
|
|
9
|
+
this.isMobile = this.isMobileDevice();
|
|
10
|
+
this.isTablet = this.isTabletDevice();
|
|
11
|
+
this.isDesktop = !this.isMobile && !this.isTablet;
|
|
12
|
+
}
|
|
13
|
+
// Device typology
|
|
14
|
+
isMobileDevice() {
|
|
15
|
+
const regexs = [/(Android)(.+)(Mobile)/i, /BlackBerry/i, /iPhone|iPod/i, /Opera Mini/i, /IEMobile/i];
|
|
16
|
+
return regexs.some(b => this.userAgent.match(b));
|
|
17
|
+
}
|
|
18
|
+
isTabletDevice() {
|
|
19
|
+
const regex = /(ipad|tablet|(android(?!.*mobile))|(windows(?!.*phone)(.*touch))|kindle|playbook|silk|(puffin(?!.*(IP|AP|WP))))/;
|
|
20
|
+
return regex.test(this.userAgent.toLowerCase());
|
|
21
|
+
}
|
|
22
|
+
// Device Operating System
|
|
23
|
+
getMobileOS() {
|
|
24
|
+
if (this.isMobileDevice()) {
|
|
25
|
+
if (/windows phone/i.test(this.userAgent))
|
|
26
|
+
return MobileOS.WindowsPhone;
|
|
27
|
+
else if (/android/i.test(this.userAgent))
|
|
28
|
+
return MobileOS.Android;
|
|
29
|
+
else if (/iPad|iPhone|iPod/.test(this.userAgent) && !window.MSStream)
|
|
30
|
+
return MobileOS.iOS;
|
|
31
|
+
return MobileOS.Unknown;
|
|
32
|
+
}
|
|
33
|
+
else
|
|
34
|
+
return undefined;
|
|
35
|
+
}
|
|
36
|
+
getDesktopOS() {
|
|
37
|
+
if (this.isDesktop) {
|
|
38
|
+
if (this.userAgent.indexOf('Win') !== -1)
|
|
39
|
+
return DesktopOS.Windows;
|
|
40
|
+
else if (this.userAgent.indexOf('Mac') !== -1)
|
|
41
|
+
return DesktopOS.MacOS;
|
|
42
|
+
else if (this.userAgent.indexOf('X11') !== -1)
|
|
43
|
+
return DesktopOS.Unix;
|
|
44
|
+
else if (this.userAgent.indexOf('Linux') !== -1)
|
|
45
|
+
return DesktopOS.Linux;
|
|
46
|
+
return DesktopOS.Unknown;
|
|
47
|
+
}
|
|
48
|
+
else
|
|
49
|
+
return undefined;
|
|
50
|
+
}
|
|
51
|
+
getDeviceOS() {
|
|
52
|
+
var _a;
|
|
53
|
+
return (_a = this.getMobileOS()) !== null && _a !== void 0 ? _a : this.getDesktopOS();
|
|
54
|
+
}
|
|
55
|
+
getBrowser() {
|
|
56
|
+
var isChrome = /chrome/i.test(this.userAgent);
|
|
57
|
+
if (isChrome)
|
|
58
|
+
return Browser.Chrome;
|
|
59
|
+
if (/firefox/i.test(navigator.userAgent))
|
|
60
|
+
return Browser.Firefox;
|
|
61
|
+
else if (!isChrome && /safari/i.test(navigator.userAgent))
|
|
62
|
+
return Browser.Safari;
|
|
63
|
+
else
|
|
64
|
+
return Browser.Unknown;
|
|
65
|
+
}
|
|
66
|
+
getDevice() {
|
|
67
|
+
var device = {
|
|
68
|
+
isDesktop: this.isDesktop,
|
|
69
|
+
desktopOS: this.getDesktopOS(),
|
|
70
|
+
isWindowsDesktop: this.getDeviceOS() === DesktopOS.Windows,
|
|
71
|
+
isLinuxOrUnixDesktop: this.getDeviceOS() === DesktopOS.Linux || this.getDeviceOS() === DesktopOS.Unix,
|
|
72
|
+
isMobile: this.isMobile,
|
|
73
|
+
mobileOS: this.getMobileOS(),
|
|
74
|
+
isAndroidDevice: this.getDeviceOS() === MobileOS.Android,
|
|
75
|
+
isAppleDevice: this.getDeviceOS() === MobileOS.iOS || this.getDeviceOS() === DesktopOS.MacOS,
|
|
76
|
+
isUnknownMobileDevice: this.getDeviceOS() === MobileOS.Unknown,
|
|
77
|
+
browser: this.getBrowser(),
|
|
78
|
+
isTablet: this.isTablet,
|
|
79
|
+
initialScreenOrientation: this.initialScreenOrientation,
|
|
80
|
+
};
|
|
81
|
+
return device;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
@@ -2,6 +2,15 @@ export default class Events {
|
|
|
2
2
|
static init(element) {
|
|
3
3
|
this.callingModule = element;
|
|
4
4
|
}
|
|
5
|
+
static flowEvent(step, moment) {
|
|
6
|
+
const eventName = `ect-${step.toString()}-${moment.toString()}-event`;
|
|
7
|
+
this.callingModule.dispatchEvent(new CustomEvent(eventName, {
|
|
8
|
+
detail: {},
|
|
9
|
+
bubbles: true,
|
|
10
|
+
cancelable: true,
|
|
11
|
+
composed: true,
|
|
12
|
+
}));
|
|
13
|
+
}
|
|
5
14
|
static flowStarted() {
|
|
6
15
|
this.callingModule.dispatchEvent(new CustomEvent('ect-started', {
|
|
7
16
|
detail: {},
|
|
@@ -3,6 +3,8 @@ import { FaceML5Detector } from '../libs/FaceML5Detector/FaceML5Detector';
|
|
|
3
3
|
import { FacePose } from '../libs/FaceML5Detector/FacePose';
|
|
4
4
|
import { FacePosePick } from '../libs/FaceML5Detector/FacePose';
|
|
5
5
|
import { addExifInImg } from './security';
|
|
6
|
+
import store from './store';
|
|
7
|
+
import { Browser, MobileOS } from '../models/IDevice';
|
|
6
8
|
var ImageFormat;
|
|
7
9
|
(function (ImageFormat) {
|
|
8
10
|
ImageFormat["JPEG"] = "image/jpeg";
|
|
@@ -44,7 +46,7 @@ export class Stream {
|
|
|
44
46
|
setVerificationFinished(fun) {
|
|
45
47
|
this.verificationFinished = fun;
|
|
46
48
|
}
|
|
47
|
-
constructor(
|
|
49
|
+
constructor(_modelPath) {
|
|
48
50
|
this.streamPaused = false;
|
|
49
51
|
this.recordedChunks = [];
|
|
50
52
|
this.videoSize = { width: 0, height: 0 };
|
|
@@ -55,13 +57,12 @@ export class Stream {
|
|
|
55
57
|
// this.dropMask();
|
|
56
58
|
// if (this.faceDetection) Detector.getInstance().stopDetector();
|
|
57
59
|
};
|
|
58
|
-
this.
|
|
59
|
-
this.
|
|
60
|
-
this.faceML5Detector = FaceML5Detector.getInstance(this, device.isMobile);
|
|
60
|
+
this.idML5Detector = IDML5Detector.getInstance(this, store.device.isMobile);
|
|
61
|
+
this.faceML5Detector = FaceML5Detector.getInstance(this, store.device.isMobile);
|
|
61
62
|
}
|
|
62
|
-
static getInstance(
|
|
63
|
+
static getInstance(modelPath) {
|
|
63
64
|
if (!Stream.instance) {
|
|
64
|
-
Stream.instance = new Stream(
|
|
65
|
+
Stream.instance = new Stream(modelPath);
|
|
65
66
|
}
|
|
66
67
|
return Stream.instance;
|
|
67
68
|
}
|
|
@@ -122,7 +123,7 @@ export class Stream {
|
|
|
122
123
|
recordStream() {
|
|
123
124
|
var options = { mimeType: Stream.webmMimeType.mime, videoBitsPerSecond: 1500000 };
|
|
124
125
|
if (!MediaRecorder.isTypeSupported(options.mimeType)) {
|
|
125
|
-
if (
|
|
126
|
+
if (store.device.mobileOS == MobileOS.iOS || store.device.browser == Browser.Safari)
|
|
126
127
|
options.mimeType = Stream.mp4MimeType.mime;
|
|
127
128
|
}
|
|
128
129
|
this.recordedChunks = [];
|
|
@@ -177,7 +178,7 @@ export class Stream {
|
|
|
177
178
|
const context = canvas.getContext('2d');
|
|
178
179
|
context.drawImage(this.videoElement, 0, 0, canvas.width, canvas.height);
|
|
179
180
|
canvas.toBlob((frame) => {
|
|
180
|
-
if (frame.type === ImageFormat.JPEG && !
|
|
181
|
+
if (frame.type === ImageFormat.JPEG && !store.device.isAppleDevice) {
|
|
181
182
|
try {
|
|
182
183
|
addExifInImg(frame, this.stream.getTracks()[0], this.videoSize).then(updatedFrame => resolve(updatedFrame));
|
|
183
184
|
}
|
|
@@ -1,36 +1,3 @@
|
|
|
1
|
-
export const initDevice = () => {
|
|
2
|
-
let device = {
|
|
3
|
-
isMobile: false,
|
|
4
|
-
isAndroid: false,
|
|
5
|
-
isLinux: false,
|
|
6
|
-
isMac: false,
|
|
7
|
-
isWin: false,
|
|
8
|
-
isChrome: false,
|
|
9
|
-
isFirefox: false,
|
|
10
|
-
isSafari: false,
|
|
11
|
-
isIos: false,
|
|
12
|
-
};
|
|
13
|
-
device.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
|
|
14
|
-
device.isAndroid = /Android/i.test(navigator.userAgent);
|
|
15
|
-
device.isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
16
|
-
device.isLinux = /linux/i.test(navigator.platform);
|
|
17
|
-
device.isMac = /mac/i.test(navigator.platform);
|
|
18
|
-
device.isWin = /win/i.test(navigator.platform);
|
|
19
|
-
device.isChrome = /chrome/i.test(navigator.userAgent);
|
|
20
|
-
device.isFirefox = /firefox/i.test(navigator.userAgent);
|
|
21
|
-
device.isSafari = !device.isChrome ? /safari/i.test(navigator.userAgent) : false;
|
|
22
|
-
device.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
|
|
23
|
-
device.isAndroid = /Android/i.test(navigator.userAgent);
|
|
24
|
-
device.isIos = /iPhone|iPad|iPod/i.test(navigator.userAgent);
|
|
25
|
-
if (!device.isIos) {
|
|
26
|
-
const isIPad = navigator.userAgent.match(/Mac/) && navigator.maxTouchPoints && navigator.maxTouchPoints > 2;
|
|
27
|
-
if (isIPad) {
|
|
28
|
-
device.isIos = true;
|
|
29
|
-
device.isMobile = true;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
return device;
|
|
33
|
-
};
|
|
34
1
|
export const convertToDataUrl = async (file) => {
|
|
35
2
|
return new Promise(async (resolve) => {
|
|
36
3
|
let arr = [];
|
|
@@ -1,16 +1,22 @@
|
|
|
1
1
|
export var FlowSteps;
|
|
2
2
|
(function (FlowSteps) {
|
|
3
|
-
FlowSteps[FlowSteps["MobileRedirect"] =
|
|
4
|
-
FlowSteps[FlowSteps["Landing"] =
|
|
5
|
-
FlowSteps[FlowSteps["Agreements"] =
|
|
6
|
-
FlowSteps[FlowSteps["OtpSend"] =
|
|
7
|
-
FlowSteps[FlowSteps["OtpCheck"] =
|
|
8
|
-
FlowSteps[FlowSteps["CiFrontHowTo"] =
|
|
9
|
-
FlowSteps[FlowSteps["CiFront"] =
|
|
10
|
-
FlowSteps[FlowSteps["CiBackHowTo"] =
|
|
11
|
-
FlowSteps[FlowSteps["CiBack"] =
|
|
12
|
-
FlowSteps[FlowSteps["SelfieHowTo"] =
|
|
13
|
-
FlowSteps[FlowSteps["Selfie"] =
|
|
14
|
-
FlowSteps[FlowSteps["End"] =
|
|
15
|
-
FlowSteps[FlowSteps["CameraError"] =
|
|
3
|
+
FlowSteps[FlowSteps["MobileRedirect"] = 'mobile-redirect'] = "MobileRedirect";
|
|
4
|
+
FlowSteps[FlowSteps["Landing"] = 'landing'] = "Landing";
|
|
5
|
+
FlowSteps[FlowSteps["Agreements"] = 'agreements'] = "Agreements";
|
|
6
|
+
FlowSteps[FlowSteps["OtpSend"] = 'otp-send'] = "OtpSend";
|
|
7
|
+
FlowSteps[FlowSteps["OtpCheck"] = 'otp-check'] = "OtpCheck";
|
|
8
|
+
FlowSteps[FlowSteps["CiFrontHowTo"] = 'ci-front-how-to'] = "CiFrontHowTo";
|
|
9
|
+
FlowSteps[FlowSteps["CiFront"] = 'ci-front'] = "CiFront";
|
|
10
|
+
FlowSteps[FlowSteps["CiBackHowTo"] = 'ci-back-how-to'] = "CiBackHowTo";
|
|
11
|
+
FlowSteps[FlowSteps["CiBack"] = 'ci-back'] = "CiBack";
|
|
12
|
+
FlowSteps[FlowSteps["SelfieHowTo"] = 'selfie-how-to'] = "SelfieHowTo";
|
|
13
|
+
FlowSteps[FlowSteps["Selfie"] = 'selfie'] = "Selfie";
|
|
14
|
+
FlowSteps[FlowSteps["End"] = 'end'] = "End";
|
|
15
|
+
FlowSteps[FlowSteps["CameraError"] = 'camera-error'] = "CameraError";
|
|
16
16
|
})(FlowSteps || (FlowSteps = {}));
|
|
17
|
+
export var FlowMoments;
|
|
18
|
+
(function (FlowMoments) {
|
|
19
|
+
FlowMoments[FlowMoments["Initialized"] = 'initialized'] = "Initialized";
|
|
20
|
+
FlowMoments[FlowMoments["Finalized"] = 'finalized'] = "Finalized";
|
|
21
|
+
FlowMoments[FlowMoments["None"] = 'none'] = "None";
|
|
22
|
+
})(FlowMoments || (FlowMoments = {}));
|
|
@@ -1 +1,22 @@
|
|
|
1
|
-
export
|
|
1
|
+
export var MobileOS;
|
|
2
|
+
(function (MobileOS) {
|
|
3
|
+
MobileOS["Android"] = "android";
|
|
4
|
+
MobileOS["iOS"] = "ios";
|
|
5
|
+
MobileOS["Unknown"] = "unknown";
|
|
6
|
+
MobileOS["WindowsPhone"] = "Windows Phone";
|
|
7
|
+
})(MobileOS || (MobileOS = {}));
|
|
8
|
+
export var DesktopOS;
|
|
9
|
+
(function (DesktopOS) {
|
|
10
|
+
DesktopOS["Linux"] = "linux";
|
|
11
|
+
DesktopOS["MacOS"] = "mac_os";
|
|
12
|
+
DesktopOS["Unix"] = "unix";
|
|
13
|
+
DesktopOS["Unknown"] = "unknown";
|
|
14
|
+
DesktopOS["Windows"] = "windows";
|
|
15
|
+
})(DesktopOS || (DesktopOS = {}));
|
|
16
|
+
export var Browser;
|
|
17
|
+
(function (Browser) {
|
|
18
|
+
Browser["Chrome"] = "chrome";
|
|
19
|
+
Browser["Firefox"] = "firefox";
|
|
20
|
+
Browser["Safari"] = "safari";
|
|
21
|
+
Browser["Unknown"] = "unknown";
|
|
22
|
+
})(Browser || (Browser = {}));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|