Skip to main content

​
Required Parameters

When integrating the Liveness SDK, you will need to provide the following parameters:
  • serviceBaseUrl
    The endpoint where the liveness service is hosted.
      • For Demo environments, use: https://d1.cynopsis.co/service
      • For Production environments, use: https://util.cynopsis.co/service
  • accessToken
    The authentication token required to access the SDK services.
    Obtain your access token by referring to the Authentication section above.
  • domainId
    Your unique domain identifier, provided by Cynopsis Solutions or your system administrator.
  • provider
    The liveness provider version. Currently, set this to: V2
These parameters must be passed into the SDK initialization as shown in the integration examples below.

​
Intergrate SDK

To start integrating the SDK with your application codebase, follow the sample code provided for your platform below. Each example shows how to initialize and configure the SDK using the required parameters, helping you get up and running quickly.
  • Web Browser
  • Android
  • iOS

​
Web Browser Integration

  1. Download Web SDK
  2. Install the SDK in your React project:
Note: The Web SDK requires react and react-dom (version >=16.8.0), as well as react-cs-liveness. 
npm install react@^16.8.0 react-dom@^16.8.0
npm install ./react-cs-liveness-3.4.44.tgz
# or
yarn add react@^16.8.0 react-dom@^16.8.0
yarn add ./react-cs-liveness-3.4.44.tgz
  1. Integrate the Liveness component
Select your frontend framework below for sample code:
  • Vanilla JS (CommonJS)
  • React
  • Vue
  • Angular
<!-- Vanilla JS Example -->
<script src="path/to/react-cs-liveness/vanilla.js"></script>
<script>
  // Vanilla JS
  const detector = document.createElement('liveness-detector');
  detector.setAttribute('service-base-url', 'YOUR_SERVICE_BASE_URL');
  detector.setAttribute('domain-id', 'YOUR_DOMAIN_ID');
  detector.setAttribute('access-token', 'YOUR_ACCESS_TOKEN');
  detector.setAttribute('provider', 'V2');
  detector.addEventListener('liveness-ready', () => detector.start());
  detector.addEventListener('liveness-result', (e) => {
    // handle result
    console.log(e.detail);
  });
  document.body.appendChild(detector);
</script>

​
About Code Splitting & Custom Chunking

If your project uses custom code-splitting or defines manual chunks (such as in a Vite or Webpack config), make sure all react-cs-liveness dependencies are kept together in the same chunk. Incorrect configuration may cause runtime issues related to duplicate React instances or missing dependencies, especially when using React 18+ or advanced bundling.
  • We recommend not setting custom chunking rules for the SDK or to use our provided plugins (see below) to ensure correct bundling.
  • If you are not sure about your chunking setup, test your build to ensure the Liveness component loads and works as expected.
If your project uses Vite, we strongly recommend using our official liveness() Vite plugin from react-cs-liveness/config. This plugin ensures correct code-splitting and chunking for all react-cs-liveness dependencies, avoiding runtime errors (like React 18+ createRoot issues) that commonly occur when custom manualChunks are defined.For example, with a Vue project:
// vite.config.js
import { defineConfig } from 'vite'
import { liveness } from 'react-cs-liveness/config'

export default defineConfig({
  plugins: [
    liveness({
      mergeWithExisting: true, // Merge safely with your existing manualChunks
    }),
  ],
})
This setup ensures react-cs-liveness and all its internal dependencies are correctly bundled—no matter your framework or chunking rules. The mergeWithExisting: true option integrates seamlessly with your app’s existing Vite code-splitting configuration.