Hand Gesture Recognition System For Finger Counting Using

Computer Vision And Machine Learning (python)

A project report submitted to Jawaharlal Nehru Technological University,- GV in the partial
fulfillment of the requirements for the award of degree of
BACHELOR OF TECHNOLOGY
In

ELECTRONICS AND COMMUNICATION ENGINEERING

Submitted by

Y. JYOHINI [Link].22811A0477
[Link] [Link].23815A0412
K. TULASI [Link].22811A0479
[Link] PRASAD [Link].23815A0423

Under the esteemed guidance of

Ms. S. Sirisha MTech.

Assistant Professor

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

AVANTHI INSTITUTE OF ENGINEERING & TECHNOLOGY

(Approved by AICTE, Permanently Affiliated to JNTU- GV, AP, NAAC A+

Accredited Institution)
TAMARAM (P.O), MAKAVARAPALEM (M.O), NARSIPATNAM (R.D), ANAKAPALLE
DISTRICT-531113
(2022-2026)

10
AVANTHI INSTITUTE OF ENGINEERING & TECHNOLOGY
(Approved by AICTE and Permanently Affiliated to JNTU Vizianagaram, AP) (A NAAC A+
Accredited Institution)
TAMARAM (P.O), MAKAVARAPALEM (M.O), NARSIPATNAM (R.D), ANAKAPALLE DISTRICT-
531113

DEPARTMENT OF ELECTRONICS AND COMMUNICATION ENGINEERING

CERTIFICATE

This is to certify that the project work entitled “Hand Gesture Recognition System For
Finger Counting Using Computer Vision And Machine Learning (python)” is being
submitted for the partial fulfilment of requirements for the award of Bachelor of Technology
in Electronics and Communication Engineering at AVANTHI INSTITUTE OF
ENGINEERING & TECHNOLOGY, Makavarapalem, Anakapalle is a Bonafide work
done by
under the guidance and supervision during 2025-2026 and it
has been found suitable for acceptance according to the requirements of the university.

INTERNAL GUIDE HEAD OF THE DEPARTMENT

Ms. S. SIRISHA Dr. E. GOVINDA M. Tech., Ph.D.
Assistant Professor Professor
Department of ECE Department of ECE

EXTERNAL EXAMINER
 ACKNOWLEDGMENT
Concentration, dedication, and application are necessary but not sufficient to achieve any goal.
Therefore, it is our pleasant duty to offer our service of acknowledgement to those honorable
personalities of the department who helped us to follow the path to success for the completion
of this project.

We express our heartiest thanks to the management and our college principal Dr.C.P.V.N.J
MOHAN RAO [Link]., Ph.D for extending his utmost support and cooperation in providing all
provisions for the successful completion of the project.

We are also thankful to Dr. E. GOVINDA M. Tech., Ph.D., Head of the department of Electronics
and communication engineering for providing his support and encouragement at every step in
completing this project successfully.

We are also grateful to the project guide Ms. S. SIRISHA [Link] Assistant Professor,
department of ECE, for her excellent guidance right from selection of the project and her
valuable suggestions throughout the project.

We would like to express our special gratitude to teaching and non-teaching staff of the
Electronics and Communication Department, my friends and my seniors, who are always a
source of inspiration for us and played an important role in making the project a memorable
one.

PROJECT ASSOCIATES

Y. JYOHINI (22811A0477)
M. NAVYASRI (22815A0412)
K. TULASI (22811A0479)
[Link] PRASAD (23815A0423)

2
 DECLARATION

We here by declare that the project entitled “Hand Gesture Recognition System For Finger
Counting Using Computer Vision And Machine Learning (python)” is a bonafide work
done by us and submitted for the partial fulfilment for the award of degree of BACHELOR OF
TECHNOLOGY in the department of ELECTRONICS AND COMMUNICATION
ENGINEERING at AVANTHI INSTITUTE OF ENGINEERING AND [Link]
the best of our knowledge, the matter embodied in the project has not been submitted to any
other University/Institute of any degree.

PROJECT ASSOCIATES

Y. JYOHINI (22811A0477)
M. NAVYASRI (22815A0412)
K. TULASI (22811A0479)
[Link] PRASAD (23815A0423)

3
 TABLE OF CONTENTS

ABSTRACT

CHAPTER-1 INTRODUCTION
1.0 INTRODUCTION
2.0 OVERVIEW
3.0 EXISTING SYSTEM
4.0 PROPOSED SYSTEM

CHAPTER-2 LITERATURE SURVEY

2.1 TRADITIONAL METHODS
2.2 MACHINE LEARNING BASED ALGORITHMS
2.3 ALGORITHMS USED FOR FINGER COUNTING
2.4 TOOLS AND TECHNOLOGIES USED
2.5 RECENT ADVANCEMENTS IN GESTURE RECOGNITION
2.6 SUMMARY OF LITERATURE FINDINGS

CHAPTER-3 SYSTEM ANALYSIS

