@regulaforensics/idv-capture-web 0.1.114-nightly → 0.1.116-rc
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/README.md +174 -2
- package/dist/{index-BbNKUhQM.js → index-7D6yWl-J.js} +35 -31
- package/dist/{index-B6hxrk0b.js → index-B1U7Xfsi.js} +913 -910
- package/dist/{index-Dwq1rPYR.js → index-q2zL8shY.js} +7790 -7684
- package/dist/index.d.ts +22 -38
- package/dist/main.iife.js +69 -69
- package/dist/main.js +9 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,175 @@
|
|
|
1
|
-
# Idv
|
|
1
|
+
# Idv Web Component
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
- [Overview](#overview)
|
|
4
|
+
- [Before you start](#before-you-start)
|
|
5
|
+
- [Compatibility](#compatibility)
|
|
6
|
+
- [Install via NPM](#install-via-npm)
|
|
7
|
+
- [Install via CDN](#install-via-cdn)
|
|
8
|
+
- [Events](#events)
|
|
9
|
+
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
## Overview
|
|
13
|
+
|
|
14
|
+
The available component is:
|
|
15
|
+
|
|
16
|
+
- `idv-flow`
|
|
17
|
+
|
|
18
|
+
The web components are based on WebAssembly (.wasm module), which is our core C++ code compiled for use in browsers and wrapped with a JS layer. It is exactly the same code as built for all the other platform SDK packages.
|
|
19
|
+
|
|
20
|
+
## Before you start
|
|
21
|
+
|
|
22
|
+
Please note that:
|
|
23
|
+
|
|
24
|
+
- The components work **only** under the HTTPS protocol on the website.
|
|
25
|
+
- The components library does register the components on the web page itself, so make sure to import the library to your web site before adding the components to the web page code.
|
|
26
|
+
|
|
27
|
+
## Compatibility
|
|
28
|
+
|
|
29
|
+
| Devices |  |  |  |
|
|
30
|
+
| :------------------- | :-----------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |
|
|
31
|
+
| **Mobile (iOS)** | 99 (iOS14.4+) | 99 (iOS14.4+) | 11 |
|
|
32
|
+
| **Mobile (Android)** | 69 | 63 | - |
|
|
33
|
+
| **Desktop** | 66 | 69 | 11 |
|
|
34
|
+
|
|
35
|
+
## Install via NPM
|
|
36
|
+
|
|
37
|
+
On the command line, navigate to the root directory of your project:
|
|
38
|
+
|
|
39
|
+
```
|
|
40
|
+
cd /path/to/project
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
Run the following command:
|
|
44
|
+
|
|
45
|
+
```
|
|
46
|
+
npm init
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
Answer the questions in the command line questionnaire.
|
|
50
|
+
|
|
51
|
+
Install idv-capture-web:
|
|
52
|
+
|
|
53
|
+
```
|
|
54
|
+
npm i @regulaforensics/idv-capture-web
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
Create `index.html` and `index.js` files in the root directory of the project.
|
|
58
|
+
|
|
59
|
+
Import `@regulaforensics/idv-capture-web` into your `index.js`:
|
|
60
|
+
|
|
61
|
+
```javascript
|
|
62
|
+
import './node_modules/@regulaforensics/idv-capture-web/dist/main.js';
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
In `index.html` connect `index.js` and add the name of the component you want to use. Available components:
|
|
66
|
+
|
|
67
|
+
`<idv-flow></idv-flow>`
|
|
68
|
+
|
|
69
|
+
For example:
|
|
70
|
+
|
|
71
|
+
```html
|
|
72
|
+
<!DOCTYPE html>
|
|
73
|
+
<html>
|
|
74
|
+
<head>
|
|
75
|
+
<meta charset="utf-8" />
|
|
76
|
+
<title>My app</title>
|
|
77
|
+
</head>
|
|
78
|
+
<body>
|
|
79
|
+
<idv-flow></idv-flow>
|
|
80
|
+
<script type="module" src="index.js"></script>
|
|
81
|
+
</body>
|
|
82
|
+
</html>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
## Install via CDN
|
|
86
|
+
|
|
87
|
+
Connect the script in your `.html` file. CDN link: `unpkg.com/:package@:version/:file`
|
|
88
|
+
|
|
89
|
+
For example:
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<script src="https://unpkg.com/@regulaforensics/idv-capture-web@latest/dist/main.iife.js"></script>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Add the name of the component to the html, as in the example above.
|
|
96
|
+
|
|
97
|
+
## Setup
|
|
98
|
+
|
|
99
|
+
Use `IdvIntegrationService` to setup idv flow.
|
|
100
|
+
|
|
101
|
+
General example of the integration step by step
|
|
102
|
+
|
|
103
|
+
```javascript
|
|
104
|
+
/** create service */
|
|
105
|
+
const service = new IdvIntegrationService();
|
|
106
|
+
|
|
107
|
+
/** create events listener, which set to the service */
|
|
108
|
+
const idvEventListener = (event) => {
|
|
109
|
+
console.log(event);
|
|
110
|
+
};
|
|
111
|
+
|
|
112
|
+
/** set up service settings */
|
|
113
|
+
service.sessionRestoreMode = true;
|
|
114
|
+
service.eventListener = idvEventListener;
|
|
115
|
+
|
|
116
|
+
/** for convenience, we will use an asynchronous function. You also can use Promises */
|
|
117
|
+
(async function () {
|
|
118
|
+
/** set modules */
|
|
119
|
+
const initResilt = await service.initialize({
|
|
120
|
+
modulesConfig: { docreader: { devLicense: 'yourBase64license' } },
|
|
121
|
+
includedModules: [IdvModules.LIVENESS, IdvModules.DOC_READER],
|
|
122
|
+
});
|
|
123
|
+
/** if something goes wrong, the command error will contain an error field. */
|
|
124
|
+
if (initResilt.error) {
|
|
125
|
+
console.log(initResilt.error);
|
|
126
|
+
return;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
const configureResult = await service.configure({
|
|
130
|
+
host: 'https://your.host.com',
|
|
131
|
+
userName: '',
|
|
132
|
+
password: '',
|
|
133
|
+
});
|
|
134
|
+
|
|
135
|
+
if (configureResult.error) {
|
|
136
|
+
console.log(configureResult.error);
|
|
137
|
+
return;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
const prepareResult = await service.prepareWorkflow({
|
|
141
|
+
workfowId: 'your_workflow_id',
|
|
142
|
+
});
|
|
143
|
+
|
|
144
|
+
if (prepareResult.error) {
|
|
145
|
+
console.log(prepareResult.error);
|
|
146
|
+
return;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
const metadata = { anyMetadata: 'Any Metadata' };
|
|
150
|
+
const startWorkflowResult = await service?.startWorkflow(metadata);
|
|
151
|
+
|
|
152
|
+
if (startWorkflowResult.error) {
|
|
153
|
+
console.log(startWorkflowResult.error);
|
|
154
|
+
return;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
console.log('WORKFLOW FINISHED :', startWorkflowResult);
|
|
158
|
+
})();
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
## Events
|
|
162
|
+
|
|
163
|
+
You can subscribe to the component events.
|
|
164
|
+
|
|
165
|
+
For example:
|
|
166
|
+
|
|
167
|
+
```javascript
|
|
168
|
+
/** your listener */
|
|
169
|
+
const idvEventListener = (event) => {
|
|
170
|
+
console.log(event);
|
|
171
|
+
};
|
|
172
|
+
|
|
173
|
+
const service = new IdvIntegrationService();
|
|
174
|
+
service.eventListener = idvEventListener;
|
|
175
|
+
```
|
|
@@ -22,7 +22,7 @@ var b1 = (e) => {
|
|
|
22
22
|
throw l;
|
|
23
23
|
}, "return" in r && i("return"), o;
|
|
24
24
|
};
|
|
25
|
-
import { B as cc, r as Bs, j as CE } from "./index-
|
|
25
|
+
import { B as cc, r as Bs, j as CE } from "./index-q2zL8shY.js";
|
|
26
26
|
var KT = Object.defineProperty, qT = Object.defineProperties, QT = Object.getOwnPropertyDescriptors, SE = Object.getOwnPropertySymbols, JT = Object.prototype.hasOwnProperty, XT = Object.prototype.propertyIsEnumerable, Fo = (e, r) => (r = Symbol[e]) ? r : Symbol.for("Symbol." + e), $T = (e) => {
|
|
27
27
|
throw TypeError(e);
|
|
28
28
|
}, gE = (e, r, t) => r in e ? KT(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, tt = (e, r) => {
|
|
@@ -24050,60 +24050,64 @@ function Sde(e, r) {
|
|
|
24050
24050
|
return (r === "string" ? String : Number)(e);
|
|
24051
24051
|
}
|
|
24052
24052
|
var n0 = !1, ls = function(r) {
|
|
24053
|
-
var t = r.perform, i = r.moduleProps, o = r.isProcessing, l = i.processParam, c = i.functionality, d = i.sessionId, p = Bs.useRef(null),
|
|
24053
|
+
var t = r.perform, i = r.moduleProps, o = r.isProcessing, l = i.processParam, c = i.functionality, d = i.sessionId, p = i.serviceToken, f = Bs.useRef(null), m = Bs.useRef(null), g = {
|
|
24054
24054
|
// '--main-color': 'var(--base-main-color)',
|
|
24055
24055
|
"--font-family": "var(--base-font-family)"
|
|
24056
|
-
},
|
|
24057
|
-
var
|
|
24058
|
-
if (
|
|
24059
|
-
var
|
|
24060
|
-
if (((
|
|
24061
|
-
var
|
|
24056
|
+
}, S = function(I) {
|
|
24057
|
+
var O;
|
|
24058
|
+
if (I.detail.action === ht.PROCESS_FINISHED) {
|
|
24059
|
+
var v, L, b;
|
|
24060
|
+
if (((v = I.detail.data) === null || v === void 0 ? void 0 : v.status) === ga.ERROR) {
|
|
24061
|
+
var T = I.detail.data.reason, N = new Kc({
|
|
24062
24062
|
errorCode: r0.INTERNAL_ERROR,
|
|
24063
|
-
underlyingError: "ErrorTypes." +
|
|
24064
|
-
}),
|
|
24063
|
+
underlyingError: "ErrorTypes." + T
|
|
24064
|
+
}), x = new Wc({
|
|
24065
24065
|
errorCode: t0.SCAN_ERROR,
|
|
24066
|
-
underlyingBaseError:
|
|
24066
|
+
underlyingBaseError: N
|
|
24067
24067
|
});
|
|
24068
|
-
t(
|
|
24068
|
+
t(x);
|
|
24069
24069
|
}
|
|
24070
|
-
var
|
|
24071
|
-
if (!(
|
|
24072
|
-
o && o(!0), window.RegulaDocumentSDK.finalizePackage().then(function(
|
|
24070
|
+
var P = (L = I.detail.data) === null || L === void 0 ? void 0 : L.status, F = P === 1, G = P === 2;
|
|
24071
|
+
if (!(F || G) || !((b = I.detail.data) !== null && b !== void 0 && b.response)) return;
|
|
24072
|
+
o && o(!0), window.RegulaDocumentSDK.finalizePackage().then(function(U) {
|
|
24073
24073
|
t({
|
|
24074
|
-
transactionId: (
|
|
24074
|
+
transactionId: (U == null ? void 0 : U.transactionId) || "",
|
|
24075
24075
|
has_nfc: !1,
|
|
24076
24076
|
cancel: !1
|
|
24077
24077
|
});
|
|
24078
|
-
}).catch(function(
|
|
24079
|
-
console.log("finalizePackage error: ",
|
|
24078
|
+
}).catch(function(U) {
|
|
24079
|
+
console.log("finalizePackage error: ", U), t({
|
|
24080
24080
|
transactionId: "",
|
|
24081
24081
|
cancel: !0,
|
|
24082
24082
|
has_nfc: !1
|
|
24083
24083
|
});
|
|
24084
24084
|
});
|
|
24085
24085
|
}
|
|
24086
|
-
(((
|
|
24086
|
+
(((O = I.detail) === null || O === void 0 ? void 0 : O.action) === ht.CLOSE || I.detail.action === ht.CAMERA_PROCESS_CLOSED) && t({
|
|
24087
24087
|
transactionId: "",
|
|
24088
24088
|
cancel: !0,
|
|
24089
24089
|
has_nfc: !1
|
|
24090
24090
|
});
|
|
24091
24091
|
};
|
|
24092
24092
|
return Bs.useEffect(function() {
|
|
24093
|
-
function
|
|
24094
|
-
return
|
|
24093
|
+
function C(v) {
|
|
24094
|
+
return v ? (v.internalScenario && (v.scenario = v.internalScenario), delete v.internalScenario, v) : {};
|
|
24095
24095
|
}
|
|
24096
|
-
var
|
|
24097
|
-
|
|
24096
|
+
var I = C(l);
|
|
24097
|
+
p && I !== null && I !== void 0 && I.backendProcessing && (I.backendProcessing.httpHeaders = {
|
|
24098
|
+
Authorization: "Connection ".concat(p)
|
|
24099
|
+
});
|
|
24100
|
+
var O = {
|
|
24101
|
+
processParam: mde({}, I)
|
|
24098
24102
|
};
|
|
24099
|
-
d && (
|
|
24103
|
+
d && (O.tag = d), window.RegulaDocumentSDK.recognizerProcessParam = O, window.RegulaDocumentSDK.imageProcessParam = {
|
|
24100
24104
|
processParam: {
|
|
24101
24105
|
scenario: CO.MrzAndLocate
|
|
24102
24106
|
}
|
|
24103
24107
|
};
|
|
24104
24108
|
}, []), Bs.useEffect(function() {
|
|
24105
|
-
var
|
|
24106
|
-
|
|
24109
|
+
var C = m.current;
|
|
24110
|
+
C && (C.settings = {
|
|
24107
24111
|
locale: "en",
|
|
24108
24112
|
startScreen: !1,
|
|
24109
24113
|
skipButton: c == null ? void 0 : c.showSkipNextPageButton,
|
|
@@ -24111,15 +24115,15 @@ var n0 = !1, ls = function(r) {
|
|
|
24111
24115
|
captureButton: c == null ? void 0 : c.showCaptureButton,
|
|
24112
24116
|
captureButtonDelay: c == null ? void 0 : c.showCaptureButtonDelayFromStart
|
|
24113
24117
|
});
|
|
24114
|
-
}, [
|
|
24115
|
-
var
|
|
24116
|
-
return
|
|
24117
|
-
|
|
24118
|
+
}, [m.current]), Bs.useEffect(function() {
|
|
24119
|
+
var C = f.current;
|
|
24120
|
+
return C && C.addEventListener("document-reader", S), function() {
|
|
24121
|
+
C && C.removeEventListener("document-reader", S);
|
|
24118
24122
|
};
|
|
24119
24123
|
}, []), /* @__PURE__ */ CE.jsx("div", { style: {
|
|
24120
24124
|
height: "100%",
|
|
24121
24125
|
position: "relative"
|
|
24122
|
-
}, ref:
|
|
24126
|
+
}, ref: f, children: /* @__PURE__ */ CE.jsx("document-reader", { style: g, ref: m }) });
|
|
24123
24127
|
};
|
|
24124
24128
|
ls.getSupportedTemplates = function() {
|
|
24125
24129
|
return [dD.DOC_READER];
|