Web

If you have integrated the age estimation and liveness API, we strongly recommend adding our face capture module to enhance your results. When deployed in a web application, Yoti optionally provides a JavaScript Face Capture Module (FCM) that uses the webcam to capture an image of the user, which can be sent to the Yoti services backend for processing.

There are 2 steps to follow to integrate the face capture module:

1. Install the package
2. Integrate the package.

This service has high image quality requirements.

Install the package

Yoti currently supports:

• React JS (Next JS)
• Javascript

React JS

Install the dependency.

npm i @getyoti/react-face-capture -S

​

import FaceCapture from "@getyoti/react-face-capture"

The package depends on the following peer dependencies:

"react": ">=16.14.0 <=18.2.0",

"react-dom": ">=16.14.0 <=18.2.0"

The package supports the following browser versions:

Assets are not included in the javascript bundle. To have the components work correctly, you will need to copy library assets from @getyoti/react-face-capture/assets folder into your assets folder.

For instance, in WebPack, you can use the plugin copy-webpack-plugin in the following way:

new CopyPlugin({

  patterns: [

    {

      from: path.resolve(__dirname, './node_modules/@getyoti/react-face-capture/assets'),

      to: path.resolve(__dirname, './dist/assets'),

    },

  ],

});

JavaScript (vanilla)

For projects without a React tech stack, you can use the Face Capture vanilla version. When you install the library on your machine, It's located inside the folder vanilla.

Add the package to your codebase and serve the static assets:

/@getyoti/react-face-capture/vanilla/assets/face-capture/

/@getyoti/react-face-capture/vanilla/index.js

Inside the page you want to have Face Capture, add Face Capture scripts and styles like in the example below. faceCaptureAssetsRootUrl is a property you can use to instruct the library where neural net files are served otherwise we look for the files relative to the page location assets/face-capture/.

Our scripts will give you access to Yoti.FaceCaptureModule.render where you can set 2 parameters. The first parameter is the properties, the same ones used in the integration with react. The second parameter is a reference to html DOM, allowing you to decide where to render the UI.

In order to unmount the component, it is highly recommended to call the Yoti.FaceCaptureModule.unmount function instead of destroying the html element, which could lead to some issues or misbehaviour.

<script src="/@getyoti/react-face-capture/vanilla/index.js"></script>

<script>

  const props = {

    faceCaptureAssetsRootUrl: '/@getyoti/react-face-capture/vanilla/assets/face-capture/',

    onSuccess: (data) => {

      console.log('Length = ', data.img.length);

    },

    onError: (error) => {

      console.log('Error =', error);

    },

  };

​

  const fcm = Yoti.FaceCaptureModule.render(props, document.getElementById('face-capture-module-root'));

​

  function reload() {

    fcm.reload();

  }

​

  function unmount() {

    fcm.unmount();

  }

</script>

​

<div id="face-capture-module-root"></div>

CSS Customization

It is possible to customise the style by changing the following CSS properties:

The CSS custom properties must be defined using the :root CSS selector. Here is an example:

:root { --fcm-button-color: red; }

Example code

Below is the full sample code of FCM integration

import FaceCapture from '@getyoti/react-face-capture';

​

export function App() {

  const onSuccess = (payload, base64PreviewImage) => console.log('Length = ', payload.img.length);

  const onError = (error) => console.log('Error =', error);

​

  return <FaceCapture 

            clientSdkId={'<YOUR_SDK_ID>'}

            returnPreviewImage={true} 

            onSuccess={onSuccess} 

            onError={onError} 

        />;

}

Web demo

• React web app example

Properties

Language code list

(*) This field is only mandatory when using the secure mode. (secure = true)

()** Language codes marked with *** are listed for disambiguation purposes on the fallback.

Language fallback

A mechanism used for the property language to avoid issues when the value passed is wrong. Example: first try exact match (es-es or es-ES , ignore case):

• If there is no match, try the mainstream es , by removing the region part -es .
• If there is no mainstream, try any other available es-[region] sibling (example: es-419 ).
• If there is no regional sibling, use the default language: en .

Error codes