Technology Behind Snapchat and Instagram Face Filters


Snapchat and Instagram are the two mobile applications that literally blew away the community with their updates and innovations a number of times. The special filters that identify the faces in the picture are among the most significant innovative features. The feature receives an image through a smartphone camera’s lenses and puts funny elements over it (a dog face or a flower crown, for example), which is an implementation of the augmented reality technology (AR). In the given article, we will describe how Snapchat filters work, find out the basics of the Snapchat technology and describe the most common tools for the creation of software alike.

How Snapchat filters work: let’s begin with bare facts

For starters, let’s try to make sure that your application will be capable of bringing a decent profit after the release. In order to do that, you will have to analyze the MSQRD app development phenomenon.

Particularly, in the last few years, the filters have become quite a strong trend in the mobile software development sphere. Just check out the numbers – 1,6 million downloads of the MSQRD app, and that is only at the moment when Facebook decided to purchase it to repeat the success of the Snapchat facial recognition software (which engages around 173 million users with the smartphone’s screen daily). Impressed by the popularity of this type of software? We know that we are. Thus, let’s continue on with the principles of its creation.

Read also: How to Make an App Like Snapchat [Estimation]

How Snapchat filters work: general development principles

So, how to develop a face filter app? The first thing you will need to do is to choose the suitable API. The most commonly used ones among the developers are Google Cloud Vision API for Android, Google Mobile Vision iOS API, Microsoft Cognitive Services, and Core Image API. Let’s figure out by what principles they operate.

In particular, each API goes through two phases in order to recognize a face: image analysis phase and image processing phase. Let’s consider each in details.

The first phase is a quite complex one from the perspective of the used algorithms’ structure. The algorithms, in turn, are commonly applied in machine learning and require the application of the electronic Gaussian filter. Usually, to implement the phase, a combination of such methods is used – Histogram of Oriented Gradients and Support Vector Machine (note that they are applicable only to photos and are not able to recognize the faces in the turned on camera mode).

The first method divides the image into interconnected cells. The cells are analyzed in various scales and, based on the direction of the brim and intensity of the color gradient, it is defined whether a certain fragment features a face or not (the second method – SVM is used for that process). Then, after the face is identified, the analysis and recognition of its separate elements begin (of eyes, lips, brows, etc.). For that, the operation of the facial landmark detection is conducted (you can find out more details about this procedure in this article). The operation scans the part of an image with a face (the app identifies it as a fragment situated inside the restricting frame created via the previous methods) and indicates the precise coordinates of all the facial elements on the 2D plane.

The Viola-Jones method based on the computer vision can be used as an alternative to HOG and SVM. It employs cascade classifiers and is able to recognize the faces in real-time mode. You can find out more info on this method in this scientific article.

Thus, we received an image fragment constricted by the limiting frame which includes a human face with 2D coordinates that define the location of cheekbones, brows, eyes, mouth, and nose. The next processing stage for this fragment will be an augmentation of a certain virtual object – the so-called mask (on the example of Snapchat – a dog face or a flower crown). Again, the received facial landmarks are used for that. They make possible the situation of a new object in the required place and scaled accordingly (for instance, when a flower crown image is augmented, the software defines the location of a forehead and temporal region). Moving on, let’s get to practice and try to choose the best suitable library for the implementation of the above mentioned processes.

You will have to accept the fact that to date, not a single library composed using additional software tools can precisely locate the facial landmarks. Doesn’t matter what library we take – an extremely popular OpenCV or some other not that widely used option. Let’s take for an example one of the most renowned IT-companies out there – PixLab, which firmly holds the niche of a provider of mobile software that features advanced graphical technologies. According to its programmers team’s experience in the facial filters app development, the most productive results can be achieved using the combination of Dlib and MagickWand libraries.

Also, among the favorites of many developers are such libraries as Stasm (used to indicate the facial landmarks; in order to create the restricting frame, you will have to apply third-party software solutions), Cambridge Face Tracker (this library also requires additional tools for face recognition), GPUImage (compatible only with the iOS-based projects), and libccy (this library is used for face recognition but is unable to define the coordinates of the facial landmarks). You can figure out the best fitting option for your particular case only by trial and error.

Read also: Best AR Frameworks Comparison

Back to theory. What else is required to begin the face detection masks development

Suppose you successfully picked the tools. Are there any other guidelines that could help create filters for your augmented reality technology based app? Yes, there are. We present our own list below. The listed features are guaranteed to make your application stand out among other software with similar functionality.

Use up-to-date masks design. It seems reasonable to enrich your solution with concepts actively employed by other apps. Namely, the all-encompassing cuteness overload and kawaii. On the other hand, you can go with a political topic and create masks inspired by the image of some media characters. For that purpose. employ the services of a separate graphical designers team closely familiar with the latest tendencies that will be able to create something unique and memorable for you.

Employ the latest graphical solutions. Do not limit your designers’ space for imagination. Let them realize the most insane (seeming at first) ideas. This approach to creating the new masks can, with a great probability, grant their increasing popularity.

Work with professionals. Independent development of a filter-rich app is a very presumptuous step. It is better to employ the help of experts who have successfully implemented several projects with a face detection feature as machine self-learning uses quite complex for understanding technologies. Remember – you do not get a second chance to prove yourself to your target audience.

Integrate your app with renowned social networks. It is very important to provide your users with the ability to share the processed photos with their friends. Remember to integrate your application with popular social networks for that purpose (such feature can also make a registration process significantly easier).

How to make face tracking filters: summary

As we can see, the development of filters that work by the mechanics similar to Snapchat or Instagram face detection is not a simple process. Considering the colossal profit an app can potentially bring after the release, we strongly recommend you to employ a team of experts for its development.

Contact our development team with your project idea to get a full estimate and consultation.


Leave a Reply

Your email address will not be published. Required fields are marked *