tencent cloud

PrevNext

Feedback

search by keyword

Recent Pages

Documentation
Tencent Real-Time Communication
    Documentation
    Download PDF

    TUIRoomKit

    Last updated: 2024-04-29 17:21:12
    Download PDF

      API Introduction

      The TUIRoomKit API is a multi-person meeting component with an Including UI Interface. By using the TUIRoomKit API, you can quickly implement a meeting-like scenario through a simple interface. For more detailed integration steps, see: Rapid Integration with TUIRoomKit.

      API Overview

      <ConferenceMainView />: The component body of TUIRoomkit UI.
      Conference: dependencies ConferenceMainView provided API.
      API
      Description
      Access the roomEngine instance. If roomEngine does not exist, it will return null.
      on
      Listen to specified types of apid Integration with TUIRoomKit .Event. When the event occurs, the callback function will be called.
      off
      Cancel listening for events of a specified type.
      login
      Log in to the conference system.
      logout
      Log out of the meeting system.
      start
      Start a new meeting.
      join
      Join an existing meeting.
      leave
      Leave the current meeting.
      dismiss
      Dismiss the current meeting.
      Set your user information.
      Set the interface language.
      setTheme
      Set the interface topic.
      Disable the text messaging feature in the application. After invoking this function, users will not be able to send or receive text messages.
      Disable the screen sharing feature in the application. After invoking this function, users will not be able to share their screen with others.
      Hide specific feature buttons in the application. By invoking this function and passing in the appropriate FeatureButton enumerated values, the corresponding buttons will be hidden from the user interface.

      Introduction to ConferenceMainView attributes

      Attribute Overview

      Attribute
      Description
      Type
      Required
      Default Value
      displayMode
      Control of component display pattern
      permanent: Permanent mode. The component is always displayed; internal control of the component's visibility is not exerted. If not controlled by the business end, the component will always remain visible.
      wake-up: Wake-up mode. The component is activated only after calling the conference start/join interface and officially joining the conference; it will not be displayed beforehand.
      'permanent' | 'wake-up'
      No
      permanent

      Sample code

      Vue3
      Vue2
      <template>
        <ConferenceMainView display-mode="permanent"></ConferenceMainView>
      </template>
      <script setup>
      import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue3';
      const init = async () => {
          await conference.login({    
            sdkAppId: 0,
            userId: '',
            userSig: '', 
          });
          await conference.start('123456', {
            isSeatEnable: false,
            isOpenCamera: true,
            isOpenMicrophone: true,
          });
      }
      init();
      </script>
      <template>
        <ConferenceMainView display-mode="permanent"></ConferenceMainView>
      </template>
      <script>
      import { ConferenceMainView, conference } from '@tencentcloud/roomkit-web-vue2.7';
      export default {
        components: {
          ConferenceMainView,
        },
        async created() {
          await conference.login({
            sdkAppId: 0,
            userId: '',
            userSig: '',
          });
          await conference.start('123456', {
            isSeatEnable: false,
            isOpenCamera: true,
            isOpenMicrophone: true,
          });
        },
      };
      </script>

      Conference API Details

      Conference provides a series of methods for managing and controlling online meeting features. By implementing this interface, developers can easily integrate online meeting features into their applications.

      getRoomEngine

      Access the roomEngine instance. If roomEngine does not exist, it will return null.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      const roomEngine = conference.getRoomEngine();
      Returns:TUIRoomEngine | null

      on

      Listen for a specified type of event. When the event occurs, the callback function will be called.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      eventType
      RoomEvent
      -
      Event Type to Listen For
      callback
      () => void
      -
      Callback Function Called When the Event Occurs
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference, RoomEvent } from '@tencentcloud/roomkit-web-vue3';
      conference.on(RoomEvent.RoomStart, () => {
        console.log('[conference] The meeting has already started.')
      });
      conference.on(RoomEvent.ROOM_DISMISS, () => {
        console.log('[conference] The meeting has been dismissed')
      });
      Returns:void

      off

      Cancel listening for events of a specified type.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      eventType
      RoomEvent
      -
      The type of event to cancel listening for
      callback
      () => void
      -
      The callback function added previously
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.off('event', callback);
      Returns:void

      login

      Log in to the conference system.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      params
      {sdkAppId: number; userId: string; userSig: string; tim?: ChatSDK}
      -
      Log in to the parameter object
      sdkAppId
      number
      -
      In the Real-time Audio and Video Console click Application Management > create an application. After creating a new application, you can access the sdkAppId information in Application Information.
      userId
      string
      -
      It's advised to limit the User ID length to 32 bytes, allowing only uppercase and lowercase letters (a-zA-Z), digits (0-9), underscores, and hyphens.
      userSig
      string
      -
      userSig Signature For the method of calculating userSig, please refer to UserSig Related.
      tim
      ChatSDK (optional)
      -
      If you want to leverage more capabilities of the Instant Messaging SDK while integrating roomEngine, you can pass the created tim instance into TUIRoomEngine. For how to create a tim instance, please refer to TIM.create.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.login({
        sdkAppId: 123456,
        userId: 'testUser',
        userSig: 'testSig'
      });
      Returns:Promise<void>

      logout

      Log out of the meeting system.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.logout();
      Returns:Promise<void>

      start

      Start a new meeting.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      roomId
      string
      -
      Meeting Room ID
      params
      -
      Parameters for starting a meeting
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.start('123456', {
        roomName: 'TestRoom',
        isSeatEnabled: false,
        isOpenCamera: false,
        isOpenMicrophone: false,
      });
      Returns:Promise<void>

      join

      Join an existing meeting.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      roomId
      string
      -
      Meeting Room ID
      params
      -
      Parameters for joining the meeting
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.join('123456', {
        isOpenCamera: false,
        isOpenMicrophone: false,
      });
      Returns:Promise<void>

      leave

      Leave the current meeting.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.leave();
      Returns:Promise<void>

      dismiss

      Dismiss the current meeting.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.dismiss();
      Returns:Promise<void>

      setSelfInfo

      Set your user information.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      options
      {userName: string; avatarUrl: string}
      -
      User information object
      userName
      string (Optional)
      -
      User's nickname
      avatarUrl
      string (Optional)
      -
      User profile photo
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.setSelfInfo({
        userName: 'test-name',
        avatarUlr: 'https://avatar.png'
      });
      Returns:Promise<void>

      setLanguage

      Set the interface language.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      language
      'zh-CN' | 'en-US'
      -
      Language
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.setLanguage('en-US');
      Returns:void

      setTheme

      Set the interface topic.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      theme
      'LIGHT' | 'DARK'
      -
      Topic Type
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.setTheme('DARK');
      Returns:void

      disableTextMessaging

      Disable the text messaging feature in the application. After invoking this function, users will not be able to send or receive text messages.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.disableTextMessaging();
      Returns:void

      disableScreenSharing

      Disable the screen sharing feature in the application. After invoking this function, users will not be able to share their screen with others.
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference } from '@tencentcloud/roomkit-web-vue3';
      conference.disableScreenSharing();
      Returns:void

      hideFeatureButton

      Hide specific feature buttons in the application. By invoking this function and passing in the appropriate FeatureButton enumerated values, the corresponding buttons will be hidden from the user interface.
      The parameters are described as follows:
      Parameter
      Type
      Default Value
      Meaning
      name
      -
      Names of Buttons to be Hidden
      // Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-web-vue2.7
      import { conference, FeatureButton } from '@tencentcloud/roomkit-web-vue3';
      conference.hideFeatureButton(FeatureButton.SwitchTheme);
      Returns:void

      Type Definition

      RoomEvent (enumeration)

      Parameter
      Type
      Description
      ROOM_START
      string
      Creating a Meeting
      ROOM_JOIN
      string
      Joining a Meeting
      ROOM_LEAVE
      string
      Leave Meeting
      ROOM_DISMISS
      string
      Meeting Dismissed
      KICKED_OFFLINE
      string
      User kicked offline
      KICKED_OUT
      string
      Participant removed from meeting
      USER_LOGOUT
      string
      User logged out
      ROOM_ERROR
      string
      Meeting error

      FeatureButton (enumerated values)

      Parameter
      Type
      Description
      SwitchTheme
      string
      Switch Topic Feature Button
      SwitchLayout
      string
      Switch Layout Feature Button
      SwitchLanguage
      string
      Switch Language Feature Button
      FullScreen
      string
      Fullscreen Feature Button
      Invitation
      string
      Invite Feature Button

      StartParams

      Parameter
      Type
      Description
      Default Value
      roomName
      string (Optional)
      Room Name
      -
      isSeatEnabled
      boolean (optional)
      Enable Seats
      false
      isOpenCamera
      boolean (optional)
      Whether to enable the camera
      false
      isOpenMicrophone
      boolean (optional)
      Whether to enable the microphone
      false
      defaultCameraId
      string (Optional)
      Default Camera ID
      -
      defaultMicrophoneId
      string (Optional)
      Default Microphone ID
      -
      defaultSpeakerId
      string (Optional)
      Default Speaker ID
      -

      JoinParams

      Parameter
      Type
      Description
      Default Value
      isOpenCamera
      boolean (optional)
      Whether to enable the camera
      false
      isOpenMicrophone
      boolean (optional)
      Whether to enable the microphone
      false
      defaultCameraId
      string (Optional)
      Default Camera ID
      -
      defaultMicrophoneId
      string (Optional)
      Default Microphone ID
      -
      defaultSpeakerId
      string (Optional)
      Default Speaker ID
      -
      
      Contact Us

      Contact our sales team or business advisors to help your business.

      Contact Us
      Technical Support

      Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

      Submit a Ticket
      7x24 Phone Support
      Copyright © 2013-2024 Tencent Cloud. All Rights Reserved.
      Privacy PolicyLegalCookie Policy