Docs Overview/
Conference/
Web/
Client APIs/
RoomKit API/

RoomKit API

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.
Enable the text watermark feature in the application. For details, see: Text Watermark.
Enable the virtual background feature in the application. After calling this function, a virtual background feature button will be displayed on the UI. For details, see: Virtual Background.
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, TUIRoomEngine } from '@tencentcloud/roomkit-web-vue3';
TUIRoomEngine.once('ready', () => {
    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

enableWatermark

Enable the text messaging feature in the application. For details, see: Text Watermark.
// 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.enableWatermark();
Returns：void

enableVirtualBackground

Enable the virtual background feature in the application. After calling this function, a virtual background feature button will be displayed on the UI. For details, see: Virtual Background.
// 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.enableVirtualBackground();
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
ROOM_NEED_PASSWORD
string
Meeting password

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
BasicBeauty
string
Basic Beauty 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
-
password
string (Optional)
Meeting password
-

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
-
password
string (Optional)
Meeting password
-