@regulaforensics/vp-frontend-face-components 1.0.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 +83 -35
  2. package/dist/main.js +1 -1
  3. package/package.json +16 -9
package/README.md CHANGED
@@ -1,20 +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 events](#events)
6
- 1. [Component response](#response)
7
- 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)
8
11
  1. [Examples](#examples)
9
12
 
10
13
  ---
11
14
 
12
- <a name="about"></a>
13
15
  ## About
14
16
 
15
17
  This package contains web components for face recognition.
16
18
 
17
- <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
+
18
27
  ## Install via NPM
19
28
 
20
29
  On the command line, navigate to the root directory of your project:
@@ -46,8 +55,8 @@ import './node_modules/@regulaforensics/vp-frontend-face-components/dist/main.js
46
55
 
47
56
  In ```index.html``` connect ```index.js``` and add the name of the component you want to use. Available components:
48
57
 
49
- 1. ```<face-capture-wc></face-capture-wc>``` - for create a face snapshot;
50
- 1. ```<face-liveness-wc></face-liveness-wc>``` - for liveness verification.
58
+ 1. ```<face-capture></face-capture>``` - for create a face snapshot;
59
+ 1. ```<face-liveness></face-liveness>``` - for liveness verification.
51
60
 
52
61
  Example:
53
62
 
@@ -59,13 +68,12 @@ Example:
59
68
  <title>My app</title>
60
69
  </head>
61
70
  <body>
62
- <face-capture-wc></face-capture-wc>
71
+ <face-capture></face-capture>
63
72
  <script type="module" src="index.js"></script>
64
73
  </body>
65
74
  </html>
66
75
  ```
67
76
 
68
- <a name="cdn"></a>
69
77
  ## Install via CDN
70
78
 
71
79
  Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:version/:file```
@@ -73,28 +81,42 @@ Connect the script in your ```.html``` file. CDN link: ```unpkg.com/:package@:ve
73
81
  Example:
74
82
 
75
83
  ```html
76
- <script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@0.0.1/dist/main.js"></script>
84
+ <script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@1.2.0/dist/main.js"></script>
77
85
  ```
78
86
 
79
87
  Add the name of the component to the html, as in the example above.
80
88
 
81
- <a name="events"></a>
89
+ ## Component settings
90
+
91
+ ### face-liveness
92
+
93
+ After passing two stages of verification, the component sends the received data for processing to the API. Using ```headers``` setter you can set HTTP POST method headers.
94
+
95
+ Example:
96
+
97
+ ```javascript
98
+ const component = document.getElementsByTagName('face-liveness')[0];
99
+
100
+ component.headers = {
101
+ Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
102
+ }
103
+ ```
104
+
82
105
  ## Component events
83
106
 
84
107
  You can subscribe to component events. In cases of successful and unsuccessful work, the following events will be triggered:
85
108
 
86
- For the ```face-capture-wc``` component - ```face-capture```
87
- For the ```face-liveness-wc``` component - ```face-liveness```
109
+ For the ```face-capture``` component - ```face-capture```
110
+ For the ```face-liveness``` component - ```face-liveness```
88
111
 
89
112
  Example:
90
113
 
91
114
  ```javascript
92
- const component = document.getElementsByTagName('face-capture-wc')[0];
115
+ const component = document.getElementsByTagName('face-capture')[0];
93
116
 
94
117
  component.addEventListener('face-capture', () => alert('Event!'));
95
118
  ```
96
119
 
97
- <a name="response"></a>
98
120
  ## Component response
99
121
 
100
122
  You can get the response of the component in the ```detail``` field of the event object.
@@ -102,7 +124,7 @@ You can get the response of the component in the ```detail``` field of the event
102
124
  Example:
103
125
 
104
126
  ```javascript
105
- const component = document.getElementsByTagName('face-capture-wc')[0];
127
+ const component = document.getElementsByTagName('face-capture')[0];
106
128
 
107
129
  function listener(event) {
108
130
  if (event.detail) {
@@ -114,28 +136,54 @@ function listener(event) {
114
136
  component.addEventListener('face-capture', listener);
115
137
  ```
116
138
 
117
- <a name="attributes"></a>
118
139
  ## Component attributes
119
140
 
120
- ### face-capture-wc
141
+ ### face-capture
142
+
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``` |
121
146
 
122
- | Attribute | Info | Default value | Values |
123
- |:----------|:-----|:-------------:|:------:|
124
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
125
- | **start-scale** | frame scale multiplier | ```1``` | ```number > 0``` |
126
- | **oval-offset** | offset of the frame from the center along the Y axis (works only on mobile devices) | ```0``` | ```any number``` |
147
+ ### face-liveness
127
148
 
128
- ### face-liveness-wc
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 |
129
153
 
130
- | Attribute | Info | Default value | Values |
131
- |:----------|:-----|:-------------:|:------:|
132
- | **locale** | the language of the component | ```en``` | ```en```, ```ru``` |
133
- | **url** | backend url | ```https://test-faceapi.regulaforensics.com/``` | any url |
134
- | **start-scale** | start frame scale multiplier | ```1``` | ```number > 0``` |
135
- | **end-scale** | second frame scale multiplier | ```1.35``` | ```number > 0``` |
136
- | **oval-offset** | offset of the frame from the center along the Y axis (works only on mobile devices) | ```0``` | ```any number``` |
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
+ ```
137
186
 
138
- <a name="examples"></a>
139
187
  ## Examples
140
188
 
141
189
  You can see examples of using the components [here](https://github.com/regulaforensics/face-web-components-samples).