Try it Live: banuba.github.io/beauty-web

The demo app is built on top of Banuba WebAR SDK and Makeup effect. It reveals common patterns of consuming the WebAR SDK JavaScript API as well as the Makeup effect API.

Investigation of the app codebase can give you ready to go snippets for common tasks like:

• Preloading of WebAR modules
• Preloading of a WebAR effect
• Using different image inputs
• Taking screenshots
• Optimizing WebAR for HiDPI devices
• Applying of user provided images as Background texture
• Invoking Makeup effect APIs

Dig into the app for inspiration!

Clone the repository:

git clone git@github.com:Banuba/beauty-web.git

Navigate to the cloned folder:

cd beauty-web

Run the live-server in the cloned folder

npx live-server

* Nodejs must be installed to run the npx live-server command

Open localhost:8080 and start clicking :)

If you're going to deploy the demo app on your infrastructure, replace the default Banuba Client token with yours one in the BanubaClientToken.js file:

window.BANUBA_CLIENT_TOKEN = "PUT YOUR CLIENT TOKEN HERE"

Refer to the Obtaining Banuba Client token section for details.

The example uses CDN version of the @banuba/webar npm package for simplicity. Please use the npm package mentioned above for real-world projects. Check out the Integration tutorials for more ways of consuming @banuba/webar package.

Banuba Client token is required to get Banuba SDK Web AR working.

To receive a new trial client token, please fill in the form on banuba.com website, or contact us via info@banuba.com.

Banuba WebAR SDK:

• High-level WebAR overview
• Tutorials for common use-cases
• Integration tutorials
• Optimization tutorials

Banuba Makeup Effect:

• Makeup API overview
• Face Beauty API overview