Interface UIToolkit

Zoom Video SDK UI Toolkit API Provides methods for managing video sessions and UI components

interface UIToolkit {
    changeViewType(viewType: SuspensionViewValue): void;
    closePreview(container: HTMLElement): void;
    closeSession(container?: HTMLElement): void;
    destroy(): void;
    getAllUser(): Participant[];
    getClient(): any;
    getCurrentUserInfo(): Participant;
    getSessionInfo(): SessionInfo;
    hideAllComponents(): void;
    hideChatComponent(container: HTMLElement): void;
    hideControlsComponent(container: HTMLElement): void;
    hideSettingsComponent(container: HTMLElement): void;
    hideUitoolkitComponents(container: any): void;
    hideUsersComponent(container: HTMLElement): void;
    hideVideoComponent(container: HTMLElement): void;
    isSupportCustomLayout(): boolean;
    joinSession(container: HTMLElement, config: CustomizationOptions): void;
    leaveSession(): void;
    mirrorVideo(mirrored: boolean): Promise<void>;
    off(event: VideoClientEvent, callback: (payload: any) => void): void;
    off(event: string, callback: (payload: any) => void): void;
    offSessionClosed(callback: () => void): void;
    offSessionDestroyed(callback: () => void): void;
    offSessionJoined(callback: () => void): void;
    offViewTypeChange(callback: () => void): void;
    on(event: VideoClientEvent, callback: (payload: any) => void): void;
    on(event: string, callback: (payload: any) => void): void;
    onSessionClosed(callback: () => void): void;
    onSessionDestroyed(callback: () => void): void;
    onSessionJoined(callback: () => void): void;
    onViewTypeChange(callback: (event: SuspensionViewValue) => void): void;
    openPreview(
        container: HTMLElement,
        config: CustomizationOptions,
        options: { onClickJoin: () => void },
    ): void;
    showChatComponent(
        container: HTMLElement,
        options?: { draggable?: boolean; height?: number; width?: number },
    ): void;
    showControlsComponent(
        container: HTMLElement,
        options?: { draggable?: boolean; orientation?: "vertical" | "horizontal" },
    ): void;
    showSettingsComponent(
        container: HTMLElement,
        options?: { draggable?: boolean; height?: number; width?: number },
    ): void;
    showUitoolkitComponents(container: any, config: any): void;
    showUsersComponent(
        container: HTMLElement,
        options?: { draggable?: boolean; height?: number; width?: number },
    ): void;
    showVideoComponent(container: HTMLElement): void;
    subscribeAudioStatisticData(type?: StatisticOption): ExecutedResult;
    subscribeShareStatisticData(type?: StatisticOption): ExecutedResult;
    subscribeVideoStatisticData(type?: VideoStatisticOption): ExecutedResult;
    unsubscribeAudioStatisticData(type?: StatisticOption): ExecutedResult;
    unsubscribeShareStatisticData(type?: StatisticOption): ExecutedResult;
    unsubscribeVideoStatisticData(type?: VideoStatisticOption): ExecutedResult;
    version(): { tailwindcss: string; uikit: string; videosdk: string };
}

Customize Layout

closePreview

closePreview(container: HTMLElement): void
Closes an active video preview.
Parameters
- container: HTMLElement
  DOM element containing the preview
Returns void
- Defined in index.d.ts:699

hideAllComponents

hideAllComponents(): void
Hides all UI toolkit components.

Returns void
- Defined in index.d.ts:925

hideChatComponent

hideChatComponent(container: HTMLElement): void
Hides the chat component.
Parameters
- container: HTMLElement
  DOM element containing chat.
Returns void
- Defined in index.d.ts:941

hideControlsComponent

hideControlsComponent(container: HTMLElement): void
Hides the session controls component.
Parameters
- container: HTMLElement
  DOM element containing controls.
Returns void
- Defined in index.d.ts:961

hideSettingsComponent

hideSettingsComponent(container: HTMLElement): void
Hides the settings panel component.
Parameters
- container: HTMLElement
  DOM element containing settings.
Returns void
- Defined in index.d.ts:998

hideUitoolkitComponents

hideUitoolkitComponents(container: any): void
Parameters
- container: any
  DOM element to hide components.
