3.3.0

Demo Application

The code example can be downloaded by clicking the file link below.

This is a code example that fully incorporates the Sybrin Biometrics Web SDK. To use the above example, please ensure the following:

  • You have an API key as provided by Sybrin

  • You have the backend API endpoints for authentication and liveness as provided by Sybrin

Then follow these steps:

  1. Download the sybrin-biometrics-websdk-demo-application.zip file linked above

  2. Extract the zip file contents

  3. Open ui/index.js

  4. Follow JavaScript API and component initialization with the authentication method of your choice

  5. Host the UI folder in any hostable environment, e.g. IIS

If you would like to use the companion API or your own middleware implementation, please see the Middleware section for details on how to accomplish this.

For your convenience in formulating custom styling for all components, sybrin.biometrics.css is also provided as a base example below.

<!DOCTYPE html>
<html class="" lang="en" id="html">

<head>
    <title>
        Sybrin Biometrics
    </title>

    <base href="./" />
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <link rel="stylesheet" href="index.css" media="screen" />
    <script src="sybrin.common.js"></script>
    <script src="index.js"></script>
    <script src="sybrin.biometrics.js"></script>
</head>

<body>
    <header>
        <div class="branding">
            <img class="logo"
                src="https://upload.wikimedia.org/wikipedia/commons/3/3e/Sybrin-Logo-Horizontal-Blue.svg" />
        </div>
        <div class="branding">
            <span class="title">Sybrin Web SDK - Biometrics</span>
        </div>
        <div class="actions">
        </div>
    </header>
    <div id="viewport" class="viewport">
        <div class="sybrin-demo-loading">
            Please wait. Loading...
        </div>
    </div>
</body>

</html>

Last updated