Creating Fun Augmented Reality Filters with OpenCV in Python

Have you ever sent your friend a funny image of yours with some overlayed augmented reality filters? For example, a funny mask on your face, a hat on your head, or maybe a dog filter on your face. It’s fun, right? Such augmented reality (AR) techniques make use of an input image, learn its features, and ultimately put the overlay image wherever necessary, or in other words, put the filter on the image area where needed. Such processes are also called image augmentation.

In this tutorial, we’ll delve into the fascinating world of image augmentation by creating custom filters using OpenCV in Python. Let us have a look at the topics we will cover:

By the end of this comprehensive guide, you’ll have a working image filter and a deeper understanding of the underlying concepts in computer vision. The end product would look something like this:

opencv

So let’s get creative!

“Perfection is 1% learning and 99% doing!” Thus, before we proceed, I would like you to have a look at this book Mastering OpenCV with Python. This book guide walks you through everything from basic image processing to cool advanced techniques like neural networks and object detection. And most importantly, each chapter is packed with hands-on exercises and real-world projects. This will help you gain practical experience and could make you an expert in Python and OpenCV.
Now you may think, “I’m just a beginner and hardly have any idea on OpenCV. Is this book suitable for me?” The answer is YES. But what if you are at intermediate level? Again, the answer is YES!! For beginners, the book helps them to learn and understand new topics in OpenCV. For intermediates, this book provides numerous hands-on exercises that will help them to sharpen and level-up their skills. The best part? The kindle version costs less than 20$. So grab your copy now and start mastering computer vision today!

opencv

Understanding the Basics

Before we jump into the code, let’s briefly understand the fundamental concepts at play. OpenCV, short for Open Source Computer Vision Library, is a powerful tool for various computer vision tasks, including face detection. It undertakes the mathematical calculations that we need for image-processing tasks.

An RGB image, which serves as input data to such tasks, is a three-dimensional matrix, each layer representing the color channels: Red, Blue, and Green. For an image processing task, we process the pixel values of the image matrix and thereby learn its characteristics. Such a method of characterizing image features is useful in tasks like object detection, contour detection, edge detection, etc.

Setting Up Your Development Environment

Ensuring a smooth development process begins with setting up your Python environment. Make sure that you have created your virtual environment to avoid any compatibility issues with other Python libraries. Install the OpenCV library in your virtual environment using the following command:

pip3 install opencv-python

Below is the entire code to create your augmented reality filters using OpenCV and Python:

import cv2
import numpy as np
import os

# Start capturing video from the default camera (0)
# Load the AR overlay image

# Load the face cascade
face_cascade = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')
overlay = cv2.imread('overlay.png', -1)
cap = cv2.VideoCapture(0)

while True:
 # Detect faces in the grayscale image
 ret, frame = cap.read()
 gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)
 faces = face_cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=5, minSize=(30, 30))
 # Overlay the AR image on the face
 for c in range(0, 3):
  
  for (x, y, w, h) in faces:
   # Resize the overlay to fit the face
   resized_overlay = cv2.resize(overlay, (w, h))
   for c in range(0,3):
      frame[y:y + h, x:x + w, c] = frame[y:y + h, x:x + w, c] * (1 - resized_overlay[:, :, 2] / 255.0) + \
                                          resized_overlay[:, :, c] * (resized_overlay[:, :, 2] / 255.0)
  cv2.imshow('Filter', frame)
  cv2.waitKey(1)

This seems to be a lot of code. Let us break it down!

Breaking down the code

1. Importing the libraries

cv2: OpenCV library for computer vision tasks.

numpy: Library for numerical operations.

os: Operating system interfaces (though not used in this code).

# Import necessary libraries
import cv2
import numpy as np

2. Initializing the Haar Cascade classifier

Now we will initialize the Haar Cascade classifier for face detection using the pre-trained XML file (‘haarcascade_frontalface_default.xml’). For this, you’ll need to download the Haar Cascade XML file for face detection from the official OpenCV GitHub repository and save it in your project directory. You will find this file in the haarcascade_frontalface_default.xml in that folder.

