Banuba Web AR SDK and Agora Web SDK integration example

Important
Please use v0.x branch for SDK version 0.x (e.g. v0.38).

Requirements

• Banuba client token
• Agora App ID, Token and Channel name
• Nodejs installed
• Browser with support of WebGL 2.0

Obtaining Banuba SDK Web AR

The example uses CDN version of the @banuba/webar npm package for simplicity. Please use the npm package mentioned above for real world projects. Check out the Integration tutorials for more ways of consuming @banuba/webar package.

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

Clone the repository

git clone https://github.com/Banuba/videocall-web

Insert Banuba client token into BanubaClientToken.js

window.BANUBA_CLIENT_TOKEN = "PUT YOUR CLIENT TOKEN HERE"

Insert Agora App ID, Token and Channel name into AgoraAppId.js

window.AGORA_APP_ID = "PUT YOUR APP ID HERE"
window.AGORA_TOKEN = "PUT YOUR TOKEN HERE"
window.AGORA_CHANNEL_NAME = "PUT YOUR CHANNEL NAME HERE"

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

videocall-web/
   effects/
      Glasses.zip
      Hipster3.zip
      MonsterFactory.zip
      test_BG.zip
+     new_effect.zip
   AgoraAppId.js
   BanubaClientToken.js
   index.html
   LICENSE
   README.md
   styles.css

Add the effect name into effects array at index.html, line 50

<script type="module">
  const effects = [
+   "new_effect",
    "Glasses",
    "Hipster3",
    "MonsterFactory",
    "test_BG",
  ]