Banuba SDK Web AR Optimization tutorials

Optimizing WebAR SDK bundle size

Banuba WebAR SDK is tree-shakable, so simply import only those modules your application relies on:

// the named import saves extra KBs
import { Webcam, Player, Effect, Dom } from "@banuba/webar"

// ...

Optimizing WebAR SDK assets size

BanubaSDK.wasm and BanubaSDK.simd.wasm are heavy ones. But they have a good compressability due to the internal format of the files.

Asset	Original	Gzip	Brotli
BanubaSDK.wasm	12Mb	3.5Mb	2.5Mb
BanubaSDK.simd.wasm	13Mb	3.8Mb	2.7Mb

Most hosting environments like Netlify automatically pre compress the files, but sometimes you may have to compress them yourself for better downloading times. You can run the command in the assets folder to get them compressed:

npx gzipper compress --brotli .

See gzipper docs for details.

Speed up WebAR SDK on modern browsers

Banuba WebAR SDK ships with the BanubaSDK.simd.wasm file - the SIMD version of the BanubaSDK.wasm. Without digging into the details of what SIMD is, the SIMD enabled file can boost the processing performance up to several times. Taking into consideration that SIMD has a good support across modern browsers you should definitely give it a try.

SIMD support detection is built into the WebAR SDK. It means the SDK will try to load BanubaSDK.simd.wasm if the current browser supports SIMD and will load BanubaSDK.wasm otherwise.

Don't forget to point BanubaSDK to the SIMD file location if you are using locateFile:

const player = await Player.create({
  clientToken: "xxx-xxx-xxx",
  // point BanubaSDK where to find these vital files
  locateFile: {
    "BanubaSDK.data": "/path/to/BanubaSDK.data",
    "BanubaSDK.wasm": "/path/to/BanubaSDK.wasm",
    "BanubaSDK.simd.wasm": "/path/to/BanubaSDK.simd.wasm",
  },
})

See Player.create() and locateFile for details.

Speed up Face Tracking on Safari

It's generally recommended to use lightweight version of the Face Tracking technology on Safari for better performance in exchange for the tracking accuracy. Please, check the Low FPS of effects with Face Tracking on Safari section of the Known issues page.

Reducing CPU/GPU usage on HiDPI devices

On HiDPI devices Banuba WebAR SDK scales the output frames by the device pixel ratio. This approach allows SDK to render face masks in a high quality and keep all the mask details.

Despite the better rendering quality this approach utilizes more CPU and GPU resources since the frame size to be processed scales geometrically.

One can simply opt out from the default behavior and reduce CPU/GPU utilization by overriding the devicePixelRatio used by the SDK:

const player = await Player.create({
  clientToken: "xxx-xxx-xxx",
  devicePixelRatio: 1,
})

See the Player.create() method docs for more details.

The CPU and GPU usage can be reduced even more by processing frames of smaller size, e.g the 640x480 webcam frame size can be used instead of the default 1280x720 frame size:

await player.use(new Webcam({ width: 640, height: 480 }))

Check out the Video cropping tutorial for more details.

Preloading Effects

Sometimes you may experience a time lag between player.applyEffect() call and a visual change due to the long time of the effect archive download.

To speed up things, you can preload the Effect and apply it later on demand:

const preloaded = await Effect.preload("SomeBigEffect.zip"))

// ...

player.applyEffect(preloaded)

You can also scale the approach and add a local cache of the preloaded effects, or preload an effect on some user interaction like mouse hover a button.