please select
Conference
  • Overview
  • Web
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • On-Cloud Recording
    • AI Noise Suppression
    • Robot Streaming
    • Virtual Background
    • More Features
      • Floating Window
      • Text Watermark
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine Defines
    • FAQs
  • iOS
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • On-Cloud Recording
    • AI Noise Suppression
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Android
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • On-Cloud Recording
    • AI Noise Suppression
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Electron
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • On-Cloud Recording
    • AI Noise Suppression
    • Robot Streaming
    • More Features
      • Floating Window
      • Text Watermark
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine Defines
    • FAQs
  • Flutter
    • Run Sample Demo
    • Integration
    • UI Customization
    • Conference Control
    • In-Conference Chat
    • On-Cloud Recording
    • AI Noise Suppression
    • Robot Streaming
    • More Features
      • Floating Window
    • API Documentation
      • RoomKit API
      • RoomEngine API
        • API Overview
        • TUIRoomEngine
        • TUIRoomObserver
        • Type Definition
    • FAQs
  • Overview
    • Overview
  • Activate the Service
  • Pricing
    • Free Minutes
    • Conference Monthly Packages
    • Billing Explanation for Subscription Package Duration
    • Pay-as-you-go
      • Billing of Audio and Video Duration
      • Billing of On-Cloud Recording and Recording Delivery
      • Billing of MixTranscoding and Relay to CDN
  • Server APIs
    • REST API
      • RESTful API Overview
      • RESTful API List
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • User Management
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • Error Code
Conference
Docs Overview/
Conference/
Electron/
API Documentation/
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 messaging feature in the application. For details, see: Text Watermark.
Disable the screen sharing feature in the application. After invoking this function, users will not be able to share their screen with others.
Disable the text messaging feature in the application. After invoking this function, users will not be able to send or receive text messages.
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

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

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
-