Real Time Finger Counting Application using Computer Vision: Step-by-Step Guide with Code and Video Saving

Welcome to the fascinating world of computer vision! 🌟 In this blog, we will explore the secrets behind building a finger counting application using the powerful techniques of computer vision💻

Computer vision is an exciting field that empowers machines to see, interpret, and analyze the visual world, much like we humans do with our eyes and brains 👀🧠. By harnessing the magic of computer vision, we can develop applications that understand and interact with images and videos.

One intriguing application of computer vision is finger counting. Imagine a computer that can effortlessly count the number of fingers you raise in front of a camera! 🖐️ This technology holds tremendous potential for enhancing human-computer interaction, sign language recognition, augmented reality experiences, and gaming adventures.

In this blog, we will delve into the captivating world of computer vision and explore a step-by-step guide to building a finger counting application. We’ll walk you through the code and explain each stage of its execution. Moreover, we’ll also expand on the concepts of working with two hands simultaneously and saving the finger counting video for a more immersive experience.

For your convenience, all the code files discussed in this blog can be found in my GitHub repository at https://github.com/Thebtiboutheina/finger-up-counter. You will find separate files for the one hand implementation, two hands implementation, one hand with video saving, and two hands with video saving. Additionally, the repository includes a folder containing the images used in the application.

By accessing the GitHub repository, you can easily download and explore the code files, experiment with the application, and adapt it to suit your specific requirements. Happy coding! 🚀

Whether you’re a beginner interested in computer vision or an enthusiast looking to learn about practical applications, this blog will serve as a friendly introduction to the finger counting application and empower you to explore the exciting possibilities of computer vision.

So, let’s dive in and uncover the secrets behind building a finger counting application using computer vision techniques! 🚀

Section 1:Understanding the Finger Counting Application

Have you ever wondered how computers can count the number of fingers you hold up in front of a camera? The finger counting application harnesses the power of computer vision to precisely recognize and count fingers, opening up a world of exciting possibilities. 🖐️🔢

The primary purpose of the finger counting application is to enable machines to accurately detect and count the number of fingers presented to a camera. This application leverages computer vision techniques to analyze the captured video frames, identify hand landmarks, and determine the finger configurations. By doing so, it provides a real-time finger count that can be used for a wide range of applications. 📷💻

The potential use cases for finger counting in computer vision applications are vast and remarkable. Let’s explore some of the key areas where finger counting can be incredibly beneficial:

Human-Computer Interaction: Finger counting can revolutionize the way we interact with computers and devices. Imagine controlling a computer or a game using simple hand gestures without the need for traditional input devices like keyboards or joysticks. This technology opens up new avenues for intuitive and immersive experiences.

Sign Language Recognition: Finger counting plays a vital role in sign language recognition systems. By accurately counting the fingers and tracking hand movements, computers can interpret sign language gestures, helping bridge the communication gap between hearing-impaired individuals and the rest of the world.

Augmented Reality (AR) Experiences: Finger counting adds a layer of interactivity and realism to AR applications. By detecting the number of fingers, virtual objects can be manipulated and controlled with hand gestures, enhancing the AR experience.

Gaming Adventures: Finger counting breathes life into gaming adventures. Whether it’s a virtual dance game that scores your hand movements or a magic spellcasting experience where finger gestures unleash your powers, the possibilities for innovative and immersive gaming experiences are boundless.

These are just a few examples showcasing the immense potential and benefits of finger counting in computer vision applications. By accurately recognizing and counting fingers, this application enables computers to understand and respond to our hand gestures, bringing us closer to a more natural and intuitive human-computer interaction.

In the next section, we will delve into the step-by-step guide of building the finger counting application, unraveling the code and understanding its inner workings. 🚀💡

Section 2: Step-by-Step Guide to the Finger Counting Application

Step 1: Importing Libraries The code starts by importing the necessary libraries. cv2 is the OpenCV library used for computer vision tasks, while HandDetector is a module from the cvzone library specifically designed for hand detection.

import cv2
from cvzone.HandTrackingModule import HandDetector
import os

Step 2: Setting Constants The code defines two constants, FRAME_WIDTH and FRAME_HEIGHT, to specify the desired dimensions for the video frame.

FRAME_WIDTH = 1280
FRAME_HEIGHT = 720

Step 3: Loading Overlay Images The load_overlay_images() function is responsible for loading overlay images that will be displayed on the video frame. These images represent different finger counts. The function takes a folderpath as input, which is the directory where the images are stored. It reads each image file from the folder using cv2.imread(), creates a list of the loaded images, and returns it.

def load_overlay_images(folderpath):
    overlaylist = []
    filelist = os.listdir(folderpath)
    for filename in filelist:
        imgpath = os.path.join(folderpath, filename)
        image = cv2.imread(imgpath)
        overlaylist.append(image)
    return overlaylist

Step 4: Displaying Finger Count The display_finger_count() function is used to display the finger count on the video frame. It takes three parameters: the frame (the current video frame), the count (the number of fingers), and the overlaylist (the list of overlay images loaded previously). The function overlays the corresponding image from the overlaylist on the frame based on the finger count. It also draws a rectangle and puts the count value on the frame using cv2.rectangle() and cv2.putText().

