Banuba SDK Web AR demo app

Requirements

The latest Banuba SDK Web AR release
Banuba client 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

Clone the repository

git clone [email protected]:Banuba/quickstart-web.git

Put Banuba SDK Web AR files into the cloned folder

quickstart-web/
   effects/
   BanubaClientToken.js
+  BanubaSDK.data
+  BanubaSDK.js
+  BanubaSDK.wasm
   index.html
   README.md
   styles.css

Insert Banuba client token into BanubaClientToken.js

window.BANUBA_CLIENT_TOKEN = "PUT YOUR CLIENT TOKEN HERE"

Run the live server in the cloned folder

npx live-server

Open localhost:8080

Adding a new effect

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

quickstart-web/
   effects/
     Afro.zip
     PoliceMan.zip
     Glasses.zip
     MonsterFactory.zip
+    NewEffect.zip
     Spider.zip
   BanubaClientToken.js
   BanubaSDK.data
   BanubaSDK.js
   BanubaSDK.wasm
   index.html
   README.md
   styles.css

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

<script type="module">
  import { Effect, Webcam, Player, VideoRecorder, ImageCapture, Dom } from "./BanubaSDK.js"

  const effects = [
+   "NewEffect",
    "Afro",
    "PoliceMan",
    "Glasses",
    "MonsterFactory",
    "Spider",
  ]

Recommend Projects