Face Beauty API
Banuba provides the Beauty API designed to help you integrate face modification and touch-up functionality into your app. The beautification features fit into a variety of use cases, i.e. live streaming, video chats and video conferencing apps to selfie editors and portrait retouching software. It aims to make the user feel comfortable about the camera experience.
tip
Read more about how to use and combine Makeup API and Face Beauty API features.
The Beauty module allows to enhance the face via the following built-in features:
Teeth Whitening#
Allows for a beautiful smile.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// set teeth whitening strength
TeethWhitening.strength("1")
// Effect mCurrentEffect = ...
// set teeth whitening strength
mCurrentEffect.callJSMethod("TeethWhitening.strength", "1");
// var currentEffect: BNBEffect = ...
// set teeth whitening strength
currentEffect?.callJsMethod("TeethWhitening.strength", params: "1")
// const player = new Player(...)
// set teeth whitening strength
player.callJsMethod("TeethWhitening.strength", "1")
Preview
Drag
Face morphing#
Slims down the cheeks and nose to make it more delicate.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// set eyes enlarge strength
FaceMorph.eyes("0.6")
// set checks slim down strength
FaceMorph.face("0.5")
// set nose slim down strength
FaceMorph.nose("1")
// resets morph
FaceMorph.clear()
// Effect mCurrentEffect = ...
// set eyes enlarge strength
mCurrentEffect.callJSMethod("FaceMorph.eyes", "0.6");
// set checks slim down strength
mCurrentEffect.callJSMethod("FaceMorph.face", "0.5");
// set nose slim down strength
mCurrentEffect.callJSMethod("FaceMorph.nose", "1");
// resets morph
mCurrentEffect.callJSMethod("FaceMorph.clear", "");
// var currentEffect: BNBEffect = ...
// set eyes enlarge strength
currentEffect?.callJSMethod("FaceMorph.eyes", params: "0.6")
// set checks slim down strength
currentEffect?.callJSMethod("FaceMorph.face", params: "0.5")
// set nose slim down strength
currentEffect?.callJSMethod("FaceMorph.nose", params: "1")
// resets morph
currentEffect?.callJSMethod("FaceMorph.clear", params: "")
// const player = new Player(...)
// set eyes enlarge strength
player.callJSMethod("FaceMorph.eyes", "0.6")
// set checks slim down strength
player.callJSMethod("FaceMorph.face", "0.5")
// set nose slim down strength
player.callJSMethod("FaceMorph.nose", "1")
// resets morph
player.callJSMethod("FaceMorph.clear")
Preview
Drag
Photo filters (LUT)#
Applies color filters to the entire image.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// set lut filter texture
LutFilter.set("lut_texture.png")
// set lut filter strength
LutFilter.strength("1")
// reset lut filter
LutFilter.clear()
// Effect mCurrentEffect = ...
// set lut filter texture
mCurrentEffect.callJSMethod("LutFilter.set", "lut_texture.png");
// set lut filter strength
mCurrentEffect.callJSMethod("LutFilter.strength", "1");
// reset lut filter
mCurrentEffect.callJSMethod("LutFilter.clear", "");
// var currentEffect: BNBEffect = ...
// set lut filter texture
currentEffect?.callJsMethod("LutFilter.set", params: "lut_texture.png")
// set lut filter strength
currentEffect?.callJsMethod("LutFilter.strength", params: "1")
// reset lut filter
currentEffect?.callJsMethod("LutFilter.clear", params: "")
// const player = new Player(...)
// set lut filter texture
player.callJsMethod("LutFilter.set", "lut_texture.png")
// set lut filter strength
player.callJsMethod("LutFilter.strength")
// reset lut filter
player.callJsMethod("LutFilter.clear")
Preview
Drag
Skin smoothing (Skin softening)#
Makes the skin look younger by smoothing wrinkles.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Sets skin softening strength from 0 to 1
SkinSoftening.strength("1")
// Effect mCurrentEffect = ...
// Sets skin softening strength from 0 to 1
mCurrentEffect.callJSMethod("SkinSoftening.strength", "1");
// var currentEffect: BNBEffect = ...
// Sets skin softening strength from 0 to 1
currentEffect?.callJsMethod("SkinSoftening.strength", params: "1")
// const player = new Player(...)
// Sets skin softening strength from 0 to 1
player.callJsMethod("SkinSoftening.strength", "1")
Preview
Drag
Skin color#
Changes the face and neck skin color.
info
Requires Skin segmentation Neural Network.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Set skin color
Skin.color("0.8 0.6 0.1 0.4")
// Reset skin color
Skin.clear()
// Effect mCurrentEffect = ...
// Set skin color
mCurrentEffect.callJSMethod("Skin.color", "0.8 0.6 0.1 0.4");
// Reset skin color
mCurrentEffect.callJSMethod("Skin.clear", "");
// var currentEffect: BNBEffect = ...
// Set skin color
currentEffect?.callJsMethod("Skin.color", params: "0.8 0.6 0.1 0.4")
// Reset skin color
currentEffect?.callJsMethod("Skin.clear", params: "")
// const player = new Player(...)
// Set skin color
player.callJsMethod("Skin.color", "0.8 0.6 0.1 0.4")
// Reset skin color
player.callJsMethod("Skin.clear")
Preview
Drag
Background separation#
info
Requires Background separation Neural Network.
Background texture#
Sets background behind the user to a texture.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Sets the file as background texture
BackgroundTexture.set("bg_colors_tile.png")
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
BackgroundTexture.setBGContentMode("aspect_fill")
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
BackgroundTexture.setInitialRotation(270)
// Rotates the background texture clockwise in degrees (only values divisible by 90)
BackgroundTexture.rotate(90)
// Scales the background texture
BackgroundTexture.scale(0.9)
// Removes the background texture, resets background rotation and scaling
BackgroundTexture.clear()
// Effect mCurrentEffect = ...
// Sets the file as background texture
mCurrentEffect.callJSMethod("BackgroundTexture.set", "bg_colors_tile.png");
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
mCurrentEffect.callJSMethod("BackgroundTexture.setBGContentMode", "aspect_fill");
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
mCurrentEffect.callJSMethod("BackgroundTexture.setInitialRotation", 270);
// Rotates the background texture clockwise in degrees (only values divisible by 90)
mCurrentEffect.callJSMethod("BackgroundTexture.rotate", 90);
// Scales the background texture
mCurrentEffect.callJSMethod("BackgroundTexture.scale", 0.9);
// Removes the background texture, resets background rotation and scaling
mCurrentEffect.callJSMethod("BackgroundTexture.clear", "");
// var currentEffect: BNBEffect = ...
// Sets the file as background texture
currentEffect?.callJsMethod("BackgroundTexture.set", params: "bg_colors_tile.png")
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
currentEffect?.callJsMethod("BackgroundTexture.setBGContentMode", params: "aspect_fill")
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
currentEffect?.callJsMethod("BackgroundTexture.setInitialRotation", params: 270)
// Rotates the background texture clockwise in degrees (only values divisible by 90)
currentEffect?.callJsMethod("BackgroundTexture.rotate", params: 90)
// Scales the background texture
currentEffect?.callJsMethod("BackgroundTexture.scale", params: 0.9)
// Removes the background texture, resets background rotation and scaling
currentEffect?.callJsMethod("BackgroundTexture.clear", params: "")
// const player = new Player(...)
// Sets the file as background texture
player.callJsMethod("BackgroundTexture.set", "bg_colors_tile.png")
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
player.callJsMethod("BackgroundTexture.setBGContentMode", "aspect_fill")
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
player.callJsMethod("BackgroundTexture.setInitialRotation", 270)
// Rotates the background texture clockwise in degrees (only values divisible by 90)
player.callJsMethod("BackgroundTexture.rotate", 90)
// Scales the background texture
player.callJsMethod("BackgroundTexture.scale", 0.9)
// Removes the background texture, resets background rotation and scaling
player.callJsMethod("BackgroundTexture.clear")
Preview
Drag
Background video/gif#
Sets background behind the user to a video/gif. Available formats are .mp4 and .gif.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Sets the file as background texture
BackgroundVideo.set("video.mp4")
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
BackgroundVideo.setBGContentMode("aspect_fill")
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
BackgroundVideo.setInitialRotation(270)
// Rotates the background video/gif clockwise in degrees (only values divisible by 90)
BackgroundVideo.rotate(90)
// Scales the background texture
BackgroundVideo.scale(0.9)
// Removes the background texture, resets background rotation and scaling
BackgroundVideo.clear()
// Effect mCurrentEffect = ...
// Sets the file as background texture
mCurrentEffect.callJSMethod("BackgroundVideo.set", "bg_colors_tile.png");
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
mCurrentEffect.callJSMethod("BackgroundVideo.setBGContentMode", "aspect_fill");
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
mCurrentEffect.callJSMethod("BackgroundVideo.setInitialRotation", 270);
// Rotates the background video/gif clockwise in degrees (only values divisible by 90)
mCurrentEffect.callJSMethod("BackgroundVideo.rotate", 90);
// Scales the background texture
mCurrentEffect.callJSMethod("BackgroundVideo.scale", 0.9);
// Removes the background texture, resets background rotation and scaling
mCurrentEffect.callJSMethod("BackgroundVideo.clear", "");
// var currentEffect: BNBEffect = ...
// Sets the file as background texture
currentEffect?.callJsMethod("BackgroundVideo.set", params: "bg_colors_tile.png")
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
currentEffect?.callJsMethod("BackgroundVideo.setBGContentMode", params: "aspect_fill")
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
currentEffect?.callJsMethod("BackgroundVideo.setInitialRotation", params: 270)
// Rotates the background video/gif clockwise in degrees (only values divisible by 90)
currentEffect?.callJsMethod("BackgroundVideo.rotate", params: 90)
// Scales the background texture
currentEffect?.callJsMethod("BackgroundVideo.scale", params: 0.9)
// Removes the background texture, resets background rotation and scaling
currentEffect?.callJsMethod("BackgroundVideo.clear", params: "")
// const player = new Player(...)
// Sets the file as background texture
player.callJsMethod("BackgroundVideo.set", "bg_colors_tile.png")
// Sets background content mode. Available options are: "aspect_fill" (default), "aspect_fit", "scale_to_fill".
player.callJsMethod("BackgroundVideo.setBGContentMode", "aspect_fill")
/** Sets the initial background texture angle in degrees (used for photos with angle !=0 in metadata) */
player.callJsMethod("BackgroundVideo.setInitialRotation", 270)
// Rotates the background video/gif clockwise in degrees (only values divisible by 90)
player.callJsMethod("BackgroundVideo.rotate", 90)
// Scales the background texture
player.callJsMethod("BackgroundVideo.scale", 0.9)
// Removes the background texture, resets background rotation and scaling
player.callJsMethod("BackgroundVideo.clear")
Preview
Drag
Bokeh effect#
Blurs background behind the user with Bokeh effect as in professional photography.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Enables background blur with bokeh effect
BackgroundBokeh.enable()
// Disables background blur with bokeh effect
BackgroundBokeh.disable()
// Effect mCurrentEffect = ...
// Enables background blur with bokeh effect
mCurrentEffect.callJSMethod("BackgroundBokeh.enable", "");
// Disables background blur with bokeh effect
mCurrentEffect.callJSMethod("BackgroundBokeh.disable", "");
// var currentEffect: BNBEffect = ...
// Enables background blur with bokeh effect
currentEffect?.callJsMethod("BackgroundBokeh.enable", params: "")
// Disables background blur with bokeh effect
currentEffect?.callJsMethod("BackgroundBokeh.disable", params: "")
// const player = new Player(...)
// Enables background blur with bokeh effect
player.callJsMethod("BackgroundBokeh.enable")
// Disables background blur with bokeh effect
player.callJsMethod("BackgroundBokeh.disable")
Preview
Drag
Background blur#
Blurs background behind the user.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Enables background blur
BackgroundBlur.enable()
// Sets blur radius in [0.,1.] range
BackgroundBlur.radius(0.1)
// Disables background blur
BackgroundBlur.disable()
// Effect mCurrentEffect = ...
// Enables background blur
mCurrentEffect.callJSMethod("BackgroundBlur.enable", "");
// Sets blur radius in [0.,1.] range
mCurrentEffect.callJSMethod("BackgroundBlur.radius", "0.1");
// Disables background blur
mCurrentEffect.callJSMethod("BackgroundBlur.disable", "");
// var currentEffect: BNBEffect = ...
// Enables background blur
currentEffect?.callJsMethod("BackgroundBlur.enable", params: "")
// Sets blur radius in [0.,1.] range
currentEffect?.callJsMethod("BackgroundBlur.radius", params: "0.1")
// Disables background blur
currentEffect?.callJsMethod("BackgroundBlur.disable", params: "")
// const player = new Player(...)
// Enables background blur
player.callJsMethod("BackgroundBlur.enable")
// Sets blur radius in [0.,1.] range
player.callJsMethod("BackgroundBlur.radius", 0.1)
// Disables background blur
player.callJsMethod("BackgroundBlur.disable")
Preview
Drag
Background transparent#
Makes background behind the user fully or partly transparent.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Enables transparent background
BackgroundTransparent.opacity(0.)
// Disables transparent background
BackgroundTransparent.opacity(1.)
// Effect mCurrentEffect = ...
// Enables transparent background
mCurrentEffect.callJSMethod("BackgroundTransparent.opacity", "0.");
// Disables transparent background
mCurrentEffect.callJSMethod("BackgroundTransparent.opacity", "1.");
// var currentEffect: BNBEffect = ...
// Enables transparent background
currentEffect?.callJsMethod("BackgroundTransparent.opacity", params: "0.")
// Disables transparent background
currentEffect?.callJsMethod("BackgroundTransparent.opacity", params: "1.")
// const player = new Player(...)
// Enables transparent background
player.callJsMethod("BackgroundTransparent.opacity", 0.)
// Disables transparent background
player.callJsMethod("BackgroundTransparent.opacity", 1.)
Preview
Drag
Hair coloring#
Colors hair with one color.
info
Requires Hair segmentation Neural Network.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// set hair color
Hair.color("0.39 0.14 0.14 0.8")
// reset hair color
Hair.clear()
// Effect mCurrentEffect = ...
// set hair color
mCurrentEffect.callJSMethod("Hair.color", "0.39 0.14 0.14 0.8");
// reset hair color
mCurrentEffect.callJSMethod("Hair.clear", "");
// var currentEffect: BNBEffect = ...
// set hair color
currentEffect?.callJsMethod("Hair.color", params: "0.39 0.14 0.14 0.8")
// reset hair color
currentEffect?.callJsMethod("Hair.clear", params: "")
// const player = new Player(...)
// set hair color
player.callJsMethod("Hair.color", "0.39 0.14 0.14 0.8")
// reset hair color
player.callJsMethod("Hair.clear")
Preview
Drag
Hair strands painting#
Colors hair strands with 1 to 5 colors.
info
Requires Hair strands painting Add-On.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Sets hair strands color
HairStrand.color("0.7 1 1 0.8")
// Sets hair strands multiple colors (up to 5 colors)
HairStrand.color([
"0.80 0.40 0.40 1.0",
"0.83 0.40 0.40 1.0",
"0.85 0.75 0.75 1.0",
"0.87 0.60 0.60 1.0",
"0.99 0.65 0.65 1.0"])
// Resets hair strands colors
HairStrand.clear()
// Effect mCurrentEffect = ...
// Sets hair strands color
mCurrentEffect.callJSMethod("HairStrand.color", "0.7 1 1 0.8");
// Sets hair strands multiple colors (up to 5 colors)
mCurrentEffect.callJSMethod("HairStrand.color", "[
\"0.80 0.40 0.40 1.0\",
\"0.83 0.40 0.40 1.0\",
\"0.85 0.75 0.75 1.0\",
\"0.87 0.60 0.60 1.0\",
\"0.99 0.65 0.65 1.0\"
]");
// Resets hair strands colors
mCurrentEffect.callJSMethod("HairStrand.clear", "");
// var currentEffect: BNBEffect = ...
// Sets hair strands colors
currentEffect?.callJsMethod("HairStrand.color", params: "0.7 1 1 0.8")
// Sets hair strands multiple colors (up to 5 colors)
currentEffect?.callJsMethod("HairStrand.color", params: "[
\"0.80 0.40 0.40 1.0\",
\"0.83 0.40 0.40 1.0\",
\"0.85 0.75 0.75 1.0\",
\"0.87 0.60 0.60 1.0\",
\"0.99 0.65 0.65 1.0\"]
")
// Resets hair strands colors
currentEffect?.callJsMethod("HairStrand.clear", params: "")
// const player = new Player(...)
// Sets hair strands colors
player.callJsMethod("HairStrand.color", "0.7 1 1 0.8")
// Sets hair strands multiple colors (up to 5 colors)
player.callJsMethod("HairStrand.color", JSON.strigify([
"0.80 0.40 0.40 1.0",
"0.83 0.40 0.40 1.0",
"0.85 0.75 0.75 1.0",
"0.87 0.60 0.60 1.0",
"0.99 0.65 0.65 1.0"
]))
// Resets hair strands colors
player.callJsMethod("HairStrand.clear")
Preview
Drag
Hair gradient#
Colors hair with 1 to 4 colors.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Sets hair gradient color (up to 4 colors)
HairGradient.color(["1 0.4 0.4 0.7", "0.5 0.1 0.7 0.7"]) // half of hair is green and another one is blue
// Resets hair gradient color
HairGradient.clear()
// Effect mCurrentEffect = ...
// Sets hair gradient color (up to 4 colors)
mCurrentEffect.callJSMethod("HairGradient.color", "[\"1 0.4 0.4 0.7\", \"0.5 0.1 0.7 0.7\"]"); // half of hair is green and another one is blue
// Resets hair gradient color
mCurrentEffect.callJSMethod("HairGradient.clear", "");
// var currentEffect: BNBEffect = ...
// Sets hair gradient color (up to 4 colors)
currentEffect?.callJsMethod("HairGradient.color", params: "[\"1 0.4 0.4 0.7\", \"0.5 0.1 0.7 0.7\"]") // half of hair is green and another one is blue
// Resets hair gradient color
currentEffect?.callJsMethod("HairGradient.clear", params: "")
// const player = new Player(...)
// Sets hair gradient color (up to 4 colors)
player.callJsMethod("HairColor.color", JSON.strigify(["1 0.4 0.4 0.7", "0.5 0.1 0.7 0.7"])) // half of hair is green and another one is blue
// Resets hair gradient color
player.callJsMethod("HairColor.clear")
Preview
Drag
Eyes beautification#
Eyes coloring#
Changes the color of the iris as in virtual lens try on.
info
Requires Eye segmentation Neural Network.
- config.js
- Java
- Swift
/* Feel free to add your custom code below */
// set eyes color
Eyes.color("0 0.2 0.8 0.64")
// reset eyes color
Eyes.clear()
// Effect mCurrentEffect = ...
// set eyes color
mCurrentEffect.callJSMethod("Eyes.color", "0 0.2 0.8 0.64");
// reset eyes color
mCurrentEffect.callJSMethod("Eyes.clear", "");
// var currentEffect: BNBEffect = ...
// set eyes color
currentEffect?.callJsMethod("Eyes.color", params: "0 0.2 0.8 0.64")
// reset eyes color
currentEffect?.callJsMethod("Eyes.clear", params: "")
Preview
Drag
Eye flare#
Makes eyes more expressive adding flare.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// set eye flare strength
EyesFlare.strength("1")
// Effect mCurrentEffect = ...
// set eye flare strength
mCurrentEffect.callJSMethod("EyesFlare.strength", "1");
// var currentEffect: BNBEffect = ...
// set eye flare strength
currentEffect?.callJsMethod("EyesFlare.strength", params: "1")
// const player = new Player(...)
// set eye flare strength
player.callJsMethod("EyesFlare.strength", "1")
Preview
Drag
Eyes whitening#
Makes the look more expressive by whitening eyes.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// set eyes whitening strength
EyesWhitening.strength("1")
// Effect mCurrentEffect = ...
// set eyes whitening strength
mCurrentEffect.callJSMethod("EyesWhitening.strength", "1");
// var currentEffect: BNBEffect = ...
// set eyes whitening strength
currentEffect?.callJsMethod("EyesWhitening.strength", params: "1")
// const player = new Player(...)
// set eyes whitening strength
player.callJsMethod("EyesWhitening.strength", "1")
Preview
Drag
Eye bags removal#
Removes eye bags. Works in offline mode only (for photo or video processing).
info
Requires Eye bags removal Add-On.
- config.js
- Java
- Swift
- JavaScript
/* Feel free to add your custom code below */
// Enables eye bags removal
EyeBagsRemoval.enable()
// Disables eye bags removal
EyeBagsRemoval.disable()
// Effect mCurrentEffect = ...
// Enables eye bags removal
mCurrentEffect.callJSMethod("EyeBagsRemoval.enable", "");
// Disables eye bags removal
mCurrentEffect.callJSMethod("EyeBagsRemoval.disable", "");
// var currentEffect: BNBEffect = ...
// Enables eye bags removal
currentEffect?.callJsMethod("EyeBagsRemoval.enable", params: "")
// Disables eye bags removal
currentEffect?.callJsMethod("EyeBagsRemoval.disable", params: "")
// const player = new Player(...)
// Enables eye bags removal
player.callJsMethod("EyeBagsRemoval.enable")
// Disables eye bags removal
player.callJsMethod("EyeBagsRemoval.disable")
Preview
Drag
Skin smoothing PRO (Coming Soon...)#
info
Requires Skin smoothing Neural Network.
Neck smoothing (Coming Soon...)#
info
Requires Neck smoothing Neural Network.
Acne removal (Coming Soon...)#
info
Requires Acne removal Add-On.