Demo Application
Last updated
Last updated
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:
Download the sybrin-biometrics-websdk-demo-application.zip
file linked above
Extract the zip file contents
Open index.js
In index.js, replace 'your-api-key-here' with the API key provided by Sybrin
In index.js, replace 'your-auth-endpoint-here' with your backend authorization API endpoint
In index.js, replace 'your-liveness-endpoint-here' with your backend liveness API endpoint
Host the folder in any hostable environment, e.g. IIS
Please remember to supply your API key and endpoints to the configuration options in index.js.
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 name="viewport" content="width=device-width,initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<script src="sybrin.biometrics.all.js"></script>
<script src="index.js"></script>
<link rel="stylesheet" href="index.css" media="screen" />
</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">
<button onclick="openPassiveLivenessDetection()">Run Passive Liveness</button>
</div>
</header>
<div id="viewport">
<div class="sybrin-demo-loading"> Please wait. Loading... </div>
</div>
</body>
</html>
var biometrics;
var openPassiveLivenessDetection = async function () {
try {
const response = await biometrics.openPassiveLivenessDetection();
alert(`alive: ${response.alive} confidence: ${response.confidence}`);
} catch (error) {
alert(`Error! ${error}`);
}
}
document.addEventListener('DOMContentLoaded', function (event) {
var options = new Sybrin.Biometrics.Options({
apiKey: 'your-api-key-here',
authorizationEndpoint: 'your-auth-endpoint-here',
passiveLivenessEndpoint: 'your-liveness-endpoint-here',
});
biometrics = new Sybrin.Biometrics.Api();
biometrics.initialize(options);
biometrics.getVersionInfo().then(versionInfo => {
document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Biometrics (version ' + versionInfo.webSdkVersion + ')';
});
biometrics.checkCompatibility(true);
var currentComponent = null;
var initWizard = () => {
if (currentComponent) {
currentComponent.destroy();
}
currentComponent = new Sybrin.Biometrics.WizardComponent({
id: 'viewport',
api: biometrics
});
currentComponent.initialize();
currentComponent.onWizardDone = (result) => {
alert(JSON.stringify(result));
}
currentComponent.onLivenessError = (error) => {
console.log(`${error}`);
}
currentComponent.onLivenessCancelled = () => {
console.log('Operation cancelled');
}
}
initWizard();
});
button {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
color: #3498db;
font-size: 16px;
font-weight: normal;
padding: 10px 27px;
text-decoration: none;
cursor: pointer;
background: #ffffff;
border: 1px solid;
}
body {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
background-color: #2d2d46;
margin: 0;
padding: 0;
}
header {
background-color: white;
margin-bottom: 24px;
padding: 15px 60px;
overflow: auto;
}
header .branding {
float: left;
}
header .actions {
float: right;
}
header img {
height: 33px;
padding-top: 3px;
}
header span.title {
display: inline-block;
line-height: 1;
border-radius: 50rem !important;
margin-left: 0.5rem !important;
padding: 0.5rem !important;
padding-right: 1rem !important;
padding-left: 1rem !important;
background: rgba(0, 0, 30, 0.05) !important;
color: rgba(0, 0, 30, 0.824) !important;
margin-top: 4px;
}
header button {
font: 300 1em/2em Roboto, sans-serif;
padding: 0.25rem 1rem;
border-radius: 50rem !important;
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
border: none;
color: #fff !important;
background: linear-gradient(160deg, #00fafa 0, #3264fa 100%);
box-shadow: 0 15px 30px -10px #3264fa !important;
cursor: pointer;
}
.viewport {
border: 2px solid rgba(50, 50, 55, 0.2);
border-radius: 8px;
display: inline-block;
-webkit-box-shadow: 0 0 16px 8px rgba(50, 50, 55, 0.2);
box-shadow: 0 0 16px 8px rgba(50, 50, 55, 0.2);
width: 80%;
max-width: 1024px;
overflow: hidden;
}
.sybrin-demo-loading {
color: white;
padding: 20px;
}
@media screen and (max-width: 800px) {
header {
display: none;
}
.viewport {
width: calc(100% - 4px);
}
}
.sybrin-biometrics-wizard {
position: relative;
width: 100%;
min-height: 360px;
margin: auto;
}
.sybrin-biometrics-container {
position: relative;
padding: 12px;
width: 100%;
margin: auto;
background-color: white;
box-sizing: border-box;
}
.sybrin-biometrics-halves {
display: flow-root;
}
.sybrin-biometrics-half {
float: left;
width: 50%;
margin: 0;
text-align: center;
padding: 12px;
box-sizing: border-box;
}
.sybrin-biometrics-block {
border: 2px solid rgb(234, 234, 234);
border-radius: 8px;
width: 100%;
box-sizing: border-box;
}
.sybrin-biometrics-block-icon {
margin: 24px;
}
.sybrin-biometrics-block-icon svg {
height: 40px;
}
.sybrin-biometrics-block-icon svg path {
stroke: inherit;
fill: inherit;
}
.sybrin-biometrics-block-prompt {
margin: 24px;
min-height: 36px;
}
.sybrin-biometrics-block-button {
margin: 0 24px 24px 24px;
border: 2px solid rgb(234, 239, 253);
background-color: rgb(234, 239, 253);
border-radius: 8px;
color: rgb(53, 102, 247);
cursor: pointer;
padding: 16px;
width: calc(100% - 48px);
}
.sybrin-biometrics-component-section {
padding: 12px;
}
.sybrin-biometrics-button-section {
text-align: right;
}
.sybrin-biometrics-button-section .sybrin-biometrics-flow-button {
margin: 12px;
}
.sybrin-biometrics-align-left {
text-align: left;
}
.sybrin-biometrics-flow-button {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: white;
font-weight: bold;
padding: 16px;
text-decoration: none;
text-align: center;
cursor: pointer;
background: rgb(53, 102, 247);
width: 224px;
border: 2px solid rgb(53, 102, 247);
}
.sybrin-biometrics-flow-button.sybrin-secondary {
border: 2px solid rgb(234, 239, 253);
background-color: rgb(234, 239, 253);
color: rgb(53, 102, 247);
}
.sybrin-biometrics-flow-button:disabled {
color: rgba(50, 50, 55, 0.4);
background: transparent;
border: 2px solid rgb(234, 234, 234);
}
.sybrin-biometrics-list {
width: 100%;
max-width: 464px;
margin: auto;
padding: 16px;
background-color: rgb(244, 244, 244);
border-radius: 8px;
max-height: 448px;
overflow-y: auto;
overflow-x: hidden;
box-sizing: border-box;
border: 2px solid rgb(234, 234, 234);
}
.sybrin-biometrics-card {
display: block;
height: 48px;
padding: 16px;
text-align: left;
border-radius: 8px;
cursor: pointer;
}
.sybrin-biometrics-icon {
float: left;
width: 48px;
}
.sybrin-biometrics-icon svg {
height: 48px;
}
.sybrin-biometrics-icon svg path {
stroke: inherit;
fill: inherit;
}
.sybrin-biometrics-text {
float: left;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-left: 24px;
}
.sybrin-biometrics-selected {
background-color: rgb(53, 102, 247);
box-shadow: 0px 16px 32px #3264FA4D;
color: white;
}
.sybrin-biometrics-selected .sybrin-biometrics-icon svg path {
stroke: white;
fill: white;
}
.sybrin-biometrics-video {
position: relative;
width: 100%;
max-width: 480px;
z-index: 4;
margin: auto;
border: 8px solid rgb(53, 102, 247);
border-radius: 8px;
box-sizing: border-box;
}
.sybrin-biometrics-video-mirrored {
display: block;
width: 100%;
max-width: 480px;
z-index: 4;
transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
}
.sybrin-biometrics-passive-prompt-container {
z-index: 100;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-top: 24px;
padding-bottom: 24px;
color: black;
}
.sybrin-biometrics-passive-prompt {
margin: auto;
color: black;
}
.sybrin-biometrics-result-image-container {
position: relative;
width: 312px;
margin: auto;
}
.sybrin-biometrics-result-image-circle {
display: block;
width: 100%;
height: 100%;
background: transparent;
text-align: center;
align-content: center;
align-items: center;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
overflow: hidden;
}
.sybrin-biometrics-result-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sybrin-biometrics-result-icon {
height: 48px;
width: 48px;
position: absolute;
top: 0;
right: 0;
}
.sybrin-biometrics-result-icon-success svg path {
stroke: #00aa6e;
fill: #00aa6e;
}
.sybrin-biometrics-result-icon-fail svg path {
stroke: #a8262b;
fill: #a8262b;
}
.sybrin-custom-scrollbar::-webkit-scrollbar-track
{
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
background-color: rgb(244, 244, 244);
border-radius: 10px;
}
.sybrin-custom-scrollbar::-webkit-scrollbar
{
width: 10px;
background-color: rgb(244, 244, 244);
}
.sybrin-custom-scrollbar::-webkit-scrollbar-thumb
{
border-radius: 10px;
background-image: -webkit-gradient(linear,
left bottom,
left top,
color-stop(0.44, rgb(53, 102, 247)),
color-stop(0.72, rgb(53, 102, 247)),
color-stop(0.86, rgb(53, 102, 247)));
}
.sybrin-biometrics-loader-wrapper {
background-color: white;
z-index: 6;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.sybrin-biometrics-loader {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
top: 50%;
transform: translateY(-50%);
}
.sybrin-biometrics-loader div {
position: absolute;
width: 6px;
height: 6px;
background: #0078c8;
border-radius: 50%;
animation: sybrin-biometrics-loader 1.2s linear infinite;
}
.sybrin-biometrics-loader div:nth-child(1) {
animation-delay: 0s;
top: 37px;
left: 66px;
}
.sybrin-biometrics-loader div:nth-child(2) {
animation-delay: -0.1s;
top: 22px;
left: 62px;
}
.sybrin-biometrics-loader div:nth-child(3) {
animation-delay: -0.2s;
top: 11px;
left: 52px;
}
.sybrin-biometrics-loader div:nth-child(4) {
animation-delay: -0.3s;
top: 7px;
left: 37px;
}
.sybrin-biometrics-loader div:nth-child(5) {
animation-delay: -0.4s;
top: 11px;
left: 22px;
}
.sybrin-biometrics-loader div:nth-child(6) {
animation-delay: -0.5s;
top: 22px;
left: 11px;
}
.sybrin-biometrics-loader div:nth-child(7) {
animation-delay: -0.6s;
top: 37px;
left: 7px;
}
.sybrin-biometrics-loader div:nth-child(8) {
animation-delay: -0.7s;
top: 52px;
left: 11px;
}
.sybrin-biometrics-loader div:nth-child(9) {
animation-delay: -0.8s;
top: 62px;
left: 22px;
}
.sybrin-biometrics-loader div:nth-child(10) {
animation-delay: -0.9s;
top: 66px;
left: 37px;
}
.sybrin-biometrics-loader div:nth-child(11) {
animation-delay: -1s;
top: 62px;
left: 52px;
}
.sybrin-biometrics-loader div:nth-child(12) {
animation-delay: -1.1s;
top: 52px;
left: 62px;
}
@keyframes sybrin-biometrics-loader {
0%,
20%,
80%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
}
@media screen and (max-width: 800px) {
.sybrin-biometrics-half {
float: none;
width: 100%;
margin: auto;
}
.sybrin-biometrics-block-prompt {
min-height: auto;
}
}
@media screen and (max-width: 500px) {
.sybrin-biometrics-container {
padding: 6px;
}
.sybrin-biometrics-block-icon {
margin: 12px !important;
}
.sybrin-biometrics-block-prompt {
margin: 12px !important;
}
.sybrin-biometrics-half {
padding: 6px;
}
.sybrin-biometrics-block-button {
margin: 12px auto !important;
width: calc(100% - 24px);
}
.sybrin-biometrics-flow-button {
margin: 6px !important;
width: 100%;
max-width: calc(100% - 12px);
}
.sybrin-biometrics-component-section {
padding: 6px;
}
.sybrin-biometrics-list {
padding: 8px;
}
.sybrin-biometrics-card {
padding: 8px;
}
.sybrin-biometrics-text {
margin-left: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - 60px);
}
.sybrin-biometrics-align-left {
text-align: center;
}
.sybrin-biometrics-align-right {
text-align: center;
}
.sybrin-biometrics-button-section {
text-align: center;
}
.sybrin-biometrics-passive-prompt-container {
padding-top: 12px;
padding-bottom: 12px;
}
.sybrin-biometrics-result-image-container {
width: 100%;
}
}
.sybrin-biometrics-modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.sybrin-biometrics-modal {
width: 100%;
max-width: 450px;
margin: auto;
position: relative;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.sybrin-biometrics-modal-message {
background-color: white;
border-top: 2px solid rgb(234, 239, 253);
border-left: 2px solid rgb(234, 239, 253);
border-right: 2px solid rgb(234, 239, 253);
border-top-left-radius: 8px;
border-top-right-radius: 8px;
width: calc(100% - 48px);
padding: 24px;
}
.sybrin-biometrics-modal-commands {
background-color: white;
border-bottom: 2px solid rgb(234, 239, 253);
border-left: 2px solid rgb(234, 239, 253);
border-right: 2px solid rgb(234, 239, 253);
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 0 0 24px 0;
width: 100%;
}
.sybrin-biometrics-modal-commands button {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
color: white;
font-weight: bold;
padding: 16px;
text-decoration: none;
text-align: center;
cursor: pointer;
background: rgb(53, 102, 247);
width: 224px;
border: 2px solid rgb(53, 102, 247);
}
@media screen and (max-width: 500px) {
.sybrin-biometrics-modal {
width: calc(100% - 48px);
}
}
@media screen and (max-width: 310px) {
.sybrin-biometrics-modal-commands button {
width: calc(100% - 48px);
}
}