3.1 TECHNICAL STUDY
3.2 FUNCTIONAL REQUIREMENTS
3.3 NON-FUNCTIONAL REQUIREMENTS
3.4 SYSTEM REQUIREMENTS

CHAPTER-4 SOFTWARE ENVIRONMENTS

4.1 OPERATING SYSTEM
4.2 PROGRAMMING LANGUAGE & ALGORITHM
4.3 DEVELOPMENT FRAMEWORKS & LIBRARIES
4.4 INTEGRATED DEVELOPMENT ENVIRONMENTS (IDES) & TOOLS
4.5 GPU & HARDWARE ACCELERATION SUPPORT
4.6 DEPLOYMENT ENVIRONMENT
4.7 VERSION CONTROL & COLLABORATION

4
CHAPTER-5 SYSTEM DESIGN
5.1 INPUT DESIGN
5.2 OUTPUT DESIGN
5.3 DATA FLOW DIAGRAM
5.4 UML DIAGRAM

CHAPTER-6 IMPLEMENTATION
6.1 MAIN SAMPLE CODE

CHAPTER-7 OUTPUT SCREENS

CHAPTER-8 TESTING
8.1 INTRODUCTION TO TESTING
8.2 SAMPLE TEST CASES

CHAPTER-9 CONCLUSION

CHAPTER-10 REFERENCES

LIST OF FIGURES
5.3 DATA FLOW DIAGRAM (DFD)
[Link] USE CASE DIAGRAM
[Link] CLASS DIAGRAM
[Link] SEQUENCE DIAGRAM
[Link] ACTIVITY DIAGRAM
LIST OF TABLES
3.4.1 HARDWARE REQUIREMENTS
3.4.2 SOFTWARE REQUIREMENTS
8.2 SAMPLE TEST CASES

5
 ABSTRACT

Hand Gesture Recognition is an emerging field in Computer Vision that enables natural interaction
between humans and machines. This project focuses on developing a real-time finger counting
system using Computer Vision and Machine Learning techniques implemented in [Link]
system captures live video input through a webcam and processes the frames to detect hand
landmarks. Using MediaPipe’s hand tracking model and OpenCV, the system identifies finger
positions and counts the number of raised fingers accurately. The proposed model leverages
landmark detection rather than traditional image thresholding, thereby improving accuracy under
varying lighting conditions. The system can detect multiple hands and compute total finger count
in real time. This project demonstrates the practical implementation of Machine Learning-based
pose estimtion for gesture recognition. The application is developed using Streamlit for user
interaction and WebRTC for real-time video streaming. It provides a simple and interactive
interface where users can display their fingers in front of the camera and receive instant results.
This project has applications in human-computer interaction, virtual classrooms, sign language
systems, gaming, robotics control, and touchless interfaces. The system is lightweight, efficient,
and deployable on standard computing devices without requiring specialized hardware.

The overall objective is to build an accurate, user-friendly, and scalable finger recognition system
using modern AI tools.

6
CHAPTER-1

INTRODUCTION

7
1.1 INTRODUCTION
In recent years, Human-Computer Interaction (HCI) has evolved significantly with the
integration of Artificial Intelligence and Computer Vision technologies. Traditional input
devices such as keyboards and mice are gradually being complemented by gesture-based
systems. Hand gesture recognition is one such technology that enables intuitive communication
between humans and machines.

Finger counting using vision-based systems is an important subset of gesture recognition. It

allows machines to interpret numeric gestures without physical contact. This project
implements a real-time hand gesture recognition system that counts the number of raised
fingers using a webcam.

The system uses landmark-based hand detection techniques instead of simple contour detection
methods. MediaPipe’s machine learning model detects 21 key hand landmarks, which are used
to determine whether fingers are raised or folded. This approach improves accuracy and
reduces dependency on background conditions.

The system is developed in Python due to its powerful ecosystem of libraries such as OpenCV,
MediaPipe, NumPy, and Streamlit. The application processes video frames in real-time and
overlays the detected finger count on the screen.

This project contributes to touchless technology development and demonstrates practical

implementation of AI-based vision systems in real-world applications.

1.2 Overview

The Hand Gesture Recognition System is designed to detect and count the number of raised fingers
using real-time video input. The system architecture consists of four major modules:

1. Video Capture Module

2. Hand Detection Module
3. Finger Counting Algorithm
4. User Interface Display Module

The webcam captures live video frames which are processed using OpenCV. Each frame is converted
from BGR to RGB format and passed to the MediaPipe Hands model. The model detects hand
landmarks and provides 21 coordinate points per detected hand.

8
The system identifies finger tips and compares their positions relative to lower joints. If the tip is
positioned above the lower joint (in Y-axis), the finger is considered raised. Special logic is used for
thumb detection depending on left- or right-hand orientation.

The counted fingers are displayed on-screen in real time. The application supports detection of two
hands simultaneously and calculates total finger count. The system is lightweight, runs efficiently, and
provides accurate detection under moderate lighting conditions.

