Blog
Face Filters

Implementing Camera Image Filters in React Native

Native cross-platform mobile frameworks have been steadily growing in popularity over the past few years. They save a ton of development time while providing high performance. But still, not every augmented reality SDK offers support for them. In this article, we will show how to add React Native camera filters to your app.

About filters

The filters in question are various effects that add flair to the image or video. They include:

  • LUTs (Instagram filters). Color correction presets like sepia or black-and-white.
  • Face masks. 2D or 3D objects that cover the users’ faces or change them completely. 
  • Virtual backgrounds. Effects that segment out the human in the picture and replace everything else. Works as a “green screen” or helps protect privacy in video calls.
  • Beautification. Smoothing skin, removing blemishes, whitening teeth, evening out skin tone, and other cosmetic improvements.
  • Face morphing. Virtually changing the shape of the user’s face and facial features.
  • Virtual makeup. A React Native image filter that adds mascara, lipstick, hair color, and other virtual beauty products.
  • Video effects. Various changes to the video feed, e.g. slo-mo, rapid, rave, etc.
  • Try-on. Checking out virtual items (eyeglasses, hats, jewelry, etc.) as if they were real.
  • Avatars. Replacing the user’s face with a 3D character that copies their facial expressions.
  • Triggers. Animated effects that launch when the user takes a certain action (smiles, frowns, shows a “victory” hand sign, etc.).

Depending on your user base and business model, you might go for all of these React Native camera filters or just a few of them.

filters-Nov-18-2021-08-38-30-62-AM

Use cases

There are some apps that are a better fit for the filters than others.

  • Social media. TikTok, the most popular short video platform, is one of the driving forces behind the popularity of filters. But no matter your focus, react native image filters like Instagram promote the creation of viral content and increase user engagement.
  • Video calling software. React Native camera filters protect privacy (through background replacement) as well as add fun in casual conversations. 
  • Dating apps. Using filters and effects is a proven way to increase user retention in dating apps.
  • eLearning. React Native image filters improve learning outcomes in educational apps for both children and adults. 
  • Photo/video editors. Various effects are now an expected feature in mobile photo and video editing apps.
  • Games. Facial expressions can be used to control the flow of the game, and masks can serve for player avatar customization, as well as being rewards.

beauty-Nov-18-2021-08-40-11-81-AM

Installation

We will use Banuba products in this example, as we are most familiar with them. Now let’s go through the React Native image filter installation process step-by-step.

Getting the trial token

Before committing to a license, you can try the product for free. The trial time is 14 days. To begin, you will need to request a token by messaging us via our contact form.

Contact Us

You will then get access to the token, as well as SDK download. 

The token can be either included in the app itself or stored on the Firebase. This way you won’t have to launch an update every time you request a new one (e.g. when prolonging the license later on).

It also works for the entire product line: Face AR SDK, Video Editor SDK, and AR Cloud. The latter is used to store the effects you have and let users download them as needed. This is done to decrease the app size, as a single AR mask could take 2-3 MBs of space.

Choosing what to install

There are two major products that you should consider: Face AR SDK and Video Editor SDK. Both give access to the React Native camera filters. However, Video Editor SDK only includes LUTs by default. If you want all kinds of effects in the video editor of your app, you’ll need both products. Otherwise, go for Video Editor SDK if you need clip-making functionality with Instagram filters or Face AR SDK in the rest of the cases.

Installing Video Editor SDK

Android

  1. Make sure variable ANDROID_SDK_ROOT is in your environment.
  2. Put Banuba Face AR token in resources.
  3. Run command npm run android to launch the sample on device or cd android && ./gradlew clean && cd .. && npm run android to clean and re-run the sample.

iOS

  1. Install cocoapods dependencies using commands pod init (if needed) and pod install in the ios folder.
  2. Put Banuba Face AR token.
  3. Run command npm run ios to launch the sample on the device.

editor_timeline-4Banuba Video Editor SDK in action

Installing Face AR SDK

At the moment, we don’t offer native integration with React Native. However, you can still get Banuba Face AR SDK for React Native camera filters. Check out this article for instructions. This applies to both iOS and Android. 

Conclusion

React Native camera filters are easy to access and test. With the right SDK, they can be installed in a couple of days and will be useful in many apps. In some cases, they are expected, in others - a helpful addition. Either way, with React Native image filters you can expect increased user engagement and retention. Feel free to check them out today!

Start Free Trial

Top