@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.
Files changed (3) hide show
  1. package/README.md +58 -23
  2. package/dist/main.js +1 -1
  3. package/package.json +11 -6
package/README.md CHANGED
@@ -1,21 +1,29 @@
1
- # Table of сontents
1
+ # Table of contents
2
2
  1. [About](#about)
3
- 1. [Install via NPM](#npm)
4
- 1. [Install via CDN](#cdn)
5
- 1. [Component settings](#settings)
6
- 1. [Component events](#events)
7
- 1. [Component response](#response)
8
- 1. [Component attributes](#attributes)
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
- <a name="npm"></a>
19
+ ## Compatibility
20
+
21
+ | Devices | ![Chrome](https://raw.githubusercontent.com/alrra/browser-logos/main/src/chrome/chrome_48x48.png) | ![FireFox](https://raw.githubusercontent.com/alrra/browser-logos/main/src/firefox/firefox_48x48.png) | ![Safari](https://raw.githubusercontent.com/alrra/browser-logos/main/src/safari/safari_48x48.png) |
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.1.0/dist/main.js"></script>
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 | Info | Default value | Values |
141
- |:----------|:-----|:-------------:|:------:|
142
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
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 | Info | Default value | Values |
147
- |:----------|:-----|:-------------:|:------:|
148
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
149
- | **url** | backend url | ```https://faceapi.regulaforensics.com/``` | any 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).