1.3 Existing System

Overview of Existing Systems

Earlier hand gesture recognition systems relied on traditional image processing techniques such as:

● Skin color segmentation

● Background subtraction
● Edge detection
● Contour analysis

These systems were highly dependent on lighting conditions and background uniformity.
Limitations:

● Sensitive to lighting variations

● Poor performance in complex backgrounds
● Inaccurate finger detection
● Limited multi-hand support
● High preprocessing requirement

Most existing systems used thresholding to separate hand from background and convex hull defects to
count fingers. However, noise and shadows caused frequent misclassification.

Drawbacks of Existing Systems

1. Not robust to different skin tones

2. Fails under dynamic lighting
3. Cannot accurately distinguish left/right hand
4. Poor scalability
5. No integration with modern UI frameworks

These drawbacks created the need for a more reliable ML-based approach.

9
1.4 Proposed System
Overview of Proposed System
The proposed system uses a Machine Learning-based hand landmark detection model provided by
MediaPipe. Instead of relying on pixel segmentation, the system detects 21 key hand landmarks.

Key Features of Proposed System

1. Real-time detection using WebRTC

2. Landmark-based finger counting
3. Supports two hands simultaneously
4. Works in varying lighting conditions
5. Interactive UI using Streamlit
6. Accurate thumb detection using orientation logic

Working Principle

● Capture frame from webcam

● Convert to RGB
● Detect hand landmarks
● Identify finger tip coordinates
● Compare tip position with lower joints
● Count raised fingers
● Display total finger count

The implementation is based on your working application code which integrates OpenCV, MediaPipe,
Streamlit, and WebRTC for real-time performance.

10
 CHAPTER-2
LITERATURE SURVEY

11
2. LITERATURE SURVEY

Hand Gesture Recognition has been widely researched in the fields of Computer Vision, Artificial
Intelligence, and Human-Computer Interaction. Over the past two decades, several techniques have
been proposed ranging from traditional image processing approaches to advanced deep learning models.
This section reviews existing methodologies, algorithms, tools, and recent advancements relevant to
finger counting systems.

2.1 Traditional Methods

Early hand gesture recognition systems were primarily based on classical image processing techniques.
These methods did not rely on machine learning but instead used pixel-level operations to extract hand
features.

Skin Color Segmentation

One of the earliest techniques involved detecting skin-colored regions in images using HSV or YCbCr
color space. Pixels matching predefined skin color ranges were segmented to isolate the hand.

Limitations:

● Sensitive to lighting conditions

● Not robust across different skin tones
● Background interference

Background Subtraction

This technique required a static background. The moving object (hand) was extracted by subtracting
the current frame from a reference background.

Limitations:

● Requires controlled environment

● Poor performance in dynamic scenes

Contour Detection & Convex Hull

After segmentation, contour detection was applied to identify hand boundaries. Convex hull and
convexity defects were used to count fingers.

Limitations:

12
 ● Noise-sensitive
● Inaccurate for partially closed fingers
● Cannot distinguish left and right hand reliably

Although these methods were computationally simple, they lacked robustness and scalability.

2.2 Machine Learning-Based Algorithms

With the advancement of Artificial Intelligence, machine learning models significantly
improved gesture recognition performance.

Convolutional Neural Networks (CNNs)

CNNs became popular for image classification and gesture recognition tasks. They automatically
extract spatial features and classify gestures based on training data.
Advantages:

● High accuracy
● Learns complex features
● Suitable for static gesture classification

Disadvantages:

● Requires large labeled datasets

● High computational cost

Support Vector Machines (SVM)

SVM classifiers were used with handcrafted features such as HOG (Histogram of Oriented Gradients)
for gesture recognition.

Advantages:

 Effective for small datasets

 Good generalization

Disadvantages:

● Feature engineering required

● Limited real-time performance

MediaPipe Hand Landmark Model

13
The modern approach uses landmark-based detection instead of pixel segmentation.

MediaPipe uses:

1. Palm Detection Model

2. Hand Landmark Model (21 keypoints)

The landmark model predicts 3D coordinates of hand joints. Finger counting can be implemented using
geometric comparisons between tip and joint positions.

Advantages:

● Real-time performance
● Lighting robust
● Multi-hand support
● No heavy dataset training required

This approach is used in the proposed system.

2.3 Algorithms Used for Finger Counting
Different algorithms are applied specifically for counting raised fingers:
Geometric Rule-Based Approach
Finger tips are compared with lower joints:
● If fingertip Y-coordinate < lower joint Y-coordinate → Finger is raised
● Thumb detection based on X-coordinate comparison
This method is lightweight and suitable for real-time systems.
Deep Learning-Based Classification
Some systems train neural networks to classify gestures directly (e.g., 0–5 fingers).
Pros:
● High recognition accuracy
● Can detect complex gestures
Cons:
● Requires dataset training
● Slower inference speed
Hybrid Methods
Combination of landmark detection and neural classification improves accuracy and robustness.

