@banuba/webar/README.md

Banuba WebAR SDK

# Banuba WebAR SDK

`@banuba/webar` - Banuba SDK for web.

Check out the [Banuba WebAR overview](https://docs.banuba.com/far-sdk/tutorials/development/basic_integration?platform=web) to learn the basics.

## Installation

### CDN

Via `<script>` tag:

```html
<!-- 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:

```html
<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

```bash
npm i --save @banuba/webar
```

```js
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")
})
```

## Obtaining Banuba Client token

[Banuba Client token](https://docs.banuba.com/far-sdk/tutorials/development/basic_integration?platform=web) is required to get Banuba SDK Web AR working.

To receive a new trial client token please fill in the form on [banuba.com](https://www.banuba.com) website, or contact us via info@banuba.com.

## Resources and links

- [Banuba WebAR overview](https://docs.banuba.com/far-sdk/tutorials/development/basic_integration?platform=web)

- [Demo face filters](https://docs.banuba.com/far-sdk/tutorials/capabilities/demo_face_filters)

- [Banuba WebAR JS API docs](https://docs.banuba.com/far-sdk/generated/typedoc/)

- [Changelog](https://docs.banuba.com/far-sdk/tutorials/changelog)