An attendance tracking system that uses face recognition
- Technology Stack
- Features of the Application
- Face API Implementation
- Installation
- Support and Contact
- User information is saved in the MongoDB Cloud.
- The password is hashed first and then stored.
- Google API is used to implement the feature.
- User information is saved in the MongoDB Cloud.
- At least two images for facial recognition have to uploaded by each student.
- Using course ID students can enrol into courses.
- Enlists a course that a student could enrol in.
- 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.
- Percentage and names of absentees can be seen by both the users.
- Lecturers can schedule to inititiate an attendance transaction at a particular time and date.
- The lecturer can remove students from a course.
- Users can change their profile picture.
- Students enrolled in a course get notified when the attendance sheet is opened.
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.
- 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.
This project uses 3 pretrained models:
- Face Detection Model
- Facial Landmark Detection Model
- Feature Extraction Model
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.
To install and run the project on your local system, following are the requirements:
- 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.
Initialise git on your terminal.
git init
git clone https://github.com/ishikapandey/Upasthit.git
- 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
- Create a project named "Upasthit" and create a cluster named "Upasthit-Cluster".
- Adding IP whitelist "0.0.0.0" to allow all network access.
- 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".
- 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).
- 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.
Email To: [email protected]
(Back to top)