Virtual Background - Banuba SDK

Set up Banuba SDK for VidyoPlatform WebRTC Application

PreviousClosed Captioning NextCalls Recording

Last updated 1 year ago

Virtual Background - Banuba SDK

Set up Banuba SDK for VidyoPlatform WebRTC Application

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.

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.

Once the token expires, the Banuba watermark and screen blur will appear automatically in your app.

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 website, or contact Banuba via .

More info:

Integration with VidyoPlatform WebRTC SDK (VidyoClient)

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

<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

WebRTC Virtual Background is based on Banuba 1.6 SDK version

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:

  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):

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:

vidyoConnector.UnregisterLocalCameraStreamInterceptor();

where vidyoConnector is a VidyoClient SDK instance.

Free Alternatives

Additionally, you can explore free alternatives like:

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