2.4 Tools and Technologies Used

Modern gesture recognition systems rely on advanced software frameworks and libraries.

14
Python
Widely used programming language due to its extensive AI ecosystem and ease of implementation.

OpenCV
Used for:

● Video capturing
● Frame processing
● Image transformations
● Drawing overlays

MediaPipe
Provides:

● Pre-trained hand detection models

● 21 landmark detection
● Real-time performance optimization

NumPy
Used for numerical operations and coordinate calculations.

Streamlit
Used for building interactive web-based UI for real-time applications.

WebRTC
Enables real-time video streaming in browser-based applications.

2.5 Recent Advancements in Gesture Recognition

Recent research trends focus on:

1. 3D Hand Pose Estimation

2. Augmented Reality (AR) Interaction
3. Touchless Interfaces
4. Gesture Control for Robotics
5. Edge AI Deployment on Embedded Systems

Modern systems aim to achieve:

● Higher accuracy

15
 ● Low latency
● Device independence
● Scalability

Deep learning models combined with efficient frameworks such as MediaPipe have significantly
enhanced real-time gesture recognition performance.

2.6 Summary of Literature Findings

From the literature review, it is observed that:

● Traditional image processing methods lack robustness.

● Machine learning models improve classification accuracy.
● Landmark-based detection provides better performance for finger counting.
● Modern tools enable real-time deployment without complex hardware.

Therefore, the proposed system adopts a landmark-based approach using MediaPipe integrated with
OpenCV and Streamlit to achieve efficient and accurate finger counting.

16
 CHAPTER-3
SYSTEM ANALYSIS

17
 3. SYSTEM ANALYSIS

System Analysis is the process of examining the proposed Hand Gesture Recognition System to
understand its requirements, feasibility, performance expectations, and constraints. The primary goal of
this system is to detect and count raised fingers in real time using computer vision and machine learning
techniques.

The system captures live video through a webcam and processes frames using OpenCV and MediaPipe
libraries. It identifies hand landmarks and applies geometric logic to determine which fingers are raised.
The final output is displayed in real time through an interactive Streamlit web interface.

This analysis ensures that the system is technically implementable, economically viable, and
operationally practical. It also defines functional and non-functional requirements clearly before
development and deployment.

The system does not require specialized hardware and runs efficiently on standard computing devices.
Since the implementation is based on Python and open-source tools, the development cost is minimal.

The design focuses on real-time performance, accuracy, ease of use, and scalability. The analysis phase
helps in identifying possible risks such as lighting dependency, camera quality issues, and performance
bottlenecks.

Overall, the system is designed to be lightweight, efficient, and user-friendly while maintaining high
accuracy in finger counting tasks.

3.1 Feasibility Study

Feasibility study evaluates whether the proposed system can be developed successfully within available
resources and constraints.

3.1.1 Technical Feasibility

The proposed system is technically feasible because it uses established and reliable technologies such
as Python, OpenCV, and MediaPipe.

Technical Feasibility Points:

● Uses pre-trained MediaPipe hand detection model (no heavy training required)
● Runs on standard laptops/desktops with webcam
● Supports real-time processing using optimized ML models
● Compatible with Windows, macOS, and Linux
● Easy integration with Streamlit for UI

18
The required software tools are stable, well-documented, and widely supported. Hence, the project is
technically achievable.

3.1.2 Operational Feasibility

Operational feasibility checks whether the system can function effectively in real-world conditions.

Operational Feasibility Points:

● Simple user interface for interaction
● Requires only a webcam and internet browser
● Real-time finger counting display
● No special training required for users
● Suitable for classrooms, labs, and research environments

The system is easy to operate and can be used by students, researchers, and developers without
difficulty.

3.1.3 Economic Feasibility

Economic feasibility determines whether the project is cost-effective.

Economic Feasibility Points:

● Uses open-source libraries (No license cost)
● No need for specialized hardware
● Development cost is minimal
● Low maintenance cost
● Easily deployable without additional infrastructure

Since the project requires only a basic computer and webcam, it is highly economical.

3.2 Functional Requirements

Functional requirements define what the system should do.

3.2.1 System Inputs

The system accepts the following inputs:

● Live video stream from webcam

● Hand gestures (raised fingers)
● Multiple hand detection (up to two hands)
● User interaction via web interface

19
 ● The primary input is real-time image frames captured from the camera.

3.2.2 System Processing

The processing steps include:

● Capture video frame

● Convert BGR image to RGB
● Detect hand landmarks using MediaPipe
● Identify 21 keypoints per hand
● Compare fingertip and joint coordinates
● Count raised fingers
● Calculate total finger count
● Overlay result on video frame

The processing is performed continuously for each frame to ensure real-time response.

3.2.3 System Outputs

The system produces:

● Real-time finger count display

● Hand landmark visualization
● Total finger count (for one or two hands)
● On-screen graphical feedback

The output is displayed in the Streamlit web interface.

