Implementation¶

Import the component into your application:

import 'idlive-face-capture-web';

Add the component's html tag to the place on the page where you want to display the video from the camera:

<idlive-face-capture></idlive-face-capture>

NOTE: The component occupies 100% of the parent's element. Make sure it has a non-zero height and width.

Get the component to interact with:

const idliveFaceCapture = document.querySelector('idlive-face-capture');

Call openCamera action to open the camera and show video:

idliveFaceCapture.openCamera();

Subscribe to capture event to get an encrypted file for verification after the photo is captured:

idliveFaceCapture.addEventListener('capture', (event) => {
    const { photo, encryptedFile } = event.detail[0];

    sendEncryptedFileToServer(encryptedFile)
});

Implement a method to interact with the server:

const sendEncryptedFileToServer = (encryptedFile) => {
    const serverUrl = 'https://SERVER_URL:PORT';

    fetch(`${serverUrl}/check_capture_liveness`, {
        method: 'post',
        headers: { 'Content-Type': 'application/octet-stream' },
        body: encryptedFile,
    })
        .then(response => response.json())
        .then(result => {
            // process result from the server
        })
        .catch(e => {
            // error
        });
}