@regulaforensics/idv-capture-web 0.1.115-nightly → 0.1.117-nightly
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-CcBag_Ev.js → index-CliH4iNU.js} +9030 -8954
- package/dist/{index-DiIS40wn.js → index-Jp_ULqVS.js} +5377 -5373
- package/dist/{index-C7Wol-rH.js → index-lx8YLsjT.js} +2742 -2732
- package/dist/index.d.ts +15 -38
- package/dist/main.iife.js +58 -58
- 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
|
+
workflowId: '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
|
+
```
|