3.3 Non-Functional Requirements

Non-functional requirements define system quality attributes.

3.3.1 Performance Requirements

The system must:

● Process video frames in real time (minimum 15–30 FPS)

● Detect hands within milliseconds
● Provide instant finger count feedback
● Maintain low latency
● Operate smoothly without freezing

Efficient processing ensures user satisfaction.

20
3.3.2 Usability Requirements

The system should:

● Have a simple and clean interface

● Be easy to start and operate
● Provide clear visual feedback
● Require minimal user instructions
● Work without complex configuration

User-friendly design improves accessibility.

3.3.3 Security Requirements

The system ensures:

● No storage of user video data

● Local processing of frames
● No external data transmission
● Safe execution within browser environment

Privacy is maintained as no personal data is saved.

3.3.4 Scalability Requirements

The system should:

● Support additional gesture recognition in future

● Allow integration with AI classification models
● Extend to sign language recognition
● Deploy on cloud platforms if required
● Adapt to mobile and embedded systems

The modular design supports future enhancements.

3.4 System Requirements

21
3.4.1 Hardware Requirements

Component Specification

Processor Intel i3 or above / Equivalent

Minimum 4 GB (8 GB
RAM recommended)

Camera Built-in or External Webcam

Storage Minimum 2 GB free space

Display 720p or higher resolution monitor

3.4.2 Software Requirements

Software Version/Details

Operating System Windows / Linux / macOS

Programming Language Python 3.8 or above

OpenCV Latest stable version

MediaPipe Latest stable version

NumPy Latest version

Streamlit Latest version

WebRTC Streamlit-webrtc package

22
 CHAPTER-4
SOFTWARE ENVIRONMENT

23
 4. SOFTWARE ENVIRONMENT

The Software Environment defines the technological ecosystem used to design, develop, test, and
deploy the Hand Gesture Recognition System for Finger Counting. The system is developed using
Python as the core programming language due to its simplicity and extensive AI/ML library support.
The project relies on OpenCV for image processing and MediaPipe for real-time hand landmark
detection.

The application interface is built using Streamlit, which enables rapid development of web-based
interactive applications. Real-time video streaming is achieved through the Streamlit-WebRTC
framework. NumPy is used for numerical computations and coordinate comparisons during finger
counting.

The software stack is lightweight and platform-independent, allowing execution on Windows, Linux,
and macOS systems. All libraries used are open-source and actively maintained. The development
environment supports rapid prototyping and real-time testing.

The system does not require high-end infrastructure and can run on a standard laptop with a webcam.
The modular design ensures scalability and future enhancement capabilities.

4.1 Operating System

The proposed system is platform-independent and can operate on multiple operating systems such as
Windows, Linux, and macOS. During development and testing, Windows 10/11 was primarily used
due to compatibility with Python libraries and ease of installation.

The operating system provides support for webcam drivers, Python runtime environment, and necessary
dependencies for OpenCV and MediaPipe. It also manages hardware resource allocation such as CPU
and memory usage.

The system does not require any specialized OS configuration. It runs in a browser environment through
Streamlit, making it flexible and accessible. The cross-platform capability ensures wider usability and
deployment in academic and research environments.

24
4.2 Programming Language & Algorithm

Programming Language: Python

Python is chosen due to:

● Simple syntax and readability

● Strong support for AI/ML libraries
● Cross-platform compatibility
● Large developer community
● Easy integration with web frameworks

Algorithm Used for Finger Counting

The project uses a Landmark-Based Geometric Algorithm for finger counting.

Algorithm Steps:
1. Capture video frame
2. Convert BGR image to RGB
3. Detect hand landmarks using MediaPipe
4. Extract fingertip coordinates
5. Compare fingertip with lower joint
6. If fingertip is above joint → Finger is raised
7. Repeat for all fingers
8. Display total count

Sample Algorithm Code (Finger Counting Logic)

FINGER_TIPS = [8, 12, 16, 20]
THUMB_TIP = 4
finger_count = 0

# Thumb detection (Right Hand Example)

if landmarks[THUMB_TIP].x < landmarks[THUMB_TIP - 1].x:
finger_count += 1

# Other fingers
for tip_id in FINGER_TIPS:
if landmarks[tip_id].y < landmarks[tip_id - 2].y:
finger_count += 1

25
Explanation:
● landmarks[tip_id].y < landmarks[tip_id - 2].y checks if finger tip is above lower joint.
● Thumb logic is based on horizontal position (X-axis).
● Works efficiently in real time.

4.3 Development Frameworks & Libraries

The system uses modern development frameworks and libraries for efficient implementation.

1. OpenCV
● Video capture
● Frame processing
● Drawing text and shapes
● Image transformations

2. MediaPipe
● Real-time hand detection
● 21 landmark prediction
● Optimized ML model

3. NumPy
● Array operations
● Coordinate comparison
● Mathematical computations

4. Streamlit
● Web-based UI
● Real-time display
● Interactive deployment

