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.

Banuba Virtual Background API

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 banuba.com website, or contact Banuba via [e-mail].

Contact Bauba Support

More info: Bauba SDK Token

Integration with VidyoPlatform WebRTC SDK (VidyoClient)

We use an API Guide for seamless Banuba SDK integration as described here.

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.

To get the latest WebRTC Sample & SDK, please contact our support team at [e-mail].

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

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