README
Table of сontents
- About
- Install via NPM
- Install via CDN
- Component settings
- Component events
- Component response
- Component attributes
- Examples
About
This package contains web components for face recognition.
Install via NPM
On the command line, navigate to the root directory of your project:
cd /path/to/project
Run the following command:
npm init
Answer the questions in the command line questionnaire.
Install @regulaforensics/vp-frontend-face-components
:
npm i @regulaforensics/vp-frontend-face-components
Create index.html
and index.js
files in the root directory of the project.
Import @regulaforensics/vp-frontend-face-components
into your index.js
:
import './node_modules/@regulaforensics/vp-frontend-face-components/dist/main.js';
In index.html
connect index.js
and add the name of the component you want to use. Available components:
<face-capture></face-capture>
- for create a face snapshot;<face-liveness></face-liveness>
- for liveness verification.
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My app</title>
</head>
<body>
<face-capture></face-capture>
<script type="module" src="index.js"></script>
</body>
</html>
Install via CDN
Connect the script in your .html
file. CDN link: unpkg.com/:package@:version/:file
Example:
<script src="https://unpkg.com/@regulaforensics/vp-frontend-face-components@1.1.0/dist/main.js"></script>
Add the name of the component to the html, as in the example above.
Component settings
face-liveness
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.
Example:
const component = document.getElementsByTagName('face-liveness')[0];
component.headers = {
Authorization: 'Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ=='
}
Component events
You can subscribe to component events. In cases of successful and unsuccessful work, the following events will be triggered:
For the face-capture
component - face-capture
For the face-liveness
component - face-liveness
Example:
const component = document.getElementsByTagName('face-capture')[0];
component.addEventListener('face-capture', () => alert('Event!'));
Component response
You can get the response of the component in the detail
field of the event object.
Example:
const component = document.getElementsByTagName('face-capture')[0];
function listener(event) {
if (event.detail) {
const response = event.detail;
console.log(response);
}
}
component.addEventListener('face-capture', listener);
Component attributes
face-capture
Attribute | Info | Default value | Values |
---|---|---|---|
locale | the language of the component | en |
en , ru |
face-liveness
Attribute | Info | Default value | Values |
---|---|---|---|
locale | the language of the component | en |
en , ru |
url | backend url | https://faceapi.regulaforensics.com/ |
any url |
Examples
You can see examples of using the components here.