facial-authentication-browser

Authenticating Users With Face Recognition in the Browser

Usage:

It's a small web application with 3 primary tabs:

1. Enroll
2. Authenticate
3. Modify

Enrollment

To enroll new users, make sure the face of the candidate is clearly visible in the webcam output and click the "Capture" button. The button remains disabled while the face detection and recognition models run in the background. Once finished, the button becomes active again and you can continue taking pictures (upto 3).

You then just need to enter your details and press the "Enroll" button. Note, here USN is a unique identifier of the individual and cannot be the same for any two enrollments.

Authentication

To authenticate existing users, switch to the "Authenticate" tab (on the left). Again, make sure the individual's face is clearly visible in the webcam output and press the "Authenticate" button. The application then searches for best matches amongst the enrollments already existing and changes the "Authenticate" button's message to a welcome message.

Modify

Not yet implemented.

Note: It is recommended to use a server to view the application rather than opening the index.html file in your browser. A simple option is the http-server npm package. Simply install it with npm install http-server -g and navigate to the root of this repo (i.e. the folder containing the public folder) and on your terminal enter http-server. You can then navigate to localhost:8080 to view the application.

Development

Components

The application is made up of a single index.html file and styled with an accompanying styles.css file. It heavily relies on Bootstrap for layout and overall UI.

For the actual face detection, recognition and landmark detection, the library uses face-api.js. face-api.js provides a number of choices for models and you can learn about using them on its GitHub page. A few pointers to ease your usage and avoid common pitfalls:

1. Load the models before you use them (see Loading the Models)
2. To use models other than default ones, provide the respective options object as a parameter to the detectSingleFace() or detectAllFaces() methods. You can read about it in more detail on the face-api.js GitHub page.

The current implementation makes use of MySQL as the datastore. The older storage system is implemented in the browser with PouchDB and only implements in-browser storage. You are free to extend it to interact with your own server.

A simple mainScript.js file contains the application logic. It has three functions: capture(), enroll() and authenticate(). A run() function sets up the application soon as the document is ready.

Extending

Pull requests are welcome :D