Blog
Web AR

How To Add Webcam Face Filters To Your Website

Webcam face filters can add a lot of value. In casual communication, they increase the fun, in a serious one, they add security, fight “zoom fatigue” and help deal with distractions. So what if you want to add such functionality to your website? In this case, read on.

Why Web AR?

Pretty much everyone has smartphones nowadays, so why bother with integrating the AR functionality into a website instead of developing a mobile app?

Firstly, because of compatibility. Webcam face filters built into a website can run on almost anything that has a browser and a camera. This ensures access to a large audience.

Secondly, because of lower costs. Building and maintaining a single web application is cheaper than two mobile apps. Even though using frameworks like Flutter or React Native can decrease the development time and expenses, Web AR wins overall.

The third main reason is freedom from app stores. If you need face filters for webcam but have to deal with certain things like tobacco or alcohol, you won’t be able to get listed on AppStore or Google Play. With your own website, there are no such issues.

Finally, there is a matter of cheaper user acquisition. There are fewer steps a person should take to interact with your web app compared to a mobile app. No download is required - everything works from the get-go. This means that every dollar invested in promotion brings higher returns in Web AR.

However, this technology also has its drawbacks.

The main one is worse performance. Mobile apps can access more resources of the device, so they run faster and provide better image quality. Web AR is inherently slower due to working within the limitations of the browser. 

The second major disadvantage is that an internet connection is a must. Mobile apps can work offline after downloading the necessary filters and effects. Web apps can’t do that.

If you want to learn about Web AR in detail, feel free to check out our dedicated article: Web AR: A Complete Guide To App-less Augmented Reality.

beauty-Oct-15-2021-11-23-45-83-AM

Webcam Face Filters: Use Cases

There are many areas where this technology can find use. Some of them are:

    • Videoconferencing. In a simple call from one friend to another, adding a couple of fun masks and effects could bring extra fun. In a professional meeting or a presentation, blurring the background or replacing it with something neutral will remove distractions and prevent embarrassment (e.g. pets or children walking in). In online teaching, funny avatars will help connect with younger learners.
    • Dating. Face filters could serve as icebreakers, something to start the discussion. Or they can be used to protect the users’ privacy in cases where spicy pictures are exchanged.
    • Social media. Besides improving video calls, as mentioned above, webcam face filters will promote the creation of viral content.
    • Virtual try-on. Through Web AR, you can let your users test cosmetics, jewelry, headwear, hair colors, and other goods online.  

How to add webcam face filters to your website

Let’s go through the specific steps. 

How Banuba WebAR works

Banuba Face AR SDK: contents, features, and requirements

Banuba Face AR SDK is a ready-made module that can be quickly integrated into a mobile, web, or desktop app and handle the webcam face filters functionality. 

The Web AR version includes three components:

  • BanubaSDK.wasm - a low-level high-performance module compiled to WebAssembly;
  • BanubaSDK.data - face detection neural networks and auxiliary AR data;
  • BanubaSDK.js - a JavaScript wrapper for consuming the WebAssembly module with browser-specific things like WebCamera usage and DOM rendering.

You can check out the details, including input/output options and code samples in the instruction.

The SDK works in browsers that support WebGL 1.0 and higher: Chrome, Safari, Firefox, etc. The full list can be found here. To run the demo app, you will also need to install Node.js and git client. However, these two are optional.

It also contains a separate .simd.wasm file for SIMD-enabled browsers (e.g. Chrome 91+ and Firefox 90+). 

This is what features the SDK includes:

  • Face tracking. Detecting multiple faces on the camera feed to apply effects to them later.
  • Rendering engine. The core element that is responsible for drawing all the effects. 
  • Face filters. This is the functionality responsible for applying masks, avatars, text/gif overlays, etc. The filters themselves are downloaded/created separately.
  • Interactive triggers. This feature allows launching dynamic effects by using facial expressions or hand gestures. 
  • Background replacement. Capability to detect a person in the picture and replace everything else with a static image, gif, or video.
  • Hair/lips/eyes segmentation. Locating a facial feature and changing it in the picture. This could be used to recolor hair, apply virtual makeup, or test contact lenses.

Installation

First, you need to download the SDK itself and the token necessary for the whole system to work

To get them, send us a message via a contact form on our website.

Contact Us

You can find the sample of the installation code here and a test webcam face filter here.

Launching a demo app


This is a simple process. 

  1.  Clone the Web AR demo app git repository
  2.  Place the latest release of Banuba SDK Web AR inside the cloned folder
  3.  Place Banuba client token into BanubaClientToken.js inside the cloned folder
  4.  Run a local server inside the folder
  5.  Open localhost:8080 and get to work.

For ease of use, check out the API reference.

img_masks-min-Oct-07-2021-07-46-35-36-AM

Conclusion

Web AR is flexible, provides access to a large audience, and is simple and straightforward to integrate. Follow the steps in this guide to see how webcam face filters would work on your website and play around with them. Don’t forget: we have 14 days of free trial available, so contact us, get your token, and start testing!

Start Free Trial

Top
# Tags: