Balachandra DS
7 min readOct 13, 2022

--

Hello everyone, it’s been a long time. I have been living on Rita Mae Brown’s quote lately and finishing all my work at the eleventh hour and so I decided that I have procrastinated enough and it’s time to show my team’s minor project which was done during our 3rd year of Engineering course.

If it weren’t for the last minute, nothing would get done — Rita Mae Brown

“Fugitive Detection Traffic System for a safer society”

As the title is self explanatory, we designed a system that uses traffic cameras to identify fugitives whose pictures are present in any current database. Not only this, any weapon whose pictures were previously used to train the ML model would be recognised using our system.

This project was our take on God’s Eye prototype just leaving out the illegal hacking thingy (checkout Fast and Furious if you didn’t get that) and as I have given you a great movie recommendation, lets start with some technicalities on how we achieved this.

Frameworks and Tools Used

To accomplish our objective, we employed variety of frameworks and tools, from designing it with Figma to deploying it.

  • Flask — A micro framework used for creating backend server.
  • Firebase — A database to update the details of fugitives and firearms found which included fugitive and weapon details, time, location and more.
  • Web Speech API — Text to speech synthesis used to define the users on how the system works.
  • Anaconda — Used for creating a virtual environment to run our project
  • YOLO Algorithm — ‘You only look once’, an algorithm that uses neural networks to provide real-time object detection, this was used for firearm detection.
  • Face Recognition Algorithm — to detect faces and bounding boxes were drawn around the detected faces. After detecting the faces and names of the person are displayed as annotations.
  • Threading concepts — For running multiple algorithms concurrently and also using multiple camera feeds concurrently.
  • Figma — It is a vector graphics editor and prototyping tool. This was used to collaborate on finalising our design for the frontend of our project’s design .

Phase I: Planning and Designing

Firstly all the most required features were penned down, from the impossible ones to achievable ones which was to identify any fugitive or weapon, store their details on database, login, forget password, and lastly ML Models to use. Then, designing was done with the requirements in mind and a carefully selected palette to match our system and the results were awesome. Here’s a sneak peek.

Home Page

Final designs will be attached in the end. Don’t scroll down now, let the suspense build :P

Phase II: Implementation

Now comes the part which everyone is waiting for, making your ideas come into reality — CODING!!!!!

I have listed out major actions of the projects below:

  • Creating a virtual environment: A virtual environment was created using Conda and all required libraries were installed for working of project like opencv.
  • Creating server and routes: Flask is micro framework which we are using as a backend server. Here various routes are defined for each client queries. When a user tries to access the home page by route “/” basic () function is executed and message.html is sent as a response from the server. Similarly various routes like video-feed, table, login, forgot password, logout, reset are defined, and responses are sent to the client.
Server Routes

- “/” is the route for the homepage of the system which has various components including webcam feed, fugitive and weapon detected details.
- “/video feed” is the route to define the web camera or traffic camera feed on a website by passing the feed to models for detection and later taking the output frames and passing it to the container on homepage in real-time. Similarly other routes were defined.

  • Running the models concurrently: We are using threads to run the image and object detection models on thread and using lock variables to pass and process the frames through both the models. Once a fugitive is detected, boundary boxes are drawn on frames, Lock is applied and frames are saved to later render on the homepage. Current date and time are saved using datetime and updated on firebase and detected fugitive’s details are added to the dictionary and same goes for weapons.
    We then use a lock variable to copy the frame which is processed from models to the output website.
Starting a Thread
  • Login and Password reset implementation: Here firebase authentication is used to authenticate email and password and redirect to homepage if email and password matches or send an error message and redirect them back to the login page. A Forgot password HTML template was created and used when user clicked forgot password button. Logout functionality is done by destroying the current user token and redirect them to the login page.
Login Implementation
  • Database setup and queries: Firebase project setup was completed and linked to our flask app and a skeleton structure of database was completed. Pyrebase was used as a python module for interacting with firebase database and authentication, once the API key is mentioned and config is passed as an argument, firebase is initialized, and the database is accessed using the .auth() functions.
Python wrapper to interface with firebase - Pyrebase

To get the values stored in the database, the .get() function is used and all the values are assigned to their respective variables and passed to the template to display.

Get() function

This is how the database looks after date and time is updated when a fugitive or weapon is detected. These details are fetched to display on the homepage

Database
  • AJAX Requests: AJAX is used to write client side asynchronous requests which means only the part of code is loaded once the response is received instead of the whole webpage and the requests doesn’t hinder other elements to load. The request is sent to flask and flask serves the proper response as a html response.

Here URL, type of request is mentioned and when the response is received, response is added inside the element with tag #dataref

AJAX Request

High Level Flowcharts

Login Page Flow
Home Page Flow
Fugitive or Weapons Page

The End Results

Login Page
Forgot Password Page
Forgot Password Email Template
Home Page (When no fugitive or weapon is detected)
Home Page — When fugitive detected
Home Page — When weapon detected
Fugitive found page
Weapons found page

This project was completed by joint efforts of me and my teammates under the guidance of Prajakta Madankar, Associate professor, Dept of ISE, The National Institute of Engineering, Mysore.

Teammates:

If you have any queries regarding the project or want to suggest some enhancements , comment below.

If you learned even a thing or two, clap your hands 👏 as many times as possible to show your support!

About the author: Balachandra DS is a Software Engineer who is passionate about developing Mobile and Web apps. You can connect with him on Twitter, LinkedIn, and GitHub.

--

--