Skip to content

Events

Components Events

You can subscribe to the component events.

For example:

const faceLivenessComponent = document.getElementsByTagName('face-liveness')[0]; 
const faceCaptureComponent = document.getElementsByTagName('face-capture')[0];
faceLivenessComponent.addEventListener('face-liveness', (event) => console.log(event.detail)); // event listener for face-liveness component
faceCaptureComponent.addEventListener('face-capture', (event) => console.log(event.detail)); // event listener for face-capture component

The face-liveness type of event is generated for the face-liveness component, and the face-capture type of event is generated for the face-capture component.

The generated event object (event.detail) contains three fields that describe the event:

{
  action: "PRESS_START_BUTTON", // the type of action that generated the event (all actions are described in the table below)
  data: null, // component data
  manual: true // event generated by user action or component by itself
}

Type of actions

Type of action Description of the action In which component is present
ELEMENT_VISIBLE Component is appended in the DOM. face-liveness, face-capture
PRESS_START_BUTTON The "Get started" button is pressed. face-liveness, face-capture
PRESS_RETRY_BUTTON The "Retry" button is pressed. face-liveness, face-capture
CLOSE The "Close" button is pressed. face-liveness, face-capture
PROCESS_FINISHED The component has finished its work. face-liveness, face-capture
SERVICE_INITIALIZED The component has started its work. face-liveness, face-capture

In cases of successful operation of the components, the data field will contain the following fields:

{
  response: { ... }, // component result
  status: 1 // 1 for successful work and 0 for unsuccessful
}

In cases of unsuccessful work, the data field will contain the following fields:

{
  reason: "CAMERA_PERMISSION_DENIED", // error reason (possible causes of errors are described in the table below)
  status: 0
}

Table of error causes

Reason Description of the reason
WASM_ERROR Error in WASM.
WASM_LICENSE Missing or incorrect license.
UNKNOWN_ERROR Unknown error.
NOT_SUPPORTED The browser is not supported.
CAMERA_UNKNOWN_ERROR Unknown camera error.
CAMERA_PERMISSION_DENIED Access to the camera is prohibited.
NO_CAMERA There is no camera.
CONNECTION_ERROR Connection errors.
LANDSCAPE_MODE_RESTRICTED Work in landscape orientation is prohibited.

Cases of event generation: face-liveness & face-capture

Event condition Event type Event object ```event.detail``` Description
The component is mounted in the DOM. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "ELEMENT_VISIBLE", 
  data: null,
  manual: true
}
To receive this event, wrap the component in another element (for example, a div) and add an addEventListener to it. When the component appears in the DOM, the event will pop up. Example: 
<div id="add-event-listener-to-this-element">
  <face-liveness></face-liveness>
</div>
The "Get started" button is pressed. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "PRESS_START_BUTTON", 
  data: null,
  manual: true
}
The "Retry" button is pressed. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "PRESS_RETRY_BUTTON", 
  data: null,
  manual: true
}
The "Close" button is pressed. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "CLOSE", 
  data: null,
  manual: true
}
The work of the component is completed successfully. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "PROCESS_FINISHED", 
  data: {
    response: { ... },
    status: 1
  },
  manual: false
}
The work of the component failed. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "PROCESS_FINISHED", 
  data: {
    reason: "An error has occurred",
    status: 0
  },
  manual: false
}
The component is initialized and ready to work. For face-liveness: `face-liveness` For face-capture: `face-capture` 
{
  action: "SERVICE_INITIALIZED",
  data: null,
  manual: false
}