5. Streamlit-WebRTC
● Real-time video streaming
● Browser-based camera access

These libraries provide speed, reliability, and scalability.

4.4Integrated Development Environments (IDEs) & Tools

The development was carried out using modern IDEs and tools.

26
IDEs Used:
● Visual Studio Code (VS Code)
● PyCharm
● Jupyter Notebook (for testing algorithms)

Tools Used:
● Python Interpreter
● Pip Package Manager
● Git (for version control)
● Web Browser (Chrome/Edge) for Streamlit app

VS Code is preferred due to extensions, debugging tools, and integrated terminal support. The
development tools simplify coding, debugging, and deployment.

4.5 GPU& Hardware Acceleration Support

The system primarily runs on CPU and does not require a dedicated GPU. MediaPipe models are
optimized for real-time CPU execution.

Hardware Acceleration Support:

● Multi-threaded CPU processing
● Optimized ML inference pipeline
● Optional GPU acceleration (if available)
● Compatible with CUDA-enabled devices

For advanced deep learning models, GPU acceleration can improve performance. However, for finger
counting, CPU processing is sufficient.

4.6 Deployment Environment

The application is deployed as a web-based system using Streamlit.

Deployment Options:
● Local deployment (streamlit run [Link])
● Cloud deployment (Streamlit Cloud, Heroku, AWS)
● Browser-based access
● Cross-device compatibility

The system runs locally without storing video data externally. It can also be hosted online for remote
access.

27
4.7 Version Control & Collaboration
Version control is important for managing code updates and collaboration.

Tools Used:
● Git
● GitHub / GitLab (optional repository hosting)

Benefits:
● Track code changes
● Maintain project history
● Support team collaboration
● Easy rollback to previous versions
● Manage feature updates

Using version control ensures project reliability and structured development workflow.

28
 CHAPTER-5
SYSTEM DESIGN

29
 5. SYSTEM DESIGN

System Design defines the overall architecture and structure of the Hand Gesture Recognition System
for Finger Counting. It describes how input data is collected, processed, and converted into meaningful
output. The system is designed using a modular approach to ensure scalability, maintainability, and
real-time performance.

The design consists of three main components:

● Input Module
● Processing Module
● Output Module

The webcam captures live video frames which are processed using OpenCV and MediaPipe. The
detected landmarks are analyzed using a geometric algorithm to count raised fingers. The final result is
displayed on the screen through the Streamlit interface.

The system is lightweight and follows a real-time processing pipeline. It supports detection of up to two
hands simultaneously and calculates the total finger count dynamically. The architecture ensures
smooth execution with minimal latency.

5.1 Input Design

Input Design focuses on how data is captured and provided to the system for processing.

In this project, the primary input is live video captured from a webcam. The video stream consists of
continuous image frames. Each frame is processed individually.

Input Components:

● Live webcam video feed

● Hand gestures (finger positions)
● Multiple hand detection (up to 2 hands)
● Browser-based camera access

Input Processing Steps:

1. User grants camera permission

2. Webcam captures live frames
3. Frame is flipped horizontally

30
 4. Image converted from BGR to RGB
5. Frame passed to MediaPipe model

Input Design Considerations:

● Must support real-time streaming

● Should handle different lighting conditions
● Must detect both left and right hands
● Should allow dynamic hand movement

The input module is designed to ensure smooth and continuous video acquisition without interruption.

5.2 Output Design

Output Design defines how the processed results are presented to the user.

The system displays results in real time through a web-based Streamlit interface. The detected hand
landmarks are drawn on the screen, and the total finger count is displayed clearly.

Output Components:

● Hand landmark visualization

● Total finger count display
● Bounding/overlay display
● Real-time feedback

Output Display Features:

● Rectangle box showing total count

● Green-colored text for visibility
● Landmark connections drawn using MediaPipe
● Updates dynamically for every frame

Output Design Considerations:

● Clear and readable font

● Low latency updates
● Smooth graphical overlay
● Accurate count representation

The output interface is designed to be simple, intuitive, and responsive.

31
5.3 Data Flow Diagram (DFD)

Explanation

In this project, the system does not take static hand images as input. Instead, it continuously captures
live video frames from the webcam and processes them in real time.

The processing flow is dynamic and continuous:

1. User shows hand gesture in front of webcam

2. Webcam captures live video frames
3. OpenCV reads frame
4. Frame converted from BGR to RGB
5. MediaPipe detects hand landmarks
6. Landmark coordinates extracted
7. Finger counting logic applied
8. Total finger count calculated
9. Result displayed instantly on screen

There is no gesture dictionary, database, or command execution module in your system. The output is
simply the total number of raised fingers.

32
33
34
DFD Components Explanation
External Entity:
● User (Shows hand gesture)

Process 1:
● Webcam Video Capture

Process 2:
● Frame Preprocessing (Flip + RGB Conversion)

Process 3:
● MediaPipe Hand Detection

Process 4:
● Landmark-Based Finger Counting

