ishikapandey/upasthit

An attendance tracking system that uses face recognition

Upasthit

An attendance tracking system that uses face recognition

Visit the web application

Table of contents

• Technology Stack
• Features of the Application
• Face API Implementation
• Installation
• Support and Contact

Technology Stack

MongoDB

ReactJS

NodeJS

Github

GraphQL

(Back to top)

Features of the Application

 Register and Login with Email ID and Password

• User information is saved in the MongoDB Cloud.
• The password is hashed first and then stored.

 Login with Google

• Google API is used to implement the feature.
• User information is saved in the MongoDB Cloud.

 User - Student

• At least two images for facial recognition have to uploaded by each student.
• Using course ID students can enrol into courses.

 User - Lecturer

• Enlists a course that a student could enrol in.

 Attendance Room

• A lecturer opens the attendance list.
• Students can mark their attendance using webcam.
• Attendance is marked when the face matches with the images in the database.
• Attendance cannot be marked after the lecturer has closed the attendance sheet.

 Attendance History

• Percentage and names of absentees can be seen by both the users.

 Schedule Attendance Transaction

• Lecturers can schedule to inititiate an attendance transaction at a particular time and date.

 Remove student from a course

• The lecturer can remove students from a course.

 Profile Picture

• Users can change their profile picture.

 Notification

• Students enrolled in a course get notified when the attendance sheet is opened.

(Back to top)

Face API Implementation

This web application uses face-api.js

Face-api.js is a JavaScript API for face detection and face recognition in the browser implemented on top of the tensorflow.js core API. It implements a series of convolutional neural networks (CNNs), optimized for the web and for mobile devices.

Processes involved in Face Recognition

• Face registration: It is a process to store the features of a face into the file system or database.
• Face matching: It is a process to match the face between the detected features with the other existing features in our dataset either using a classifier or distance metric algorithm.

The process of face recognition includes face detection, face alignment, feature extraction and feature matching.

Models Used

This project uses 3 pretrained models:

• Face Detection Model
• Facial Landmark Detection Model
• Feature Extraction Model

Source Link

There is a total of 8 required weight files with the respective metadata file required. Each model had been quantized to a size less than 10 MB to improve the recognition speed.

      

(Back to top)

Installation

To install and run the project on your local system, following are the requirements:

Prerequisites

• You will need a dependency managers such as npm, yarn, brew, etc.
• Download and install NodeJS if you do not have it already: https://nodejs.org/en/download/
• In CMD type "node --version" to check NodeJS have been installed.
• In CMD type "npm --version" to check Node Package Manager (NPM) also have been installed.

Setting up the project

Step 1: Clone this repository.

Initialise git on your terminal.

git init
git clone https://github.com/ishikapandey/Upasthit.git

Step 2: Install the dependencies

• Open project in Visual Studio Code or any IDE.
• Open CMD in VSCode, change directory to "client" folder and install the dependency

cd client && npm i

• Open another terminal, change directory to "server" folder and install the dependency

cd server && npm i

Step 3: Create an account in MongoDB Cloud and configure

• Create a project named "Upasthit" and create a cluster named "Upasthit-Cluster".
• Adding IP whitelist "0.0.0.0" to allow all network access.

Step 4: Create an account in Cloudinary media storage and configure

• In tab "Media Library", create folder named "Upasthit".
• Inside folder "Upasthit", create another two folders named "ProfilePicture" and "FaceGallery".
• Click Setting icon on top right.
• Under tab "Upload", scroll down until you see "Upload presets".
• Click "Add upload preset", set Upload preset name to "upasthit_facegallery" and folder set to "Upasthit/FaceGallery".
• Leave the others as default and click "Save".
• Again, click "Add upload preset", set Upload preset name to "upasthit_profilepicture" and folder set to "Upasthit/ProfilePicture".
• Leave the others as default and click "Save".

Step 5: Create Google OAuth Credential to enable google login and sending email

• Go to GCP console: https://console.cloud.google.com/apis.
• Create an OAuth credential for google login.
• Under tab "Credentials", click "Create Credential" and choose "OAuth client ID".
• Choose the application type "Web Application".
• Name the OAuth client name "Google Login".
• Add the javascript origin: http://localhost:3000, https://ishika-engage.netlify.app
• Add the redirect uri: https://developers.google.com/oauthplayground.
• Click "Save".
• Create an OAuth credential for email sending.
• Under tab "Credentials", click "Create Credential" and choose "OAuth client ID".
• Choose the application type "Web Application".
• Name the OAuth client name "Mail".
• Add the javascript origin: http://localhost:4000, https://ishika-engage.netlify.app
• Add the redirect uri: https://developers.google.com/oauthplayground.
• Click "Save".
• Under tab "OAuth Consent Screen", enter the required info (app name, app logo, app uri, privacy policy, etc).

Step 6: Configure server environment variables.

• Inside the "server" folder, create a file named ".env" used to save the credential data of database, API and so on.
• Inside ".env" file, create 10 variables named "MONGO_URI", "SECRET_KEY", "CLOUDINARY_NAME", "CLOUDINARY_API_KEY", "CLOUDINARY_API_SECRET", "GOOGLE_OAUTH_USERNAME", "GOOGLE_OAUTH_CLIENT_ID", "GOOGLE_OAUTH_CLIENT_SECRET", "GOOGLE_OAUTH_REFRESH_TOKEN" and "GOOGLE_OAUTH_REDIRECT_URI".
• Assign values to these variables from the accounts created above.

(Back to top)

Support and Contact

Email To: [email protected]
(Back to top)