Selfie Capture

This component can be found under the Sybrin.Biometrics namespace and is called SelfieCaptureComponent.

Full name: Sybrin.Biometrics.SelfieCaptureComponent.

It is a component that wraps the selfie capture 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 selfie capture provided by the Sybrin Biometrics Web SDK.

With default styling, the selfie capture component appears as follows:

Selfie Capture Component

Upon initializing, the user's camera will start 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 onSelfieCancelled event firing.

If an error occurs, the onSelifeError event will fire.

If capture completes, the onSelfieResult event will fire.

Initialization

The selfie capture component can be initialized using the following code:

HTML

<div id='selfie'></div>

JavaScript

// Option 1: Passing an id
var component = new Sybrin.Biometrics.SelfieCaptureComponent({ 
    id: 'selfie',
});

// Option 2: Passing a DOM element
var element = document.getElementById('selfie');
var component = new Sybrin.Biometrics.SelfieCaptureComponent({ 
    element: element
});

component.initialize();

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 'selfie' 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 selfie capture 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.

Optional:

• api (Sybrin.Biometrics.Api): Instance of a JavaScript API that may be pre-configured as desired.

• deviceId (string): ID of a specific device to use for selfie capture.

• options (Sybrin.Biometrics.Options): Configuration options to instantiate Sybrin.Biometrics.Api with.

• translations ({ [key: string]: string }): An object literal representing a dictionary lookup that will be used for translating the component. Please see the translations section on this page for a list of all translatable text, as well as the localization page for a detailed description on how to implement localization.

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.

Destruction

The selfie capture component may be removed from the UI by calling the destroy() function on it.

Example:

component.destroy();

Functions

Initialize

initialize(): void

Initializes the component's DOM and events.

Destroy

destroy(): void

Destroys the component's DOM and events.

Set Translations

setTranslations(translations?: { [key: string]: string; }): void

Changes the component's translations to the provided values and updates the DOM accordingly.

Events

The selfie capture component offers multiple events. To hook onto an event, simply assign a function to it.

The following options are available:

• onSelfieResult(result: SelfieCaptureResult)

• onSelfieError(error: string)

• onSelfieCancelled()

On Selfie Result

This function is called when selfie capture completes successfully. To hook onto the event, you may use the following code:

component.onSelfieResult = function(result) {
    console.log('Image: ', result.image);
}

The result parameter is of type SelfieCaptureResult and includes the following properties:

• facingMode (string: user | environment | left | right): The direction/orientation of the camera that was used during capture.

• image (string): The selfie image that was analyzed, in data URI format (mime type and base64 data).

• video (blob): Blob data of the .webm video that was recorded for analysis. This property is only populated if video recording was enabled using the includeVideo property within the API configuration options.

• hash (string): The hash calculated on the image that is used to ensure that the image comes from a trusted source.

On Selfie Error

This function is called when something goes wrong and an error occurs during selfie capture. To hook onto the event, you may use the following code:

component.onSelfieError = function(error) {
    console.log('An error occurred: ', error);
}

The error parameter is of type string.

On Selfie Cancelled

This function is called when selfie capture was started, but then cancelled before completion. To hook onto the event, you may use the following code:

component.onSelfieCancelled = function() {
    // Your code here
}

No parameter is passed to this function call.

Styling

The passive component is structured a follows:

<div class="sybrin-biometrics-container sybrin-sdk-container">
    <div class="sybrin-biometrics-component-section sybrin-sdk-component-section">
        <div class="sybrin-biometrics-video-container sybrin-sdk-video-container">
            <video class="sybrin-biometrics-video-mirrored" autoplay="" playsinline=""></video>
            <canvas></canvas>
            <div class="sybrin-biometrics-passive-prompt-container">
                <div class="sybrin-biometrics-passive-prompt">Scanning for face...</div>
            </div>
        </div>
    </div>
    <div class="sybrin-biometrics-button-section sybrin-sdk-button-section sybrin-biometrics-align-left">
        <button class="sybrin-biometrics-cancel sybrin-biometrics-flow-button sybrin-sdk-flow-button sybrin-secondary sy-b-translation-3">Cancel</button>
    </div>
</div>

The classes and elements specified above may be used to freely style the selfie capture 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.

Styling implementation example:

HTML

index.html

<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css" media="screen"/>
</head>
<body>
    <div id='component'></div>
</body>
</html>

CSS

styles.css

.sybrin-biometrics-flow-button.sybrin-secondary {
    color: #963296;
    background-color: #f3e0f3;
    border: 2px solid #f3e0f3;
}

Before Styling

After Styling

Translations

This component is affected by the following translation keys:

Translation Key	Description	Default/Source
sy-b-translation-3	Caption of the button that cancels selfie capture and navigates back	Cancel

Additionally, the component is affected by the following keys as a result of the JavaScript API applying DOM changes to the UI while liveness is in progress:

Translation Key	Description	Default/Source
sy-b-translation-21	Text prompt to display when a selfie has successfully been taken and the user has to wait for processing to complete	Good job! Please wait...
sy-b-translation-22	Text prompt to display with countdown when conditions are all correct and video recording has started (if enabled)	Perfect! Please hold still.
sy-b-translation-23	Text prompt to display while selfie capture is initializing	Preparing...
sy-b-translation-24	Text prompt to display when the user's face is not centered properly	Please center face
sy-b-translation-25	Text prompt to display when the SDK is unable to detect the user's eyes	Please look at the camera
sy-b-translation-26	Text prompt to display when the user's face is too far away from the camera	Please move closer to the camera
sy-b-translation-27	Text prompt to display when the SDK is unable to detect a face	Scanning for face...
sy-b-translation-28	Text prompt to display when more than one face is being detected	Please ensure only one face is visible in frame
sy-b-translation-29	Text prompt to display when more light is needed	Lighting conditions too dark
sy-b-translation-30	Text prompt to display when there is too much light	Lighting conditions too bright
sy-b-translation-31	Text prompt to display when the image is not clear enough	Image too blurry
sy-b-translation-32	Alert message to show if the SDK detects that the browser is not supported	Browser is not supported.
sy-b-translation-33	Alert message to show if the SDK detects that the user is using a third party browser on an Apple device that doesn't allow camera access to third party browsers.	Browser is not supported. Please open in Safari.
sy-b-translation-34	Alert message to show if video recording is enabled and the SDK detects that the browser does not support video recording	Video recording is not supported in this browser.
sy-b-translation-35	Caption of the button that dismisses the alert window that is shown when a compatibility issue is detected	Ok