RoomKit インターフェース
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. | |
Listen to specified types of apid Integration with TUIRoomKit
.Event. When the event occurs, the callback function will be called. | |
Cancel listening for events of a specified type. | |
Log in to the conference system. | |
Log out of the meeting system. | |
Start a new meeting. | |
Join an existing meeting. | |
Leave the current meeting. | |
Dismiss the current meeting. | |
Set your user information. | |
Set the interface language. | |
Set the interface topic. | |
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
<template><ConferenceMainView display-mode="permanent"></ConferenceMainView></template><script setup>import { ConferenceMainView, conference } from '@tencentcloud/roomkit-electron-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-electron-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-electron-vue2.7import { conference, TUIRoomEngine } from '@tencentcloud/roomkit-electron-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 | - | 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-electron-vue2.7import { conference, RoomEvent } from '@tencentcloud/roomkit-electron-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 | - | 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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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 | - | |
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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-vue3';conference.setTheme('DARK');
Returns:void
enableWatermark
// Note the package name. If you are using the vue2 version, please change the package name to @tencentcloud/roomkit-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference } from '@tencentcloud/roomkit-electron-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-electron-vue2.7import { conference, FeatureButton } from '@tencentcloud/roomkit-electron-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 | - |