Enrollment is the process of registering a new user by connecting their facial biometrics to a Keyless account. During this process, a full and unobstructed view of the user's face is required.
Enrollment with Web SDK can happen in two ways:
Interactive Enrollment, through the Keyless Web SDK JS libraries
In this document we'll explain how to perform only interactive enrollment on the front-end, for silent enrollment please check this dedicated page.
Headless Integration
The @keyless/sdk-web library lets you integrate the Keyless Web SDK however you want in terms of UI/UX, let's see a basic example of enrollment:
import { KeylessEnroll } from '@keyless/sdk-web'
const enroll = new KeylessEnroll()
// in order to perform an interactive enrollment you need to pass a liveness check,
// this means that you need to have multiple natural different frames of the face,
// they should be captured from a live camera feed like a webcam
const frames = ['base16-frame-1', 'base16-frame-2', '...']
enroll.on('begin-image-stream', async () => {
await enroll.sendImageStream(frames[0])
// remove used frame
frames.shift()
})
enroll.on('error', (event) => {
// will log the error code
console.error(event.message)
})
enroll.on('image-accepted', () => {
if (frames.length <= 0) {
throw new Error('No more frames')
}
// some time needs to pass between one frame and the other,
// this is handled gracefully in our web components by having a framerate of 4fps
setTimeout(async () => {
await enroll.sendImageStream(frames[0])
// remove used frame
frames.shift()
}, 200)
})
enroll.on('finished-enrollment', (event) => {
// will log details about this enrollment
console.log(event.detail)
})
await enroll.connect({
key: { id: 'IMAGE_ENCRYPTION_KEY_ID', value: 'IMAGE_ENCRYPTION_PUBLIC_KEY' },
username: 'USERNAME',
ws: { url: 'KEYLESS_AUTHENTICATION_SERVICE_URL' }
})
In this example we handle all the necessary events to perform an enrollment with a continous stream of face frames, and if it fails the error code will be logged to the console.
Web Component Integration
Previously we have explained how to perform enrollment in a headless way with the @keyless/sdk-web package, now we'll provide an example of doing so with raw HTML syntax.
That's it, everything is handled by the @keyless/sdk-web-components package, especially the more complex parts of capturing camera frames and sending them at a proper framerate to the authentication service.