---
description: Set up Banuba SDK for VidyoPlatform WebRTC Application
---

# Virtual Background - Banuba SDK

VidyoPlatform WebRTC SDK incorporates the Banuba 3rd Party solution for Virtual Background and Background Blur features. This integration enhances the video conferencing experience by allowing users to use virtual backgrounds and apply background blur during their video calls.

{% hint style="info" %}
[Banuba Virtual Background API](https://docs.banuba.com/face-ar-sdk-v1/effect_api/virtual_background)
{% endhint %}

### Obtaining Banuba Client token

SDK token is an automatically generated set of characters unique to each client sent in .txt format. It activates the licenced Banuba SDK functionality in the client app. There are two types of tokes:

* Demo token is provided to start the Banuba SDK trial. It's **valid for 14 days**, our standard trial period. The token activates all SDK features for you to assess the SDK performance in your project.
* Commercial token is provided after you make payment. **It’s valid throughout the prepaid period**. The token activates the SDK features defined by your software licence.

{% hint style="info" %}
Once the token expires, the Banuba watermark and screen blur will appear automatically in your app.
{% endhint %}

Therefore, please:

* Don’t use demo tokens in live apps.
* Observe payments of your Banuba SDK licence and renew the commercial token on time.

### How to get the Token?

To get the demo token and start the Banuba SDK trial, please contact Banuba Sales Manager or send them a request via the website form.

To receive a new trial client token please fill in the form on [banuba.com](https://www.banuba.com/) website, or contact Banuba via [info@banuba.com](mailto:info@banuba.com).

[Contact Bauba Support](https://docs.banuba.com/face-ar-sdk-v1/support)

More info: [Bauba SDK Token](https://docs.banuba.com/face-ar-sdk-v1/overview/token_management/#what-is-an-sdk-token)

## Integration with VidyoPlatform WebRTC SDK (VidyoClient)

We use an API Guide for seamless Banuba SDK integration as described [here](https://docs.banuba.com/face-ar-sdk-v1/web/web_overview).

`BanubaSDK.js` exports different APIs for Web AR development like _Player_, _Effect_, several types of _Input_ and _Output_.\
A generic workflow looks like:

> _Input_ -> _Player_ + _Effect_ -> _Output_

In our VidyoClient WebRTC case:

> WebRTC MediaStream -> _Player_ + _Effect_ -> MediaStream (WebRTC Peer Connection)

#### Player

The _Player_ allows to consume different data inputs like webcam or image file, to apply an effect on top of it and to produce an output like rendering to DOM node or an image file.

#### Effect

The _Effect_ allows to consume an effect or a face filter as remote or local archive.

### Banuba SDK Library

We consume SDK as a CDN script tag preloaded along with Web Application `index.html`

```html
<script src="https://cdn.jsdelivr.net/npm/@banuba/webar/dist/BanubaSDK.browser.js"></script>
```

However, you're free to use any kind of SDK loader like via NPM or even embed static file.

* Download and link `BanubaSDK.js`

or via NPM (or YARN)

* `npm i @banuba/webar@1.6.0`

{% hint style="info" %}
WebRTC Virtual Background is based on **Banuba 1.6 SDK version**
{% endhint %}

### Javascript Codebase

We deliver Banuba SDK implementation in a single file called `BanubaPlugin.js` distributed along with the VidyoPlatform WebRTC Sample & SDK.

Here you can see how we create a Player and provide a Token:

```javascript
  const player = await Player.create({
    clientToken: "BANUBA TOKEN",ava
    devicePixelRatio: 1
  });
```

and then export BaubaPlugin for use as an interceptor (see **VidyoConnector.js** sample file):

```javascript
let banubaPlugin = await import('./banuba/BanubaPlugin.js')

// in case we switch between banuba and banuba_background
await banubaPlugin.pause();

if(val === 'banuba_background') {
    vidyoConnector.RegisterLocalCameraStreamInterceptor(banubaPlugin.pictureBackground);
} else {
    vidyoConnector.RegisterLocalCameraStreamInterceptor(banubaPlugin.blurBackground);
}
```

Stop the interceptor:

```javascript
vidyoConnector.UnregisterLocalCameraStreamInterceptor();
```

where `vidyoConnector` is a VidyoClient SDK instance.

{% hint style="info" %}
To get the latest WebRTC Sample & SDK, please contact our support team at [support@vidyocloud.com](mailto:support@vidyocloud.com).
{% endhint %}

## Free Alternatives

Additionally, you can explore free alternatives like:

* MediaPipe from Google: [https://developers.google.com/mediapipe](https://developers.google.com/mediapipe)\
  Demo: [https://mediapipe-studio.webapps.google.com/demo/image\_segmenter](https://mediapipe-studio.webapps.google.com/demo/image_segmenter)
* Figment: [https://www.tryfigment.com](https://www.tryfigment.com/)

Both are integrated similarly via `MediaPipePlugin.js` and `FigmentPlugin.js`
