Agora Banuba Extension example app

Requirements

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

Obtaining Agora Banuba Extension

The example uses CDN version of the @banuba/agora-extension npm package for simplicity. Please use the npm package mentioned above for real world projects.

Obtaining Banuba Client token

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

To obtain 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/agora-plugin-filters-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

agora-plugin-filters-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 37

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