Options
All
  • Public
  • Public/Protected
  • All
Menu

Banuba SDK JavaScript API Reference

Index

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

PlayerEventMap

PlayerEventMap: { effectactivated: BanubaSDK.Effect; framedata: BanubaSDK.FrameData; frameprocessed: { averagedDuration: number; instantDuration: number }; framereceived: { averagedDuration: number; instantDuration: number }; framerendered: { averagedDuration: number; instantDuration: number } }

Type declaration

  • effectactivated: BanubaSDK.Effect
  • framedata: BanubaSDK.FrameData
  • frameprocessed: { averagedDuration: number; instantDuration: number }
    • averagedDuration: number
    • instantDuration: number
  • framereceived: { averagedDuration: number; instantDuration: number }
    • averagedDuration: number
    • instantDuration: number
  • framerendered: { averagedDuration: number; instantDuration: number }
    • averagedDuration: number
    • instantDuration: number

PlayerOptions

PlayerOptions: { cameraOrientation?: 0 | 90 | 180 | 270; devicePixelRatio?: number; faceSearchMode?: keyof typeof BanubaSDK.FaceSearchMode; fps?: number; maxFaces?: 1 | 2 | 3 | 4 }

Type declaration

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

    How to render processed frames

    default

    0

  • Optional devicePixelRatio?: number

    Ordinary you won't use the option

    Overrides devicePixelRatio used for proper rendering on hiDPI devices

    default

    window.devicePixelRatio

  • Optional faceSearchMode?: keyof typeof BanubaSDK.FaceSearchMode

    Face searching algorithm to use

    default

    "GOOD"

  • Optional fps?: number

    Maximum render FPS

    default

    30

  • Optional maxFaces?: 1 | 2 | 3 | 4

    The maximum number of faces to be processed

    default

    1

RenderingOptions

RenderingOptions: Pick<PlayerOptions, "fps"> & InputOptions

SDKOptions

SDKOptions: { canvas?: HTMLCanvasElement; clientToken: string; locateFile?: string | ((fileName: BanubaSDKBinary) => string) | Record<BanubaSDKBinary, string> | Record<Exclude<BanubaSDKBinary, "BanubaSDK.simd.wasm">, string> }

Type declaration

  • 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 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", // .simd.wasm is optional
      },
    })
    

Const defaultPlayerOptions

defaultPlayerOptions: Required<PlayerOptions> = ...

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

Const VERSION

VERSION: string = ...

Current Banuba WebAR SDK version in use