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'constenroll=newKeylessEnroll()// 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 webcamconstframes= ['base16-frame-1','base16-frame-2','...']enroll.on('begin-image-stream',async () => {awaitenroll.sendImageStream(frames[0])// remove used frameframes.shift()})enroll.on('error', (event) => {// will log the error codeconsole.error(event.message)})enroll.on('image-accepted', () => {if (frames.length<=0) {thrownewError('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 4fpssetTimeout(async () => {awaitenroll.sendImageStream(frames[0])// remove used frameframes.shift() },200)})enroll.on('finished-enrollment', (event) => {// will log details about this enrollmentconsole.log(event.detail)})awaitenroll.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.