Banuba Web AR SDK and Agora Web SDK integration example

Requirements

• The latest Banuba SDK Web AR release
• Banuba client token
• OpenTok apiKey, sessionId and token
• Nodejs installed
• Browser with support of WebGL 2.0

Obtaining Banuba SDK Web AR

To get the latest Banuba SDK Web AR release please fill in the form on banuba.com website, or contact us via [email protected].

Obtaining Banuba Client token

Banuba Client token is required to get Banuba SDK Web AR working.

Generally it's delivered with Banuba SDK Web AR archive.

To receive a new trial client token please fill in the form on banuba.com website, or contact us via [email protected].

Environment setup and local run

Put Banuba SDK Web AR files into the webar folder

Vonage_demo/
   src
   webar/
    +  BanubaSDK.data
    +  BanubaSDK.js
    +  BanubaSDK.wasm
    +  BanubaSDK.simd.wasm
       effects
   config.js    
   index.html
   index.js
   README.md

Insert Banuba client token into config.js file

...
banubaSDK: {
    clientToken: "PUT YOUR CLIENT TOKEN HERE",
    ...
},

Insert OpenTok apiKey, sessionId and token into config.js

...
openTok: {
    apiKey: "",
    sessionID: "",
    token: ""
},

Test by yourself

Run the live server in the cloned folder

npx live-server

Open localhost:8080 in two different browser windows.

Testing with mate

Set up the project on mate's PC.

Run the live server in the cloned folders on both PCs.

npx live-server

Open localhost:8080 on both PCs.

Adding a new effect

Zip the effect folder and put it under the effects/ subfolder

Vonage_demo/
    src
    webar/
        BanubaSDK.data
        BanubaSDK.js
        BanubaSDK.wasm
        BanubaSDK.simd.wasm
        effects/
            BackgroundPicture.zip
            +   NewEffect.zip
    config.js    
    index.html
    index.js
    README.md

Add the effect name into effects array at config.js

...
effects: [
    "BackgroundPicture",
    +  "NewEffect",
]