face_cascade = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')

3. Loading the AR Overlay

Choosing the right AR overlay is a crucial step in creating an engaging filter. Whether it’s a virtual hat, funky glasses, or a whimsical mustache, select an overlay that aligns with your creative vision. Ensure that your chosen overlay image has an alpha channel to support transparency, allowing seamless integration with the user’s face.

overlay = cv2.imread('path/to/overlay.png', -1)

4. Video Capture Setup

We initialize video capture, connecting to the default camera (index 0) for real-time video frame capture. Adjust this value if you have multiple cameras connected.

# Start capturing video from the default camera (0)
cap = cv2.VideoCapture(0)

5. Face Detection

Utilizing the Haar Cascade Classifier, faces are detected in the grayscale image. Parameters like scaleFactor and minNeighbors can be adjusted based on your specific requirements.

# Convert the frame to grayscale for face detection
gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

# Detect faces in the grayscale image
faces = face_cascade.detectMultiScale(gray, scaleFactor=1.3, minNeighbors=5, minSize=(30, 30))

6. Overlay Application

Now we will be required to iterate through all the detected faces and the overlay image is resized to match the size of the detected face. Moreover, we will overlay this image using alpha blending.

for c in range(0, 3):
  
  for (x, y, w, h) in faces:
   # Resize the overlay to fit the face
   resized_overlay = cv2.resize(overlay, (w, h))
   for c in range(0,3):
      frame[y:y + h, x:x + w, c] = frame[y:y + h, x:x + w, c] * (1 - resized_overlay[:, :, 2] / 255.0) + \
                                          resized_overlay[:, :, c] * (resized_overlay[:, :, 2] / 255.0)

6.1 Iteration over Detected Faces

  • for (x, y, w, h) in faces:: This loop iterates over the list of faces detected in the current frame. The variables x, y, w, and h represent the coordinates (top-left corner) and dimensions (width and height) of each detected face.
  • resized_overlay = cv2.resize(overlay, (w, h)): Inside the loop, the AR overlay image is resized to match the width (w) and height (h) of the currently detected face. This ensures that the overlay fits the dimensions of the face.

6.2 Overlaying the AR Image using Alpha Blending:

  • The next nested loop operates over the color channels (RGB) of the frame. This loop runs for each of the three color channels (Red, Green, Blue).
  • For each color channel, the AR image is overlaid on the face using alpha blending. The formula for alpha blending is applied separately to each color channel.

Here:

  • frame[y:y + h, x:x + w, c]: Represents the pixel values of the current color channel for the region where the overlay will be applied.
  • resized_overlay[:, :, 2] / 255.0: Represents the alpha channel (transparency) of the overlay, normalized to the range [0, 1].

The alpha blending formula calculates the weighted sum of the original frame pixel value and the overlay pixel value, based on the alpha channel. This process ensures that the overlay blends seamlessly with the face, considering its transparency.

Once a face is detected, the chosen AR overlay is resized to fit the dimensions of the face and seamlessly overlaid using alpha blending.

Enhancements and Experimentation

The provided code serves as a foundational template for your AR filter. However, the beauty of AR lies in its limitless creative possibilities. Consider experimenting with different overlays, adding user interactions, or exploring facial landmark detection for more intricate filters.

More on OpenCV Projects

Don’t forget to have a look at this beginner-friendly book Mastering OpenCV with Python on Amazon to level-up your computer vision skills.

opencv

Conclusion

In this tutorial, we went on a fun journey of Augmented Reality using OpenCV in Python. From setting up your development environment to creating a real-time AR filter, you now have the tools and knowledge to bring your creative ideas to life. Feel free to share your creations on Instagram and don’t forget to tag me in it @machinelearningsite. Happy coding!

If you happen to have any questions on the topic or want to share your creation, feel free to get in touch on Instagram: @machinelearningsite. Also, follow me on other social media where I post information on programming and machine learning:

If you want to stay updated on such amazing posts, subscribe to my *FREE* newsletter today:

Leave a Reply