@regulaforensics/vp-frontend-face-components

Regula framework agnostic web components to work with webcamera

Usage no npm install needed!

<script type="module">
  import regulaforensicsVpFrontendFaceComponents from 'https://cdn.skypack.dev/@regulaforensics/vp-frontend-face-components';
</script>

README

Table of сontents

  1. About
  2. Install via NPM
  3. Install via CDN
  4. Component settings
  5. Component events
  6. Component response
  7. Component attributes
  8. 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:

  1. <face-capture></face-capture> - for create a face snapshot;
  2. <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.