Returns void
Deprecated
- Defined in index.d.ts:903

hideUsersComponent

hideUsersComponent(container: HTMLElement): void
Hides the participants list component.
Parameters
- container: HTMLElement
  DOM element containing the users list.
Returns void
- Defined in index.d.ts:978

hideVideoComponent

hideVideoComponent(container: HTMLElement): void
Hides the video component.
Parameters
- container: HTMLElement
  DOM element containing video.
Returns void
Deprecated
- Defined in index.d.ts:919

openPreview

openPreview(
    container: HTMLElement,
    config: CustomizationOptions,
    options: { onClickJoin: () => void },
): void
Opens the video preview in a specified container. Use this before joining a session to test video settings.
Parameters
- container: HTMLElement
  DOM element to render the preview
- config: CustomizationOptions
  Session configuration options
- options: { onClickJoin: () => void }
  Preview options
Returns void
- Defined in index.d.ts:692

showChatComponent

showChatComponent(
container: HTMLElement,
options?: { draggable?: boolean; height?: number; width?: number },
): void
Shows the chat component.
Parameters
- container: HTMLElement
  DOM element to show chat.
- Optionaloptions: { draggable?: boolean; height?: number; width?: number }
  Options for the chat component.
Returns void
- Defined in index.d.ts:934

showControlsComponent

showControlsComponent(
container: HTMLElement,
options?: { draggable?: boolean; orientation?: "vertical" | "horizontal" },
): void
Shows the session controls component.
Parameters
- container: HTMLElement
  DOM element to show controls.
- Optionaloptions: { draggable?: boolean; orientation?: "vertical" | "horizontal" }
  Options for the controls component.
Returns void
- Defined in index.d.ts:950

showSettingsComponent

showSettingsComponent(
container: HTMLElement,
options?: { draggable?: boolean; height?: number; width?: number },
): void
Shows the settings panel component.
Parameters
- container: HTMLElement
  DOM element to show settings.
- Optionaloptions: { draggable?: boolean; height?: number; width?: number }
  Options for the settings component.
Returns void
- Defined in index.d.ts:987

showUitoolkitComponents

showUitoolkitComponents(container: any, config: any): void
Parameters
- container: any
  DOM element to show components.
- config: any
  Session configuration options.
Returns void
Deprecated
- Defined in index.d.ts:896

showUsersComponent

showUsersComponent(
container: HTMLElement,
options?: { draggable?: boolean; height?: number; width?: number },
): void
Shows the participants list component.
Parameters
- container: HTMLElement
  DOM element to show users list.
- Optionaloptions: { draggable?: boolean; height?: number; width?: number }
  Options for the users component.
Returns void
- Defined in index.d.ts:970

showVideoComponent

showVideoComponent(container: HTMLElement): void
Shows the video component.
Parameters
- container: HTMLElement
  DOM element to show video.
Returns void
Deprecated
- Defined in index.d.ts:911

Events

off

off(event: VideoClientEvent, callback: (payload: any) => void): void
Removes a previously registered event listener.
Parameters
- event: VideoClientEvent
  The event name to remove the listener from https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#off
- callback: (payload: any) => void
  The callback function to remove from event listeners.
Returns void
- Defined in index.d.ts:804
off(event: string, callback: (payload: any) => void): void
Parameters
- event: string
- callback: (payload: any) => void
Returns void
- Defined in index.d.ts:805

offSessionClosed

offSessionClosed(callback: () => void): void
Removes a previously registered session close callback.
Parameters
- callback: () => void
  Function to remove from event listeners.
Returns void
- Defined in index.d.ts:757

offSessionDestroyed

offSessionDestroyed(callback: () => void): void
Removes a previously registered session destroy callback.
Parameters
- callback: () => void
  Function to remove from event listeners.
Returns void
- Defined in index.d.ts:771

offSessionJoined

offSessionJoined(callback: () => void): void
Removes a previously registered session join callback.
Parameters
- callback: () => void
  Function to remove from event listeners.
Returns void
- Defined in index.d.ts:740

offViewTypeChange

offViewTypeChange(callback: () => void): void
Removes a view type change event listener.
Parameters
- callback: () => void
  The callback function to be called when the view type changes.
Returns void
- Defined in index.d.ts:785

