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` |
|
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:
|
The "Get started" button is pressed. | For face-liveness: `face-liveness` For face-capture: `face-capture` |
|
|
The "Retry" button is pressed. | For face-liveness: `face-liveness` For face-capture: `face-capture` |
|
|
The "Close" button is pressed. | For face-liveness: `face-liveness` For face-capture: `face-capture` |
|
|
The work of the component is completed successfully. | For face-liveness: `face-liveness` For face-capture: `face-capture` |
|
|
The work of the component failed. | For face-liveness: `face-liveness` For face-capture: `face-capture` |
|
|
The component is initialized and ready to work. | For face-liveness: `face-liveness` For face-capture: `face-capture` |
|