Banuba WebAR SDK

@banuba/webar - Banuba SDK for web.

Check out the Banuba WebAR overview to learn the basics.

Installation

CDN

Via <script> tag:

<!-- Exposes BanubaSDK variable on window -->
<script src="https://cdn.jsdelivr.net/npm/@banuba/webar/dist/BanubaSDK.browser.js"></script>
<script>
  const { Webcam, Player, Dom } = BanubaSDK

  Player.create({
    clientToken: "PUT YOUR CLIENT TOKEN HERE",
  }).then((player) => {
    player.use(new Webcam())

    Dom.render(player, "body")
  })
</script>

Via <script type="module"> tag:

<script type="module">
  import {
    Webcam,
    Player,
    Dom,
  } from "https://cdn.jsdelivr.net/npm/@banuba/webar/dist/BanubaSDK.browser.esm.js"

  Player.create({
    clientToken: "PUT YOUR CLIENT TOKEN HERE",
  }).then((player) => {
    player.use(new Webcam())

    Dom.render(player, "body")
  })
</script>

NPM

npm i --save @banuba/webar

import { Webcam, Player, Dom } from "@banuba/webar"
import wasm from "@banuba/webar/BanubaSDK.wasm"
import simd from "@banuba/webar/BanubaSDK.simd.wasm"
import data from "@banuba/webar/BanubaSDK.data"

Player.create({
  clientToken: "PUT YOUR CLIENT TOKEN HERE",
  locateFile: {
    "BanubaSDK.wasm": wasm,
    "BanubaSDK.simd.wasm": simd,
    "BanubaSDK.data": data,
  },
}).then((player) => {
  player.use(new Webcam())

  Dom.render(player, "body")
})

Check out the Bundlers section of the Integrations guides.

Obtaining Banuba Client token

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

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

Resources and links

• Banuba WebAR overview

• Banuba WebAR demo applications

• Demo face filters

• Banuba WebAR JS API docs

• Changelog