#Semester Project - Massively Available Surveillance System

Class : BESE-12A
Name : Attiya Waqar
CMS ID : 369841
Name : Muhammad Qasim
CMS ID : 365788

Working

Technologies

• MongoDB for the database
• Express for routing
• React for frontend
• Node JS for backend
• Bootstrap for basic styling
• Arduino IDE for burning microcontroller
• Ardiono for image capturing and sending

Architectural Diagram


Implementation

The landing page for the website is the Login Page where the user has to login and authenticate himself. On each login the user gets assigned a refresh and access token that gets stored in the database. If the user doesn't already have an existing account, the user can register himself at the 'register' page. After registering himself with valid information, the user account gets stored in the backend where API calls send the information entered by the user to the backend for storage and vaidation. Then the user is brought back to the login page where he is asked to enter his credentials so he can login to the website and access all the private routes well. The only public routes are the login and register routes which can be accessed by anyone. All other routes will be private and will only be accessible by authenticated logged in users. When a user logs out, information about the user gets removed and the user has to log back to get authenticated again.

On the Dashboar page, the user gets access to the camera feeds from the active cameras. Each camera feed has an Image Detection Algorithm running at the backend that constantly scans for the appearance of any human in a frame. If a human is detected, an Alert is sent to the frontend from the badckend server notifying the user of the Alert.

Login and Register

The interface provides simple and self-expanatory input fields. Where
Username : The username is unique and is the attribute used to identify different users
Password : The password field allows the user to enter anything as password


Validating User Input

The Login Page asks the user for their “username” and “password”. At the backend side, the data is received using the POST API method and the database is checked for if such a user exists. If such a user doesn’t exist an error message is displayed telling the user that invalid credentials were entered.

The “Dont have an account?” link is set, so users who don’t already have an account can go to this link and register one with the register form.


When the user enters their details in the register form and submits, a POST API call to the backend is sent, where the backend checks the database if such a user already exists or not. If such a username already exists, an error message is displayed telling the user that the User Already Exists.

The user can not submit an empty field


Storing User Accounts in a Database

All the user accounts are stored in the MongoDB database running at the backend side.

Dashboard

Every page has the ‘header’ component that contains the navigation bar along with the Logout button that allows the user to sign out of his account.

The ‘Dashboard’ page contains the live feeds of all the active cameras along with the current state of the map and real time alerts on the other side of the page. The alerts get updated as a camera picks up a feed of a human entering the camera vision and sends it to the front end for the user to see.

Header


Add Configuration

The ‘Add Configuration’ form allows the user to set up another camera associated with a specific location on the map and stores it at the backend as well.