Getting Started

Get the client token

To start working with Banuba SDK in your project, you need to have a client token. To receive it, please fill in the form on banuba.com, or contact us via info@banuba.com.

iOS

Installation

1. Add BanubaSdk SPM packages into your project

info

Details about the SPM and CocoaPods packages see in Installation.

Integration

1. Setup banubaClientToken

common/common/AppDelegate.swift

loading...

2. Initialize BanubaSdkManager

common/common/AppDelegate.swift

loading...

3. Create Player and load the effect

camera/camera/ViewController.swift

loading...

4. Run the application! 🎉 🚀 💅

tip

See more use cases and code samples in the GitHub repo.

Android

Installation

To get started, add the Banuba SDK packages to your project.

Add the custom maven repo to your build.gradle.kts:

common/build.gradle.kts

loading...

And add the dependency on Banuba SDK package to your build.gradle.kts:

common/build.gradle.kts

loading...

info

Details about the packages see in Installation.

Integration

camera/src/main/java/com/banuba/sdk/example/camera/MainActivity.kt

loading...

Web

Requirements

• Nodejs installed
• Browser with WebGL 2.0 and higher

Integration

1. Setup the client token

BanubaClientToken.js

loading...

2. Import the required types from the @banuba/webar NPM package

index.html

loading...

info

See the details about the NPM package in Installation.

3. Initialize Player and apply the Effect

index.html

loading...

index.html

loading...

index.html

loading...

4. Run a local web server from a terminal inside the folder

npx live-server

5. Open localhost:8080 and start clicking 🎉 🚀 💅

tip

Follow the instructions of the demo app README.md to get more info.

note

The demo app leverages jsDelivr CDN for ease of getting started, for a real life application please use the @banuba/webar npm package.

Flutter

Banuba SDK for Flutter is available for iOS and Android and provides the following functionality:

• Load and interact with any Effect (including the Makeup effect).
• Still image processing.
• Interaction with Camera (open/close, take photo, flashlight control, facing).
• Screen recording.
• Videocall powered by Agora.

If this is not enough, you should go with native integration.

Integration guide

Android

1. Add banuba_sdk plugin:

flutter pub add banuba_sdk

2. Add code from the basic sample into your app. Don't forget to initialize BanubaSdkManager with the Client Token:

example/lib/main.dart

loading...

3. Add effects folder into your project. Link it with your app: add the following code into app build.gradle.

example/android/app/build.gradle

loading...

iOS

1. Add banuba_sdk plugin:

flutter pub add banuba_sdk

2. Link to Banuba SDK podspecs in ios/Podfile:

source 'https://github.com/sdk-banuba/banuba-sdk-podspecs.git'

3. Add code from the basic sample into your app. Don't forget to initialize BanubaSdkManager with the Client Token:

example/lib/main.dart

loading...

4. Add effects folder into your project. Link it with your app: add the
   folder into Runner Xcode project (File -> Add Files to 'Runner'...).

ReactNative

Banuba SDK for React Native available for iOS and Android and provides the following functionality:

• Load and interact with any Effect (including Makeup effect).
• Interaction with camera (open/close).
• Screen recording (screenshots and video).
• Videocall powered by Agora.

If this is not enough, you should go with native integration.

Integration guide

Android

1. Add @banuba/react-native dependency

yarn add @banuba/react-native

2. Add our Maven repository

example/android/build.gradle

loading...

3. Add effects folder and add a task to copy them into app

example/android/app/build.gradle

loading...

4. Copy code from this file into your app. Don't forget to intialize the SDK with the Client Token

example/src/App.tsx

loading...

iOS

1. Add @banuba/react-native dependency

yarn add @banuba/react-native

2. Add our podspecs repo to your Podfile

example/ios/Podfile

loading...

3. Add effects folder and link it to Xcode project: (File -> Add Files to ...)

4. Copy code from this file into your app. Don't forget to intialize the SDK with the Client Token

example/src/App.tsx

loading...

Desktop

The steps below apply to desktop integration (Windows and/or macOS) with C++.

1. Download Banuba SDK binaries from GitHub.

2. Integrate libraries downloaded on the previous step into your build system. If you use CMake, consider our quickstart-desktop-cpp sample.

for Windows

Besides the Banuba SDK itself, you will require third party libraries from the bin folder.

3. Create rendering context or copy and paste into your project ready-to-use helpers sources based on GLFW

4. Setup BNB_CLIENT_TOKEN

helpers/src/BanubaClientToken.hpp

loading...

5. Initialize Banuba SDK with the Client Token and path to resources from the archive with the binaries. Create Player, Camera, Input and Output and load the effect.

realtime-camera-preview/main.cpp

loading...

6. Run the application! 🎉 🚀 💅

info

The effects are also resources, you may initialize Banuba SDK with several resource paths (one for effects and one for SDK assets).

for macOS

Resources for MacOS are inside BanubaEffectPlayer.framework.

Still have questions about FaceAR SDK?

Visit our FAQ or contact our support.