on

on(event: VideoClientEvent, callback: (payload: any) => void): void
Registers a callback for a specific event.
Parameters
- event: VideoClientEvent
  The event name to listen for https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#on
- callback: (payload: any) => void
  The callback function to execute when the event occurs.
Returns void
- Defined in index.d.ts:794
on(event: string, callback: (payload: any) => void): void
Parameters
- event: string
- callback: (payload: any) => void
Returns void
- Defined in index.d.ts:795

onSessionClosed

onSessionClosed(callback: () => void): void
Registers a callback for session close events. The callback will be triggered when a session ends.
Parameters
- callback: () => void
  Function to execute on session close.
Returns void
- Defined in index.d.ts:749

onSessionDestroyed

onSessionDestroyed(callback: () => void): void
Registers a callback for when you can destroy uikit.
Parameters
- callback: () => void
  The callback will be triggered when all uikit components are destroyed.
Returns void
- Defined in index.d.ts:764

onSessionJoined

onSessionJoined(callback: () => void): void
Registers a callback for session join events. The callback will be triggered when successfully joining a session.
Parameters
- callback: () => void
  Function to execute on session join.
Returns void
- Defined in index.d.ts:732

onViewTypeChange

onViewTypeChange(callback: (event: SuspensionViewValue) => void): void
Adds a view type change event listener.
Parameters
- callback: (event: SuspensionViewValue) => void
  The callback function to be called when the view type changes.
Returns void
- Defined in index.d.ts:778

Other

changeViewType

changeViewType(viewType: SuspensionViewValue): void
Changes the view type
Parameters
- viewType: SuspensionViewValue
  The view type to change to.
Returns void
- Defined in index.d.ts:724

closeSession

closeSession(container?: HTMLElement): void
Closes the current video session.
Parameters
- Optionalcontainer: HTMLElement
  DOM element containing the session
Returns void
- Defined in index.d.ts:719

destroy

destroy(): void
Destroys the UI toolkit instance and cleans up resources.

Returns void
void
- Defined in index.d.ts:1025

getAllUser

getAllUser(): Participant[]
Get all user info

Returns Participant[]
Array https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#getAllUser
- Defined in index.d.ts:1005

getClient

getClient(): any
Get the client instance when debug mode is true

Returns any
videosdk client instance https://marketplacefront.zoom.us/sdk/custom/web/modules/ZoomVideo.VideoClient.html
- Defined in index.d.ts:1037

getCurrentUserInfo

getCurrentUserInfo(): Participant
Get the current user info

Returns Participant
Participant https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#getCurrentUserInfo
- Defined in index.d.ts:1012

getSessionInfo

getSessionInfo(): SessionInfo
Get the session info

Returns SessionInfo
SessionInfo https://marketplacefront.zoom.us/sdk/custom/web/modules/VideoClient.html#getSessionInfo
- Defined in index.d.ts:1019

isSupportCustomLayout

isSupportCustomLayout(): boolean
Check if the device is supported for custom layout. Only desktop and tablet are supported, mobile is not supported.

Returns boolean
boolean
- Defined in index.d.ts:888

joinSession

joinSession(container: HTMLElement, config: CustomizationOptions): void
Joins a Zoom video session with specified configuration.
Parameters
- container: HTMLElement
  DOM element to render the session UI
- config: CustomizationOptions
  Session configuration options
Returns void
- Defined in index.d.ts:707

leaveSession

leaveSession(): void
Leaves the session

Returns void
- Defined in index.d.ts:712

version

version(): { tailwindcss: string; uikit: string; videosdk: string }
Get the version of the UI toolkit, Video SDK and Tailwind CSS

Returns { tailwindcss: string; uikit: string; videosdk: string }
{ uikit: string, videosdk: string, tailwindcss: string }
- Defined in index.d.ts:1031

Video

mirrorVideo

mirrorVideo(mirrored: boolean): Promise<void>
Mirrors or unmirrors your self video. Pass true to mirror the local preview and false to restore normal orientation. This affects only your local view and does not impact how others see your video.
Parameters
- mirrored: boolean
  Whether to mirror the self video.
Returns Promise<void>
A promise that resolves when the operation completes.
- Defined in index.d.ts:815

statistic

