Virtual Background API

Banuba provides the Virtual Background API designed to help you integrate augmented reality background separation into your app. It aims to change your background to hide everything behind you.

Download example

tip

Read more about how to combine Virtual Background API and effects.

tip

If you want to add background separation to an existing effect, see Face Beauty API.

The Virtual Background API allows to change background with the following built-in features:

Background texture

Sets background behind the user to a texture.

• Background.texture('image.png') - sets an image or a video file as a background texture. The file should be placed into the effect's folder.
• Supported formats.

config.js

/* Feel free to add your custom code below */

Background.texture('image.png')

Java

// Effect mCurrentEffect = ...

mCurrentEffect.evalJs("Background.texture('image.png')", null);

Swift

// var currentEffect: BNBEffect = ...

currentEffect?.evalJs("Background.texture('image.png')", resultCallback: nil)

JavaScript

await effect.evalJs("Background.texture('image.png')")

Preview

Drag

Background texture content mode

Scales the background content mode.

• Background.contentMode(mode) - sets a content mode of background texture.
• Available mods: scale_to_fill, fill, fit.

config.js

/* Feel free to add your custom code below */

Background.texture('image.png')
Background.contentMode('fit')

Java

// Effect mCurrentEffect = ...

mCurrentEffect.evalJs("Background.texture('image.png')", null);
mCurrentEffect.evalJs("Background.contentMode('fit')", null);

Swift

// var currentEffect: BNBEffect = ... 

currentEffect?.evalJs("Background.texture('image.png')", resultCallback: nil)
currentEffect?.evalJs("Background.contentMode('fit')", resultCallback: nil)

JavaScript

await effect.evalJs("Background.texture('image.png')")
await effect.evalJs("Background.contentMode('fit')")

Drag

Background texture rotation

Rotates the background texture clockwise in degrees.

• Background.rotation(angle) - sets background image rotation angle. Angle should be provided in degrees.

config.js

/* Feel free to add your custom code below */

Background.texture('image.png')
Background.rotation(90)

Java

// Effect mCurrentEffect = ...

mCurrentEffect.evalJs("Background.texture('image.png')", null);
mCurrentEffect.evalJs("Background.rotation(90)", null);

Swift

// var currentEffect: BNBEffect = ... 

currentEffect?.evalJs("Background.texture('image.png')", resultCallback: nil)
currentEffect?.evalJs("Background.rotation(90)", resultCallback: nil)

JavaScript

await effect.evalJs("Background.texture('image.png')")
await effect.evalJs("Background.rotation(90)")

Preview

Drag

Background texture scale

Scales the background texture.

• Background.scale(factor) - sets the scale factor of background texture.

config.js

/* Feel free to add your custom code below */

Background.texture('image.png')
Background.scale(2)

Java

// Effect mCurrentEffect = ...

mCurrentEffect.evalJs("Background.texture('image.png')", null);
mCurrentEffect.evalJs("Background.scale(2)", null);

Swift

// var currentEffect: BNBEffect = ... 

currentEffect?.evalJs("Background.texture('image.png')", resultCallback: nil)
currentEffect?.evalJs("Background.scale(2)", resultCallback: nil)

JavaScript

await effect.evalJs("Background.texture('image.png')")
await effect.evalJs("Background.scale(2)")

Preview

Drag

Background blur

Sets background blur radius.

• Background.blur(radius) - set background blur radius in range from 0 to 1.

config.js

/* Feel free to add your custom code below */

Background.blur(0.6)

Java

// Effect mCurrentEffect = ...

mCurrentEffect.evalJs("Background.blur(0.6)", null);

Swift

// var currentEffect: BNBEffect = ...

currentEffect?.evalJs("Background.blur(0.6)", resultCallback: nil)

JavaScript

await effect.evalJs("Background.blur(0.6)")

Preview

Drag

Background transparency

Sets background transparency value.

• Background.transparency(value) - set background transparency value in range from 0 to 1. 0 - transparent background disabled , 1 - fully transparent background enabled

config.js

/* Feel free to add your custom code below */

Background.transparency(1)

Java

// Effect mCurrentEffect = ...

mCurrentEffect.evalJs("Background.transparency(1)", null);

Swift

// var currentEffect: BNBEffect = ...

currentEffect?.evalJs("Background.transparency(1)", resultCallback: nil)

JavaScript

await effect.evalJs("Background.transparency(1)")

Preview

Drag