def display_finger_count(frame, count, overlaylist):
    if count > 0:
        overlay_img = overlaylist[count-1]
        h, w, _ = overlay_img.shape
        frame[0:h, 0:w] = overlay_img

    cv2.rectangle(frame, (0, 200), (170, 425), (0, 0, 255), cv2.FILLED)
    cv2.putText(frame, str(count), (45, 375), cv2.FONT_HERSHEY_PLAIN, 9, (255, 0, 0), 24)

Step 5: Main Function and Application Workflow The main() function is the heart of the finger counting application. It starts by initializing the video capture using cv2.VideoCapture(0), which accesses the default camera. The code also sets properties such as brightness and contrast using cap.set(). Additionally, it initializes the HandDetector module with a detection confidence value and loads the overlay images.

def main():
    cap = cv2.VideoCapture(0)
    cap.set(10, 200)
    cap.set(cv2.CAP_PROP_FRAME_WIDTH, FRAME_WIDTH)
    cap.set(cv2.CAP_PROP_FRAME_HEIGHT, FRAME_HEIGHT)

    hd = HandDetector(detectionCon=0.6)
    overlaylist = load_overlay_images('img')

    while True:
        ret, frame = cap.read()
        if not ret:
            break

        hands, _ = hd.findHands(frame)
        if hands:
            hand = hands[0]
            fingers_up = hd.fingersUp(hand)
            count = fingers_up.count(1)
            display_finger_count(frame, count, overlaylist)
            print(count)

        cv2.imshow('Finger Counter', frame)
        if cv2.waitKey(1) == 27:
            break

Inside the main loop:

• The code reads a frame from the video capture using cap.read().
• The hd.findHands(frame) function detects hands in the frame and returns a list of detected hands.
• If hands are detected, the code focuses on the first detected hand (hand = hands[0]).
• The hd.fingersUp(hand) function determines which fingers are up and returns a list representing the finger state (up = 1, down = 0).
• The code counts the number of fingers extended (count = fingers_up.count(1)).
• The display_finger_count() function is called to overlay the corresponding image for the finger count on the frame.
• The finger count is printed on the console.
• The updated frame is displayed using cv2.imshow().
• The code checks for user input to exit the application (if cv2.waitKey(1) == 27: break).

Step 6: Releasing Resources After the main loop, the code releases the video capture resources using cap.release() and closes any open windows using cv2.destroyAllWindows()

cap.release()
cv2.destroyAllWindows()

Behold, a captivating screenshot from the finger up counter application! In this delightful image, you can see me, proudly showing two fingers ✌️, as the application skillfully detects and counts them.

Section 3: Extending the Application: Working with Two Hands

In this section, we’ll explore how to enhance our finger counting application by enabling it to work with two hands simultaneously. We’ll discuss the necessary modifications to the code and how we can obtain the total finger count by summing up the finger counts from both hands.

Modifications to the Code: To enable the detection and counting of fingers from both hands, we need to make a few modifications to the existing code. Let’s outline the changes we’ll make:

1. Update the hand detection part:
2. Instead of focusing on just one hand, we’ll modify the code to loop through all the detected hands. This ensures that we count the fingers from each hand individually.
3. Counting fingers for each hand:

• Within the loop that iterates through the hands, we’ll calculate the finger count for each hand separately. This will involve using the fingersUp() function to determine the fingers that are extended for each hand.

4. Summing up the finger counts:

• We’ll introduce a new variable called total_finger_count outside the loop to keep track of the overall finger count from both hands.
• As we iterate through each hand, we’ll add the finger count for that hand to the total_finger_count variable.

To obtain the total finger count, we’ll sum up the individual finger counts from both hands. The total_finger_count variable will accumulate the finger counts as we iterate through each hand, giving us the combined finger count. By implementing these modifications, our finger counting application will be able to handle and count fingers from both hands simultaneously. We’ll obtain a comprehensive finger count that reflects the gestures made by the user using both hands.

Section 4: Saving the Finger Counting Video 🎥

In this section, we’ll explore how to enhance our finger counting application by adding the functionality to save the finger counting video. This allows us to capture and store the recorded video for future reference, analysis, or sharing with others.

To save the finger counting video, we’ll utilize the capabilities of OpenCV. OpenCV provides a simple and convenient way to save video frames into a video file format, such as AVI or MP4. By adding this feature to our application, we can preserve the finger counting session and review it later.

Modifications to the Code: To enable video saving, we’ll make the following modifications to the existing code:

1. Initialize a VideoWriter object:

• Before the main loop, we’ll create a VideoWriter object using the cv2.VideoWriter() function. This object allows us to save video frames into a file.

2. Configure the VideoWriter parameters:

• Specify the output file name, file format, frame rate (FPS), and frame size when creating the VideoWriter object. These parameters define the properties of the output video.

3. Write frames to the video:

• Inside the main loop, after displaying the finger count on the frame, we’ll use the write() method of the VideoWriter object to save the current frame into the video file.

4. Release the VideoWriter object:

• After the main loop ends, we’ll release the VideoWriter object using the release() method. This ensures proper closing and finalizing of the video file.

With the modifications in place, the finger counting video will be saved in real-time as the application runs. Each frame containing the finger count overlay will be added to the video file. After the finger counting session is complete, we’ll have a video file that can be replayed, analyzed, or shared.