subscribeAudioStatisticData

subscribeAudioStatisticData(type?: StatisticOption): ExecutedResult
Subscribes to audio statistic data based on the type parameter. https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#subscribeAudioStatisticData
Parameters
- Optionaltype: StatisticOption
  Optional. Object { encode: Boolean, decode: Boolean } can specify which type of audio to subscribe to.
Returns ExecutedResult
- '': Success.
- Error: Failure. Details in ErrorTypes.
- Defined in index.d.ts:826

subscribeShareStatisticData

subscribeShareStatisticData(type?: StatisticOption): ExecutedResult
Subscribes to share statistic data based on the type parameter. https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#subscribeShareStatisticData
Parameters
- Optionaltype: StatisticOption
  Optional. Object { encode: Boolean, decode: Boolean } can specify which type of share to subscribe to.
Returns ExecutedResult
- '': Success.
- Error: Failure. Details in ErrorTypes.
- Defined in index.d.ts:870

subscribeVideoStatisticData

subscribeVideoStatisticData(type?: VideoStatisticOption): ExecutedResult
Subscribes to video statistic data based on the type parameter. https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#subscribeVideoStatisticData
Parameters
- Optionaltype: VideoStatisticOption
  Optional. Object { encode: Boolean, decode: Boolean } can specify which type of audio should be subscribed to.
Returns ExecutedResult
- '': Success.
- Error: Failure. Details in ErrorTypes.
- Defined in index.d.ts:848

unsubscribeAudioStatisticData

unsubscribeAudioStatisticData(type?: StatisticOption): ExecutedResult
Unsubscribes to audio statistic data based on the type parameter. https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#unsubscribeAudioStatisticData
Parameters
- Optionaltype: StatisticOption
  Optional. Object { encode: Boolean, decode: Boolean } can specify which type of audio to unsubscribe to.
Returns ExecutedResult
- '': Success.
- Error: Failure. Details in ErrorTypes.
- Defined in index.d.ts:837

unsubscribeShareStatisticData

unsubscribeShareStatisticData(type?: StatisticOption): ExecutedResult
Unsubscribes to share statistic data based on the type parameter. https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#unsubscribeShareStatisticData
Parameters
- Optionaltype: StatisticOption
  Optional. Object { encode: Boolean, decode: Boolean } can specify which type of share to unsubscribe to.
Returns ExecutedResult
- '': Success.
- Error: Failure. Details in ErrorTypes.
- Defined in index.d.ts:881

unsubscribeVideoStatisticData

unsubscribeVideoStatisticData(type?: VideoStatisticOption): ExecutedResult
Unsubscribes to video statistic data based on the type parameter. https://marketplacefront.zoom.us/sdk/custom/web/modules/Stream.html#unsubscribeVideoStatisticData
Parameters
- Optionaltype: VideoStatisticOption
  Optional. Object { encode: Boolean, decode: Boolean } can specify which type of audio should be unsubscribed to.
Returns ExecutedResult
- '': Success.
- Error: Failure. Details in ErrorTypes.
- Defined in index.d.ts:859

Interface UIToolkit

Index

Customize Layout

Events

Other

Video

statistic

Customize Layout

closePreview

Parameters

Returns void

hideAllComponents

Returns void

hideChatComponent

Parameters

Returns void

hideControlsComponent

Parameters

Returns void

hideSettingsComponent

Parameters

Returns void

hideUitoolkitComponents

Parameters

Returns void

Deprecated

hideUsersComponent

Parameters

Returns void

hideVideoComponent

Parameters

Returns void

Deprecated

openPreview

Parameters

Returns void

showChatComponent

Parameters

Returns void

showControlsComponent

Parameters

Returns void

showSettingsComponent

Parameters

Returns void

showUitoolkitComponents

Parameters

Returns void

Deprecated

showUsersComponent

Parameters

Returns void

showVideoComponent

Parameters

Returns void

Deprecated

Events

off

Parameters

Returns void

Parameters

Returns void

offSessionClosed

Parameters

Returns void

offSessionDestroyed

Parameters

Returns void

offSessionJoined

Parameters

Returns void

offViewTypeChange

Parameters

Returns void

on

Parameters

Returns void

Parameters

Returns void

onSessionClosed