Process 5:
● Display Module (Streamlit UI)

Data Flow:
● Live Video Frames
● Landmark Coordinates
● Finger Count Value

5.4 UML Diagram

5.4.1 Introduction to UML Diagram
Unified Modeling Language (UML) is a standardized modeling language used to visualize, design, and
document software systems. It provides a structured way to represent system architecture, components,
interactions, and workflows. UML helps developers and stakeholders understand how a system operates
before actual implementation.

In the Hand Gesture Recognition System for Finger Counting, UML diagrams are used to illustrate the
system structure and behavior clearly. These diagrams provide a visual representation of how different
modules such as webcam input, hand detection, finger counting logic, and display interface interact
with each other.

The main purpose of UML diagrams in this project is to:

35
 ● Represent system architecture clearly
● Define relationships between components
● Show interaction between user and system
● Explain data flow and processing steps
● Improve system documentation
● Assist in debugging and maintenance
● Provide clarity for academic evaluation

UML diagrams are broadly classified into two categories:

1. Structural Diagrams
Thesediagramsdescribethestaticstructureofthesystem.
Examples:

● Class Diagram
● Object Diagram
● Component Diagram
● Deployment Diagram

In this project, the Class Diagram is used to represent system classes such as video processor, hand
detector, and UI module.

2. Behavioral Diagrams
Thesediagramsrepresentdynamicbehaviorandinteractions.
Examples:

● Use Case Diagram

● Sequence Diagram
● Activity Diagram
● State Diagram

For this project:

● Use Case Diagram shows interaction between user and system

● Sequence Diagram shows step-by-step processing of video frames
● Activity Diagram represents workflow from webcam input to finger count display

Thus, UML plays a vital role in clearly defining and documenting the design of the proposed real-time
finger counting system. It ensures better understanding, scalability, and maintainability of the software
architecture.

36
[Link] Use Case Diagram

Explanation
The Use Case Diagram represents interaction between the user and the system.
In this project, the primary actor is the User who interacts with the system through webcam gestures.

Main Use Cases:

● Start Application

● Provide Hand Gesture

● Capture Video

● Detect Hand

● Count Fingers

● Display Finger Count

The user only provides gesture input, while the system automatically processes and displays the result.

[Link] Class Diagram

37
Explanation
The Class Diagram represents the static structure of the system.

Main Classes:

1. Hand Tracking Processor

2. Media Pipe Hands
3. Finger Counter
4. Stream lit App

Relationships:
● Stream lit App initializes Hand Tracking Processor
● Hand Tracking Processor uses MediaPipe Hands
● Finger Counter processes landmark data
● Output is displayed via Stream lit App

[Link] Sequence Diagram

38
Explanation
The Sequence Diagram shows how objects interact in a time sequence when the system runs.

Flow:
1. User starts app
2. Webcam captures frame
3. Frame sent to Hand Tracking Processor
4. MediaPipe detects landmarks
5. Finger Counter calculates count
6. Result returned to UI
7. Display updated

[Link] Activity Diagram

39
Explanation
The Activity Diagram represents workflow of the system from start to finish.

Steps:
● Start

● Activate Webcam

● Capture Frame

● Convert to RGB

● Detect Hand

40
 ● Are Hands Detected?

○ If No → Capture Next Frame

○ If Yes → Count Fingers

● Display Count

● Repeat

This diagram shows continuous looping of real-time processing.

41
 CHAPTER-6
IMPLEMENTATION

42
 6. IMPLEMENTATION

6.1 Main Sample Code

import streamlit as st
import cv2
import mediapipe as mp
import numpy as np
import av
from streamlit_webrtc import webrtc_streamer, VideoProcessorBase

mp_drawing = [Link].drawing_utils
mp_hands = [Link]

FINGER_TIPS = [8, 12, 16, 20]

THUMB_TIP = 4

class HandTrackingProcessor(VideoProcessorBase):
def __init__(self):
[Link] = mp_hands.Hands(min_detection_confidence=0.8,
min_tracking_confidence=0.5,
max_num_hands=2)

def recv(self, frame):

img = frame.to_ndarray(format="bgr24")
image = [Link](img, 1)
image_rgb = [Link](image, cv2.COLOR_BGR2RGB)

results = [Link](image_rgb)
total_fingers = 0

if results.multi_hand_landmarks and results.multi_handedness:

for hand_landmarks, handedness in zip(results.multi_hand_landmarks,
results.multi_handedness):
mp_drawing.draw_landmarks(
image, hand_landmarks, mp_hands.HAND_CONNECTIONS,
mp_drawing.DrawingSpec(color=(121, 22, 76), thickness=2, circle_radius=4),

43
 mp_drawing.DrawingSpec(color=(250, 44, 250), thickness=2, circle_radius=2)
)

landmarks = hand_landmarks.landmark
label = [Link][0].label # "Left" or "Right"
finger_count = 0

