Biometrics Web SDK
2.4.3
Search…
⌃K

Demo Application

The code example can be downloaded by clicking the file link below
sybrin-biometrics-websdk-demo-application-2.4.3.zip
6MB
Binary
Download
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 authorization and liveness as provided by Sybrin
Then follow these steps:
  1. 1.
    Download the sybrin-biometrics-websdk-demo-application.zip file linked above
  2. 2.
    Extract the zip file contents
  3. 3.
    Open ui/index.js
  4. 4.
    Follow JavaScript API and component initialization with the authorization method of your choice
  5. 5.
    Host the UI folder in any hostable environment, e.g. IIS
If you would like to use then companion API or your own middleware implementation, please see the 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.
index.html
index.js
index.css
sybrin.biometrics.css
<!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" />
<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">
</div>
</header>
<div id="viewport" class="viewport">
<div class="sybrin-demo-loading">
Please wait. Loading...
</div>
</div>
</body>
</html>
function detectIE() {
try {
var isIE = false || !!document.documentMode;
if (!isIE) {
if (navigator.userAgent.indexOf("MSIE") > 0) {
return true;
} else {
return false;
}
}
return true;
} catch(e) {
return true;
}
};
var isIE = detectIE();
if (isIE) {
alert('Browser not supported');
}
document.addEventListener('DOMContentLoaded', function (event) {
var biometrics = new Sybrin.Biometrics.Api();
var options = new Sybrin.Biometrics.Options({
apiKey: 'your-api-key-here',
integrationMode: 0,
authEndpoint: 'your-auth-endpoint-here',
passiveLivenessEndpoint: 'your-liveness-endpoint-here',
});
biometrics.initialize(options);
biometrics.getVersionInfo().then(function (versionInfo) {
document.getElementsByClassName('title').item(0).innerHTML = 'Sybrin Web SDK - Biometrics (version ' + versionInfo.webSdkVersion + ')';
});
biometrics.checkCompatibility(true);
var currentComponent = null;
var initWizard = function() {
if (currentComponent) {
currentComponent.destroy();
}
currentComponent = new Sybrin.Biometrics.WizardComponent({
id: 'viewport',
api: biometrics
});
currentComponent.initialize();
currentComponent.onWizardDone = function(result) {
alert(JSON.stringify(result));
}
currentComponent.onLivenessError = function(error) {
console.error(error);
}
currentComponent.onLivenessCancelled = function() {
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 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 1.5rem !important;
border-radius: 50rem !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: 342px;
margin: auto;
}
.sybrin-biometrics-container {
position: relative;
padding: 12px;
width: 100%;
margin: auto;
background-color: white;
box-sizing: border-box;
border-radius: 8px;
}
.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;
}
.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;
box-sizing: content-box;
}
.sybrin-biometrics-icon {
float: left;
width: 48px;
text-align: center;
}
.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-container {
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 {
display: block;
width: 100%;
max-width: 480px;
z-index: 4;
}
.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;
text-align: center;
}
.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-biometrics-mobile-capture-url {
word-break: break-all;
}
.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-hidden {
display: none;
}
.sybrin-biometrics-guideline-component {
text-align: center;
}
.sybrin-biometrics-guideline-header {
margin: 16px 0;
}
.sybrin-biometrics-guideline-container {
display: block;
}
.sybrin-biometrics-guideline {
padding: 12px 8px;
margin: 0 12px 16px 12px;
}
.sybrin-biometrics-guideline-icon {
float: left;
height: 25px;
width: 10%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.sybrin-biometrics-guideline-icon svg {
height: 100%;
}
.sybrin-biometrics-guideline-text {
float: right;
text-align: left;
width: 85%;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.sybrin-biometrics-loader-wrapper {
background-color: white;
z-index: 6;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
}
.sybrin-biometrics-loader {
display: inline-block;
width: 1rem;
height: 1rem;
vertical-align: text-bottom;
border: 0.2em solid currentColor;
border-right-color: transparent;
border-radius: 50%;
-webkit-animation-name: sybrin-biometrics-loader;
animation-name: sybrin-biometrics-loader;
-webkit-animation-duration: 0.75s;
animation-duration: 0.75s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
position: relative;
top: 50%;
transform: translateY(-50%);
}
@-webkit-keyframes sybrin-biometrics-loader {
0% {
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
100% {
-webkit-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
}
}
@keyframes sybrin-biometrics-loader {
0% {
-webkit-transform: translateY(-50%) rotate(0deg);
transform: translateY(-50%) rotate(0deg);
}
50% {
-webkit-transform: translateY(-50%) rotate(180deg);
transform: translateY(-50%) rotate(180deg);
}
100% {
-webkit-transform: translateY(-50%) rotate(360deg);
transform: translateY(-50%) rotate(360deg);
}
}
@media screen and (max-width: 800px) {
.sybrin-biometrics-half {
float: none;
width: 100%;
margin: auto;
}
}
@media screen and (max-width: 550px) {
.sybrin-biometrics-buttons-small .sybrin-biometrics-flow-button {
width: 200px;
}
}
@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% !important;
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);
}
}