Banuba SDK Web AR

What is included

Banuba SDK Web AR is delivered as:

• BanubaSDK.js - a JavaScript glue module for ease of use of the underlying WebAssembly module with browser-specific helpers for web camera frames retrieval, DOM rendering, resources loading, etc.
• BanubaSDK.wasm - low-level high-performance Banuba SDK module compiled to WebAssembly
• BanubaSDK.simd.wasm - same as BanubaSDK.wasm but with even more performance, see Speed up WebAR SDK for modern browsers for details.
• BanubaSDK.data - vital resources of the SDK
• modules/ - auxiliary SDK modules like face_tracker, background, lips segmentation and many more.
  • face_tracker.zip - face tracking module, required for all the effects relying on face position
  • background.zip - background segmentation module, required for all the Background effects
  • hair.zip - hair segmentation module
  • lips.zip - lips segmentation module
  • eyes.zip - eyes segmentation module
  • skin.zip - face and neck skin segmentation module
  • body.zip - body segmentation module, opposite to background segmentation
  • hands.zip - hands segmentation module

What it can do

BanubaSDK.js exports different APIs for Web AR development like Player, Effect, several types of Input and Output.

A generic workflow looks like:

Input -> Player + Effect -> Output

Player

The Player allows to consume different data inputs like webcam or image file, to apply an effect on top of it and to produce an output like rendering to DOM node or an image file.

Effect

The Effect allows to consume an effect or a face filter as remote or local archive.

Input

The Input can be one of:

• Webcam
• Image as Blob or URL
• Video as Blob or URl
• 3rd-party MediaStream like HTMLVideoElement stream or WebRTC stream

Output

The Output can be one of:

• HTML Element
• Image as Blob
• Video as Blob
• MediaStream that can be used by 3rd-parties like WebRTC peer connection

The plenty of input options multiplied by the plenty of output options covers lots of use cases like:

• Photo booth app with realtime webcam video processing and photo capturing
• Photo and video files post-processing app
• P2P video call app with face filter applied

And many more.

How it looks in JavaScript

Realtime webcam video processing and DOM rendering:

import { Webcam, Player, Module, Effect, Dom } from "https://cdn.jsdelivr.net/npm/@banuba/webar/dist/BanubaSDK.browser.esm.js"

const player = await Player.create({ clientToken: "xxx-xxx-xxx" })
await player.addModule(new Module("https://cdn.jsdelivr.net/npm/@banuba/webar/dist/modules/face_tracker.zip"))

await player.use(new Webcam())
player.applyEffect(new Effect("Glasses.zip"))

Dom.render(player, "#webar-app")

And with screenshot capturing:

import { Webcam, Player, Effect, Module, Dom, ImageCapture } from "https://cdn.jsdelivr.net/npm/@banuba/webar/dist/BanubaSDK.browser.esm.js"

const player = await Player.create({ clientToken: "xxx-xxx-xxx" })
await player.addModule(new Module("https://cdn.jsdelivr.net/npm/@banuba/webar/dist/modules/face_tracker.zip"))

await player.use(new Webcam())
player.applyEffect(new Effect("Glasses.zip"))

Dom.render(player, "#webar-app")

const capture = new ImageCapture(player)
const photo = await capture.takePhoto()

Still have any questions about Banuba SDK Web AR?

Visit the Web AR FAQ or contact support to get helped.