Skip to main content
  • Core Products
  • Add-Ons
  • Extensions Marketplace
Android
iOS
Web
macOS
Windows
Flutter
React Native

Banuba AR Face Filter

This guide is provided by Banuba. Agora is planning a documentation upgrade program for all extensions on the marketplace. Please stay tuned.

By integrating Banuba Face AR SDK and Agora.io SDK you can enable augmented reality features in video calls such as face filters, face touch up filters and virtual backgrounds. You can find the integration examples below.

Prerequisites​

  • The latest Banuba SDK archive
  • Banuba trial client token.

To receive a trial token or a full commercial licence from Banuba - please fill in our form on form on banuba.com website, or contact us via info@banuba.com.

Integrate Banuba Face AR extension​

Get Started​

  1. Make sure that you have Android NDK and CMake are installed! Project contains C++ sources, so this is required! Recommended NDK versions is 21.1.6352462, required CMake version is 3.9, 3.14 or above is recommended (Android SDK manager provides 3.18.1, it should be installed).
  2. Get the latest Banuba SDK archive, Banuba trial client token. To receive full commercial license from Banuba - please fill in our form on form on banuba.com website, or contact us via info@banuba.com.
  3. Copy .aar file from the Banuba SDK archive into libs dir:

    banuba_effect_player-release.aar => libs/

  4. Copy include/bnb directory into libs/bnb_sdk/:

    include/bnb => libs/bnb_sdk/bnb

  5. Get the latest Agora Video SDK archive.
  6. Copy jar files from the Agora Video SDK archive into libs dir:

    agora-rtc-sdk.jar => libs/

  7. Copy architecture folders from the Agora Video SDK archive into jniLibs dir:

    arm64-v8a, armeabi-v7a and x86_64 => libs/jniLibs/

  8. Copy Agora SDK headers (*.h files) into libs/agora_rtc_sdk/include:

    low_level_api/include => libs/agora_rtc_sdk/include

  9. Copy and Paste your Banuba client token into appropriate section of app/src/main/java/com/banuba/sdk/agorapluginexample/ClientToken.kt with " " symbols. For example: BANUBA_CLIENT_TOKEN = "place_your_token_here"
  10. Visit agora.io to sign up and get token, app ID and channel ID.
  11. Copy and Paste your Agora token, app ID and channel ID into appropriate section of app/src/main/java/com/banuba/sdk/agorapluginexample/ClientToken.kt with " " symbols. For example: AGORA_APP_ID = "place_your_token_here"
  12. Open the project in Android Studio and run the necessary target using the usual steps.

How to use BanubaFiltersAgoraExtension​

Add following imports:


_5
import com.banuba.agora.plugin.BanubaEffectsLoader
_5
import com.banuba.agora.plugin.BanubaExtensionManager
_5
import com.banuba.agora.plugin.BanubaResourceManager
_5
import com.banuba.agora.plugin.model.ArEffect
_5
import com.banuba.sdk.utils.ContextProvider

Add extension to RtcEngineConfig:


_7
RtcEngineConfig().apply {
_7
...
_7
System.loadLibrary("banuba")
_7
addExtension(BanubaExtensionManager.EXTENSION_NAME)
_7
ContextProvider.setContext(mContext)
_7
...
_7
}

Create and initialize BanubaResourceManager:


_3
private val banubaResourceManager by lazy(LazyThreadSafetyMode.NONE) {
_3
BanubaResourceManager(this)
_3
}


_4
override fun onCreate(savedInstanceState: Bundle?) {
_4
...
_4
banubaResourceManager.prepare()
_4
}

After those steps enable and initialize extension:


_5
agoraRtc.enableExtension(
_5
BanubaExtensionManager.VENDOR_NAME,
_5
BanubaExtensionManager.VIDEO_FILTER_NAME,
_5
true
_5
)


_20
private fun initBanubaPlugin() {
_20
agoraRtc.setExtensionProperty(
_20
BanubaExtensionManager.VENDOR_NAME,
_20
BanubaExtensionManager.VIDEO_FILTER_NAME,
_20
BanubaExtensionManager.KEY_SET_RESOURCES_PATH,
_20
banubaResourceManager.resourcesPath
_20
)
_20
agoraRtc.setExtensionProperty(
_20
BanubaExtensionManager.VENDOR_NAME,
_20
BanubaExtensionManager.VIDEO_FILTER_NAME,
_20
BanubaExtensionManager.KEY_SET_EFFECTS_PATH,
_20
banubaResourceManager.effectsPath
_20
)
_20
agoraRtc.setExtensionProperty(
_20
BanubaExtensionManager.VENDOR_NAME,
_20
BanubaExtensionManager.VIDEO_FILTER_NAME,
_20
BanubaExtensionManager.KEY_SET_TOKEN,
_20
BANUBA_CLIENT_TOKEN
_20
)
_20
}

To enable/disable effects use the following code:


_14
private val onEffectPrepared = object : BanubaResourceManager.EffectPreparedCallback {
_14
override fun onPrepared(effectName: String) {
_14
sendEffectToFilter(effectName)
_14
}
_14
}
_14
_14
private fun sendEffectToFilter(effect: String) {
_14
agoraRtc.setExtensionProperty(
_14
BanubaExtensionManager.VENDOR_NAME,
_14
BanubaExtensionManager.VIDEO_FILTER_NAME,
_14
BanubaExtensionManager.KEY_LOAD_EFFECT,
_14
effect
_14
)
_14
}


_1
banubaResourceManager.prepareEffect(Effect name, onEffectPrepared)

Effects managing​

To retrieve current effects use the following code:


_1
val effects: List<ArEffect> = BanubaEffectsLoader(this).loadEffects()

ArEffect contains following information:
name: String - pass to banubaResourceManager.prepareEffect(Effect name, onEffectPrepared). Also can be used to display label on the UI
preview: Bitmap - can be used as preview image

To modify effects, add or remove effect folder in app/src/main/assets/effects directory. By default sample contains the following effects:

  1. ElvisUnleashed
  2. EnglandEightPieceCap
  3. FashionHistory1940_male
  4. MorphingHatBow
  5. Nerd
  6. SnapBubblesGlasses
  7. Space
  8. StarGlow
  9. TitanicJack

Run the demo​

vundefined