Components
Last updated
Last updated
The following components are available:
This component can be found under the Sybrin.Biometrics
namespace and is called PassiveComponent
.
Full name: Sybrin.Biometrics.PassiveComponent
.
It is a component that wraps the passive liveness detection functionality provided by the Sybrin Biometrics JavaScript API and presents it in the form of a simple UI. It's recommended that you use this component if you do not wish to create your own UI and simply want to use the passive liveness functionality provided by the Sybrin Biometrics Web SDK.
With default styling, the passive component appears as follows:
Upon clicking "Start", the user will be prompted with instructions on how to take a viable selfie. Upon proceeding, the user's camera will initialize and the component will display a video feed while waiting for the user to center their face inside the oval. This action can be cancelled, resulting in the onLivenessCancelled
event firing.
If an error occurs, the onLivenessError
event will fire.
If liveness detection completes, the onLivenessResult
event will fire.
The passive component can be initialized using the following code:
The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.
Please note that 'passive' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.
During initialization, the passive component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:
Required:
id (string)
: ID of the element you wish to use for component initialization. Not required if element
is passed.
element (HTMLElement)
: Element you wish to use for component initialization. Not required if id
is passed.
api (Sybrin.Biometrics.Api)
: Instance of a JavaScript API that may be pre-configured as desired. Not required if an instance of options
is passed.
options (Sybrin.Biometrics.Options)
: Configuration options to instantiate Sybrin.Biometrics.Api
with. Not required if an instance of api
is passed.
Optional:
correlationId (string)
: Unique identifier for the case that will be passed down to the back-end if set.
useModal (boolean)
: Whether or not to pop the video feed out into a modal. By default, this is true.
readonlyMode (boolean)
: Disables all events if true. Default false.
deviceId (string)
: ID of a specific device to use for passive liveness.
For altering component text or implementing localization if required:
headingText (string)
: Text to display in the heading. Default "Take selfie"
subtitleText (string)
: Text to display in the subtitle. Default "Take a photo"
perfectSelfieText (string)
: Prompt to display above selfie instructions. Default "Guidelines to the perfect selfie"
startButtonText (string)
: Text to display in the start button. Default "Start"
gotitButtonText (string)
: Text to display in the proceed button of the instructions screen. Default "Got it!"
cancelButtonText (string)
: Text to display in the cancel button. Default "Cancel"
companyText (string)
: Company text to display at the foot of the component. Default "Sybrin"
cameraAccessInstructionText (string)
: Instruction text stating to allow camera access. Default "Allow camera access when prompted"
lightingInstructionText (string)
: Instruction text stating to ensure proper lighting conditions. Default "Ensure good lighting with no bright lights in background"
accessoriesInstructionText (string)
: Instruction text stating to remove facial and/or topical accessories. Default "Remove hats, sunglasses and headsets"
alignmentInstructionText (string)
: Instruction text stating to ensure correct alignment. Default "Ensure correct alignment"
facePositionInstructionText (string)
: Instruction text stating to ensure face is positioned in frame. Default "Position face in frame"
faceAmountInstructionText (string)
: Instruction text stating to ensure that only one face is in the frame. Default "Only one face must be in frame"
followInstructionText (string)
: Instruction text stating to follow the on-screen prompts. Default "Follow on-screen instructions"
selectDeviceText (string)
: Prompt to display above device list to indicate that the user must select a device. Default "Please select a camera to use"
Warning: Initialization will fail if the intended host element does not exist yet.
Always ensure that the initialize function is only called after the DOM is loaded.
The passive component may be removed from the UI by calling the destroy()
function on it.
Example:
The passive component offers multiple events. To hook onto an event, simply assign a function to it.
The following options are available:
onLivenessResult(result: PassiveLivenessResult)
onLivenessError(error: string)
onLivenessCancelled()
onBeforeLiveness()
This function is called when liveness detection completes either successfully or unsuccessfully. If unsuccessful, the alive
property value will be false
. To hook onto the event, you may use the following code:
The result parameter is of type PassiveLivenessResult
and includes the following properties:
alive (boolean)
: Whether or not the liveness detection passed.
confidence (float)
: Confidence in liveness. 0 is no confidence. 1 is full confidence.
A false result may include a spoof, failure to detect a face due to poor image quality, or any other expected failed workflow outcomes. Only exceptions such as failure to gain access to the camera would trigger the liveness error function below.
This function is called when something goes wrong and an error occurs during liveness detection. To hook onto the event, you may use the following code:
The error parameter is of type string.
This function is called when liveness detection was started, but then cancelled before completion. To hook onto the event, you may use the following code:
No parameter is passed to this function call.
This function is called before the camera is launched when passive liveness detection starts. It is recommended to use this function to set the correlationId
of the component by calling setCorrelationId()
. To hook onto the event, you may use the following code:
No parameter is passed to this function call.
The passive component is structured a follows:
The classes and elements specified above may be used to freely style the passive component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.
Depending on component state, visibility of certain div elements alternates.
When idle...
sybrin-biometrics-passive-image
is shown
sybrin-biometrics-passive-video
is hidden
sybrin-biometrics-passive-start
is shown
sybrin-biometrics-passive-cancel
is hidden
When running a liveness test...
sybrin-biometrics-passive-image
is hidden
sybrin-biometrics-passive-video
is shown
sybrin-biometrics-passive-start
is hidden
sybrin-biometrics-passive-cancel
is shown
Styling implementation example:
This component can be found under the Sybrin.Biometrics
namespace and is called ResultComponent
.
Full name: Sybrin.Biometrics.ResultComponent
.
It is a component that displays the result of a liveness detection provided by the Sybrin Biometrics JavaScript API and presents it in the form of a UI component. It's recommended that you use this component if you do not wish to create your own UI and simply want to display a result provided by a completion of the Sybrin Biometrics Web SDK liveness detection.
The liveness result may be obtained by either using an instance of the JavaScript API or by using a liveness detection component such as PassiveComponent
to run a liveness test.
With default styling, the result component appears as follows:
Upon clicking "Continue", the onContinue
event will fire.
Upon clicking "Retry", the onRetry
event will fire.
The result component can be initialized using the following code:
The Sybrin Web SDK provides the option to either pass down the ID of the element you wish to use for component initialization, or to pass the element directly.
Please note that 'result' is just an example in this context and the ID may be changed as desired as long as it matches the value passed down during component initialization in JavaScript.
During initialization, the result component allows for a number of configuration options that may be passed down using an object literal. The parameters that may be used on the object include the following:
Required:
id (string)
: ID of the element you wish to use for component initialization. Not required if element
is passed.
element (HTMLElement)
: Element you wish to use for component initialization. Not required if id
is passed.
result (Sybrin.Biometrics.PassiveLivenessResult)
: The Sybrin.Biometrics.PassiveLivenessResult
instance to construct the UI with.
For altering component text or implementing localization if required:
headingText (string)
: Text to display in the heading. Default "Selfie result"
subtitleSuccessText (string)
: Success text to display in the subtitle. Default "Your selfie was captured successfully"
subtitleFailText (string)
: Fail text to display in the subtitle. Default "Your selfie could not be captured"
continueButtonText (string)
: Text to display in the continue button. Default "Continue"
retryButtonText (string)
: Text to display in the retry button. Default "Retry"
companyText (string)
: Company text to display at the foot of the component. Default "Sybrin"
Warning: Initialization will fail if the intended host element does not exist yet.
Always ensure that the initialize function is only called once the DOM is loaded.
The passive component may be removed from the UI by calling the "destroy()" function on it.
Example:
The result component offers multiple events. To hook onto an event, simply assign a function to it.
The following options are available:
onContinue()
onRetry()
This function is called when the user clicks on the continue button. To hook onto the event, you may use the following code:
No parameter is passed to this function call.
This function is called when the user clicks on the retry button. To hook onto the event, you may use the following code:
No parameter is passed to this function call.
The result component is structured a follows:
The classes and elements specified above may be used to freely style the result component as desired. To do so, simply create a stylesheet and include it in the project, then style according to the above classes and elements.
Depending on the alive state of the provided result, visibility of certain div elements alternates.
When alive
is true...
sybrin-biometrics-result-continue
is shown
sybrin-biometrics-result-retry
is hidden
When alive
is false...
sybrin-biometrics-result-continue
is hidden
sybrin-biometrics-result-retry
is shown
Styling implementation example: