@regulaforensics/vp-frontend-face-components 1.2.0 → 1.3.0
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 +58 -23
- package/dist/main.js +1 -1
- package/package.json +11 -6
package/README.md
CHANGED
|
@@ -1,21 +1,29 @@
|
|
|
1
|
-
# Table of
|
|
1
|
+
# Table of contents
|
|
2
2
|
1. [About](#about)
|
|
3
|
-
1. [
|
|
4
|
-
1. [Install via
|
|
5
|
-
1. [
|
|
6
|
-
1. [Component
|
|
7
|
-
1. [Component
|
|
8
|
-
1. [Component
|
|
3
|
+
1. [Compatibility](#compatibility)
|
|
4
|
+
1. [Install via NPM](#install-via-npm)
|
|
5
|
+
1. [Install via CDN](#install-via-cdn)
|
|
6
|
+
1. [Component settings](#component-settings)
|
|
7
|
+
1. [Component events](#component-events)
|
|
8
|
+
1. [Component response](#component-response)
|
|
9
|
+
1. [Component attributes](#component-attributes)
|
|
10
|
+
1. [Component customization](#component-customization)
|
|
9
11
|
1. [Examples](#examples)
|
|
10
12
|
|
|
11
13
|
---
|
|
12
14
|
|
|
13
|
-
<a name="about"></a>
|
|
14
15
|
## About
|
|
15
16
|
|
|
16
17
|
This package contains web components for face recognition.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
## Compatibility
|
|
20
|
+
|
|
21
|
+
| Devices |  |  |  |
|
|
22
|
+
|:---------------------|:-------------------------------------------------------------------------------------------------:|:----------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------:|
|
|
23
|
+
| **Mobile (iOS)** | 87 (iOS14.4+) | 30 (iOS14.4+) | 11 |
|
|
24
|
+
| **Mobile (Android)** | 96 | 94 | - |
|
|
25
|
+
| **Desktop** | 66 | 63 | 11 |
|
|
26
|
+
|
|
19
27
|
## Install via NPM
|
|
20
28
|
|
|
21
29
|
On the command line, navigate to the root directory of your project:
|
|
@@ -66,7 +74,6 @@ Example:
|
|
|
66
74
|
</html>
|
|
67
75
|
```
|
|
68
76
|
|
|
69
|
-
<a name="cdn"></a>
|
|
70
77
|
## Install via CDN
|
|
71
78
|
|
|
72
79
|
Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
|
|
@@ -74,12 +81,11 @@ Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:ve
|
|
|
74
81
|
Example:
|
|
75
82
|
|
|
76
83
|
```html
|
|
77
|
-
<script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@1.
|
|
84
|
+
<script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@1.2.0/dist/main.js"></script>
|
|
78
85
|
```
|
|
79
86
|
|
|
80
87
|
Add the name of the component to the html, as in the example above.
|
|
81
88
|
|
|
82
|
-
<a name="settings"></a>
|
|
83
89
|
## Component settings
|
|
84
90
|
|
|
85
91
|
### face-liveness
|
|
@@ -96,7 +102,6 @@ component.headers = {
|
|
|
96
102
|
}
|
|
97
103
|
```
|
|
98
104
|
|
|
99
|
-
<a name="events"></a>
|
|
100
105
|
## Component events
|
|
101
106
|
|
|
102
107
|
You can subscribe to component events. In cases of successful and unsuccessful work, the following events will be triggered:
|
|
@@ -112,7 +117,6 @@ const component = document.getElementsByTagName('face-capture')[0];
|
|
|
112
117
|
component.addEventListener('face-capture', () => alert('Event!'));
|
|
113
118
|
```
|
|
114
119
|
|
|
115
|
-
<a name="response"></a>
|
|
116
120
|
## Component response
|
|
117
121
|
|
|
118
122
|
You can get the response of the component in the ```detail``` field of the event object.
|
|
@@ -132,23 +136,54 @@ function listener(event) {
|
|
|
132
136
|
component.addEventListener('face-capture', listener);
|
|
133
137
|
```
|
|
134
138
|
|
|
135
|
-
<a name="attributes"></a>
|
|
136
139
|
## Component attributes
|
|
137
140
|
|
|
138
141
|
### face-capture
|
|
139
142
|
|
|
140
|
-
| Attribute
|
|
141
|
-
|
|
142
|
-
| **locale** | the language of the component |
|
|
143
|
+
| Attribute | Info | Default value | Values |
|
|
144
|
+
|:-----------|:------------------------------|:-------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
145
|
+
| **locale** | the language of the component | ```en``` | ```ru```, ```en```, ```de```, ```pl```, ```it```, ```hu```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
|
|
143
146
|
|
|
144
147
|
### face-liveness
|
|
145
148
|
|
|
146
|
-
| Attribute
|
|
147
|
-
|
|
148
|
-
| **locale** | the language of the component |
|
|
149
|
-
| **url**
|
|
149
|
+
| Attribute | Info | Default value | Values |
|
|
150
|
+
|:-----------|:------------------------------|:------------------------------------------:|:------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|
|
|
151
|
+
| **locale** | the language of the component | ```en``` | ```ru```, ```en```, ```de```, ```pl```, ```it```, ```hu```, ```ch```, ```sk```, ```uk```, ```fr```, ```es```, ```pt```, ```ar```, ```nl```, ```id```, ```vi```, ```ko```, ```ms```, ```ro```, ```gr```, ```tr```, ```jp```, ```cz```, ```th```, ```hi```, ```bn```, ```he```, ```fi```, ```sv```, ```da```, ```hr```, ```no``` |
|
|
152
|
+
| **url** | backend url | ```https://faceapi.regulaforensics.com/``` | any url |
|
|
153
|
+
|
|
154
|
+
## Component customization
|
|
155
|
+
|
|
156
|
+
Using CSS variables, you can change the font and the main colors of the components.
|
|
157
|
+
|
|
158
|
+
| Variable | Info | Default value |
|
|
159
|
+
|:-------------------|:---------------------------------------------------------------------------------------|:---------------------------:|
|
|
160
|
+
| **--font-family** | component font | ```Noto Sans, sans-serif``` |
|
|
161
|
+
| **--font-size** | component base font size | ```16px``` |
|
|
162
|
+
| **--main-color** | button and frame color | ```#663399``` |
|
|
163
|
+
| **--second-color** | instruction image background color | ```#EBE1F6``` |
|
|
164
|
+
| **--third-color** | instruction image portrait background color (available only in face-capture component) | ```#C5B9D2``` |
|
|
165
|
+
| **--hover-color** | button hover color | ```#7c45b4``` |
|
|
166
|
+
| **--active-color** | button active color | ```#663399``` |
|
|
167
|
+
| **--plate-color** | information plate color | ```rgba(0, 0, 0, 0.6)``` |
|
|
168
|
+
|
|
169
|
+
Example:
|
|
170
|
+
|
|
171
|
+
CSS:
|
|
172
|
+
|
|
173
|
+
```css
|
|
174
|
+
.my-custom-style {
|
|
175
|
+
--font-family: Arial, sans-serif;
|
|
176
|
+
--main-color: green;
|
|
177
|
+
--hover-color: red;
|
|
178
|
+
}
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
HTML:
|
|
182
|
+
|
|
183
|
+
```html
|
|
184
|
+
<face-capture class="my-custom-style"></face-capture>
|
|
185
|
+
```
|
|
150
186
|
|
|
151
|
-
<a name="examples"></a>
|
|
152
187
|
## Examples
|
|
153
188
|
|
|
154
189
|
You can see examples of using the components [here](https://github.com/regulaforensics/face-web-components-samples).
|