Zoom VideoSDK UI Toolkit
    Preparing search index...

    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;
        off(event: string, callback: (payload: any) => void): void;
        offSessionClosed(callback: () => void): void;
        offSessionJoined(callback: () => void): void;
        offViewTypeChange(callback: () => 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 };
    }
    Index

    Customize Layout

    closePreview hideAllComponents hideChatComponent hideControlsComponent hideSettingsComponent hideUitoolkitComponents hideUsersComponent hideVideoComponent openPreview showChatComponent showControlsComponent showSettingsComponent showUitoolkitComponents showUsersComponent showVideoComponent

    Events

    off offSessionClosed offSessionJoined offViewTypeChange on onSessionClosed onSessionDestroyed onSessionJoined onViewTypeChange

    Other

    changeViewType closeSession destroy getAllUser getClient getCurrentUserInfo getSessionInfo isSupportCustomLayout joinSession leaveSession version

    statistic

    subscribeAudioStatisticData subscribeShareStatisticData subscribeVideoStatisticData unsubscribeAudioStatisticData unsubscribeShareStatisticData unsubscribeVideoStatisticData

    Customize Layout

    • Closes an active video preview.

      Parameters

      • container: HTMLElement

        DOM element containing the preview

      Returns void

    • Hides all UI toolkit components.

      Returns void

    • Hides the chat component.

      Parameters

      • container: HTMLElement

        DOM element containing chat.

      Returns void

    • Hides the session controls component.

      Parameters

      • container: HTMLElement

        DOM element containing controls.

      Returns void

    • Hides the settings panel component.

      Parameters

      • container: HTMLElement

        DOM element containing settings.

      Returns void

    • Parameters

      • container: any

        DOM element to hide components.

      Returns void

    • Hides the participants list component.

      Parameters

      • container: HTMLElement

        DOM element containing the users list.

      Returns void

    • Hides the video component.

      Parameters

      • container: HTMLElement

        DOM element containing video.

      Returns 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

    • 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

    • 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

    • 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

    • Parameters

      • container: any

        DOM element to show components.

      • config: any

        Session configuration options.

      Returns 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

    • Shows the video component.

      Parameters

      • container: HTMLElement

        DOM element to show video.

      Returns void

    Events

    • Removes a previously registered session close callback.

      Parameters

      • callback: () => void

        Function to remove from event listeners.

      Returns void

    • Removes a previously registered session join callback.

      Parameters

      • callback: () => void

        Function to remove from event listeners.

      Returns void

    • Removes a view type change event listener.

      Parameters

      • callback: () => void

        The callback function to be called when the view type changes.

      Returns 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

    • 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

    • 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

    • 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

    Other

    • Closes the current video session.

      Parameters

      • Optionalcontainer: HTMLElement

        DOM element containing the session

      Returns void

    • Destroys the UI toolkit instance and cleans up resources.

      Returns void

      void

    • Check if the device is supported for custom layout. Only desktop and tablet are supported, mobile is not supported.

      Returns boolean

      boolean

    • 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

    • Leaves the session

      Returns void

    • 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 }

    statistic

    Settings

    Member Visibility

    On This Page

    Customize Layout
    Events
    Other
    statistic