if label == "Right":
if landmarks[THUMB_TIP].x < landmarks[THUMB_TIP - 1].x:
finger_count += 1
else:
if landmarks[THUMB_TIP].x > landmarks[THUMB_TIP - 1].x:
finger_count += 1

for tip_id in FINGER_TIPS:

if landmarks[tip_id].y < landmarks[tip_id - 2].y:
finger_count += 1

total_fingers += finger_count

# Display count on screen

[Link](image, (20, 300), (320, 400), (0, 0, 0), -1)
[Link](image, f'Total Fingers: {total_fingers}',
(30, 370), cv2.FONT_HERSHEY_SIMPLEX,
1.5, (0, 255, 0), 3)

return [Link].from_ndarray(image, format="bgr24")

# Streamlit UI
st.set_page_config(page_title="Finger Counter with MediaPipe", layout="centered")
[Link]("✋ Real-time Finger Count using MediaPipe & Streamlit")

webrtc_streamer(
key="finger-counter",
video_processor_factory=HandTrackingProcessor,
media_stream_constraints={"video": True, "audio": False}
)

44
45
 7. OUTPUT SCREENS

46
47
CHAPTER-8

TESTING

48
 8. TESTING

8.1 Introduction to Testing

Testing is an important phase in software development that ensures the system functions correctly,
efficiently, and reliably. In the Hand Gesture Recognition System for Finger Counting, testing was
conducted to verify real-time performance, accuracy of finger detection, and overall system stability.

The testing process focused on validating whether the system correctly detects hand landmarks and
counts raised fingers under different conditions. Since the system processes live video input, special
attention was given to frame rate, latency, and detection accuracy.

Both functional and non-functional testing methods were applied. Functional testing ensured that the
webcam activates correctly, hand landmarks are detected, and finger counts are displayed accurately.
Non-functional testing evaluated system performance, usability, and responsiveness.

The system was tested under various lighting conditions such as low light, bright light, and normal
indoor lighting. It was also tested with different hand orientations, distances from the camera, and
multiple hand detection scenarios.

Edge cases such as partially visible hands, rapid movement, and background clutter were tested to
ensure robustness. Performance testing verified that the system maintains smooth operation at
approximately 15–30 frames per second without lag.

Compatibility testing was conducted on different operating systems and browsers to confirm cross-
platform functionality. The system was also tested for error handling, ensuring it does not crash when
no hand is detected.

Overall, testing confirms that the system performs reliably in real-time conditions and meets the project
objectives.

49
8.2 Sample Test Cases

Test Case
ID Test Scenario Input Condition Expected Output Actual Result Status

Webcam activates
TC01 Start Application Run Streamlit app successfully Webcam started Pass

Detect Single Show 1 open hand (5 Correct count

TC02 Hand fingers) Display “Total Fingers: 5” displayed Pass

Detect Two Correct count

TC03 Hands Show two open hands Display “Total Fingers: 10” displayed Pass

No Hand No hand in front of

TC04 Detection camera Display “Total Fingers: 0” Shows 0 Pass

Show partially visible Detect visible fingers

TC05 Partial Hand hand correctly Accurate detection Pass

Detect hand with minor Slight delay but

TC06 Low Lighting Dim light condition variation works Pass

TC07 Fast Movement Move hand quickly System tracks continuously Minor frame drop Pass

Left & Right

TC08 Hand Show left/right thumb Correct thumb detection Accurate detection Pass

50
 9. CONCLUSION

The Hand Gesture Recognition System for Finger Counting successfully demonstrates real-time
human-computer interaction using Computer Vision and Machine Learning techniques. The system
efficiently detects hand landmarks and accurately counts raised fingers using a geometric landmark-
based approach.

By leveraging MediaPipe and OpenCV, the project achieves real-time performance without requiring
complex model training or expensive hardware. The use of Streamlit provides an interactive and user-
friendly interface, making the application easy to operate.

The system performs reliably under various lighting conditions and supports detection of up to two
hands simultaneously. Testing results confirm that the solution meets functional and performance
requirements.

This project highlights the practical application of AI-based vision systems in touchless interaction
environments. It can be extended in the future to support advanced gesture recognition, sign language
translation, robotics control, or virtual classroom applications.

Overall, the project fulfills its objective of building an accurate, efficient, and scalable real-time finger
counting system using modern computer vision technologies.

51
 10. REFERENCES

1. R. Szeliski, Computer Vision: Algorithms and Applications, Springer, 2010.

2. G. Bradski and A. Kaehler, Learning OpenCV, O’Reilly Media, 2016.
3. F. Chollet, Deep Learning with Python, Manning Publications, 2018.
4. MediaPipe Documentation – Google AI, Available: [Link]
5. OpenCV Documentation, Available: [Link]
6. Streamlit Documentation, Available: [Link]
7. D. Forsyth and J. Ponce, Computer Vision: A Modern Approach, Pearson, 2012.
8. I. Goodfellow, Y. Bengio, and A. Courville, Deep Learning, MIT Press, 2016.

52