Options
All
  • Public
  • Public/Protected
  • All
Menu

Banuba SDK JavaScript API Reference

Index

Input

Core

Output

Misc

Input

InputOptions

InputOptions: { crop?: (renderWidth: number, renderHeight: number) => [cropX: number, cropY: number, cropWidth: number, cropHeight: number]; horizontalFlip?: boolean; resize?: (frameWidth: number, frameHeight: number) => [renderWidth: number, renderHeight: number] }

Customizes production of Input frames

Type declaration

  • Optional crop?: (renderWidth: number, renderHeight: number) => [cropX: number, cropY: number, cropWidth: number, cropHeight: number]

    Crops the source frame (after resize if any)

    example
    player.use(
 new Webcam(),
 {
   // renders square frames
   resize: (width, height) => [(width - height) / 2, 0, height, height],
 },
)
      • (renderWidth: number, renderHeight: number): [cropX: number, cropY: number, cropWidth: number, cropHeight: number]

      • Parameters

        • renderWidth: number
        • renderHeight: number

        Returns [cropX: number, cropY: number, cropWidth: number, cropHeight: number]

  • Optional horizontalFlip?: boolean

    Mirrors the source frames by X axis

    example
    player.use(
 new MediaStream(
   await navigator.mediaDevices.getUserMedia({ video: true }),
 ),
 {
   horizontalFlip: true,
 },
)
  • Optional resize?: (frameWidth: number, frameHeight: number) => [renderWidth: number, renderHeight: number]

    Resizes the source frames

    example
    player.use(
 new Webcam(),
 {
   // renders frames of half of the original resolution
   resize: (width, height) => [width / 2, height / 2],
 },
)
      • (frameWidth: number, frameHeight: number): [renderWidth: number, renderHeight: number]

      • Parameters

        • frameWidth: number
        • frameHeight: number

        Returns [renderWidth: number, renderHeight: number]

Const defaultVideoConstraints

defaultVideoConstraints: MediaTrackConstraints = ...

Default webcam video constraints to apply

Const defaultVideoOptions

defaultVideoOptions: VideoOptions = ...

Core

PlayerOptions

PlayerOptions: Partial<SDKOptions>

Player options are all the same as SDKOptions but optional

RenderingOptions

RenderingOptions: { fps?: number } & InputOptions

SDKOptions

SDKOptions: { cameraOrientation?: 0 | 90 | 180 | 270; canvas?: HTMLCanvasElement; clientToken: string; devicePixelRatio?: number; enableMirroring?: boolean; faceSearchingMode?: keyof typeof FaceSearchingMode; locateFile?: string | ((fileName: BanubaSDKBinary) => string) | Record<BanubaSDKBinary, string> | Record<Exclude<BanubaSDKBinary, "BanubaSDK.simd.wasm">, string>; maxFaces?: 1 | 2 | 3 | 4 }

Type declaration

  • Optional cameraOrientation?: 0 | 90 | 180 | 270

    How to render processed frames

    default

    0

  • Optional canvas?: HTMLCanvasElement

    Ordinary you won't use the option

    Overrides internal canvas element used for WebGL rendering

    default

    HTMLCanvasElement

  • clientToken: string

    Banuba Client token

  • Optional devicePixelRatio?: number

    Ordinary you won't use the option

    Overrides devicePixelRatio used for proper rendering on hiDPI devices

    default

    window.devicePixelRatio

  • Optional enableMirroring?: boolean

    Should mirroring be enabled

    deprecated

    since 0.36.0

    From BanubaSDK version 0.36.0 and above you can enable/disable mirroring with horizontalFlip option of Player.use method.

    By default all Inputs have horizontalFlip set to false except Webcam has horizontalFlip set to true.

    default

    false

  • Optional faceSearchingMode?: keyof typeof FaceSearchingMode

    Face searching algorithm to use

    default

    "good"

  • Optional locateFile?: string | ((fileName: BanubaSDKBinary) => string) | Record<BanubaSDKBinary, string> | Record<Exclude<BanubaSDKBinary, "BanubaSDK.simd.wasm">, string>

    Where to find .wasm and .data files relative to the page running the script

    example
    const player = await Player.create({
   clientToken: "xxx-xxx-xxx",
   locateFile: "static/webar/",
})
    example
    const player = await Player.create({
   clientToken: "xxx-xxx-xxx",
   locateFile: (fileName) => "static/webar/" + fileName,
})
    example
    const player = await Player.create({
   clientToken: "xxx-xxx-xxx",
   locateFile: {
     "BanubaSDK.data": "static/webar/BanubaSDK.data",
     "BanubaSDK.wasm": "static/webar/BanubaSDK.wasm",
     "BanubaSDK.simd.wasm": "static/webar/BanubaSDK.simd.wasm",
  },
})
  • Optional maxFaces?: 1 | 2 | 3 | 4

    Maximum number of faces for processing by a recognizer

    default

    1

Const defaultPlayerOptions

defaultPlayerOptions: Pick<PlayerOptions, "clientToken" | "locateFile" | "devicePixelRatio" | "faceSearchingMode" | "cameraOrientation" | "maxFaces"> = {}

Default Player options

Output

PhotoSettings

PhotoSettings: { height?: number; quality?: number; type?: "image/jpeg" | "image/webp"; width?: number }

Output photo settings

Type declaration

  • Optional height?: number

    Output photo height

    default

    Player's input frame height

  • Optional quality?: number

    Output photo quality

    default

    0.92 for "image/jpeg"

    default

    0.8 for "image/webp"

  • Optional type?: "image/jpeg" | "image/webp"

    Output photo mime type

    default

    "image/jpeg"

  • Optional width?: number

    Output photo width

    default

    Player's input frame width

Const Dom

Dom: { render: (player: Player, container: string | HTMLElement) => void; unmount: (container: string | HTMLElement) => void } = ...

Type declaration

  • render: (player: Player, container: string | HTMLElement) => void
      • (player: Player, container: string | HTMLElement): void

      • Renders the Player into the supplied container

        example
        Dom.render(player, document.getElementById("web-ar"))
// or
Dom.render(player, "#web-ar")

// or even
Dom.render(player, "body")

        Parameters

        Returns void

  • unmount: (container: string | HTMLElement) => void
      • (container: string | HTMLElement): void

      • Removes a mounted Player from the supplied container

        example
        Dom.unmount("#web-ar")

        Parameters

        Returns void

Misc

Url

Url: string

Web address or data url

Const VERSION

VERSION: string = ...

Current Banuba WebAR SDK version in use