# 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>.

[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>.
{% endhint %}

## Free Alternatives

Additionally, you can explore free alternatives like:

* MediaPipe from Google: <https://developers.google.com/mediapipe>\
  Demo: <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`


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://enghouse-vidyo.gitbook.io/vidyoplatform/use-cases/virtual-background-banuba-sdk.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.