实时音视频
有奖捉虫：行业应用 & 管理与支持文档专题 HOT
文档中心 > 实时音视频 > 多人会议（含 UI） > 客户端 API（TUIRoomKit） > Web > RoomKit API

RoomKit API

最近更新时间：2024-04-23 16:56:22

我的收藏

本页目录：

API 简介

TUIRoomKit API 是多人会议组件的含 UI 接口，使用 TUIRoomKit API，您可以通过简单接口快速实现一个类会议场景，更详细的接入步骤，详见：快速接入 TUIRoomKit。

API 概览

<ConferenceMainView />: TUIRoomkit UI 组件主体。
Conference：依赖ConferenceMainView 提供的 API。
API
描述
获取 roomEngine 实例。如果 roomEngine 不存在，则返回 null。
on
监听指定类型的事件。当事件发生时，将调用回调函数。
off
取消监听指定类型的事件。
login
登录会议系统。
logout
登出会议系统。
start
开始一个新的会议。
join
加入一个已经存在的会议。
leave
离开当前会议。
dismiss
解散当前会议。
设置自己的用户信息。
设置界面语言。
setTheme
设置界面主题。
禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。
禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。
隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 FeatureButton 枚举值后，相应的按钮将从用户界面中隐藏。

ConferenceMainView 属性介绍

属性概览

属性
描述
类型
是否必填
默认值
displayMode
组件显示模式控制
- permanent：常驻模式。组件始终显示，内部不控制组件的显示与隐藏，若业务端不进行控制，则组件一直保持显示状态。
- wake-up：唤醒模式。组件需通过调用 conference start/join接口并正式加入会议后才被激活，之前不会显示。
'permanent' | 'wake-up'
否
permanent

示例代码

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 可参考文档开通服务部分，https://write.woa.com/document/139678220708134912#d9d2b8d1-f19f-441b-a436-457748c94997
      sdkAppId: 0,
      // 用户在您业务中的唯一标示 Id
      userId: '',
      // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 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 可参考文档开通服务部分，https://write.woa.com/document/139678220708134912#d9d2b8d1-f19f-441b-a436-457748c94997
      sdkAppId: 0,
      // 用户在您业务中的唯一标示 Id
      userId: '',
      // 本地开发调试可在 https://console.cloud.tencent.com/trtc/usersigtool 页面快速生成 userSig, 注意 userSig 与 userId 为一一对应关系
      userSig: '',
    });
    await conference.start('123456', {
      isSeatEnable: false,
      isOpenCamera: true,
      isOpenMicrophone: true,
    });
  },
};
</script>

Conference API 详情

Conference 提供了一系列用于管理和控制在线会议功能的方法。通过实现这个接口，开发者可以方便地在他们的应用中集成在线会议的功能。

getRoomEngine

获取 roomEngine 实例。如果 roomEngine 不存在，则返回 null。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
const roomEngine = conference.getRoomEngine();
Returns：TUIRoomEngine | null

on

监听指定类型的事件。当事件发生时，将调用回调函数。
参数：
参数
类型
默认值
含义
eventType
RoomEvent
-
要监听的事件类型
callback
() => void
-
事件发生时调用的回调函数
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @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

取消监听指定类型的事件。
参数：
参数
类型
默认值
含义
eventType
RoomEvent
-
要取消监听的事件类型
callback
() => void
-
之前添加的回调函数
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.off('event', callback);
Returns：void

login

登录会议系统。
参数：
参数
类型
默认值
含义
params
{sdkAppId: number; userId: string; userSig: string; tim?: ChatSDK}
-
登录参数对象
sdkAppId
number
-
在 实时音视频控制台单击 应用管理 > 创建应用，创建新应用之后，即可在 应用信息 中获取 sdkAppId 信息。
userId
string
-
用户ID建议限制长度为32字节，只允许包含大小写英文字母(a-zA-Z)、数字(0-9)及下划线和连词符。
userSig
string
-
userSig 签名 计算 userSig 的方式请参考 UserSig 相关。
tim
ChatSDK (可选)
-
若您在接入 roomEngine 的同时想使用即时通信 SDK 的更多能力，您可以将创建的 tim 实例传入 TUIRoomEngine。tim 实例的创建方式请参考 TIM.create 。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.login({
  sdkAppId: 123456,
  userId: 'testUser',
  userSig: 'testSig'
});
Returns：Promise<void>

logout

登出会议系统。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.logout();
Returns：Promise<void>

start

开始一个新的会议。
参数：
参数
类型
默认值
含义
roomId
string
-
会议房间 ID
params
-
开始会议的参数
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @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

加入一个已经存在的会议。
参数：
参数
类型
默认值
含义
roomId
string
-
会议房间 ID
params
-
加入会议的参数
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.join('123456', {
  isOpenCamera: false,
  isOpenMicrophone: false,
});
Returns：Promise<void>

leave

离开当前会议。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.leave();
Returns：Promise<void>

dismiss

解散当前会议。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.dismiss();
Returns：Promise<void>

setSelfInfo

设置自己的用户信息。
参数：
参数
类型
默认值
含义
options
{userName: string; avatarUrl: string}
-
用户信息对象
userName
string（可选）
-
用户昵称
avatarUrl
string（可选）
-
用户头像
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @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

设置界面语言。
参数：
参数
类型
默认值
含义
language
'zh-CN' | 'en-US'
-
语言类型
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.setLanguage('en-US');
Returns：void

setTheme

设置界面主题。
参数：
参数
类型
默认值
含义
theme
'LIGHT' | 'DARK'
-
主题类型
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.setTheme('DARK');
Returns：void

disableTextMessaging

禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.disableTextMessaging();
Returns：void

disableScreenSharing

禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.disableScreenSharing();
Returns：void

hideFeatureButton

隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 FeatureButton 枚举值后，相应的按钮将从用户界面中隐藏。
参数：
参数
类型
默认值
含义
name
-
需要隐藏的按钮名称
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference, FeatureButton } from '@tencentcloud/roomkit-web-vue3';
conference.hideFeatureButton(FeatureButton.SwitchTheme);
Returns：void

类型定义

RoomEvent（枚举值）

参数
类型
描述
ROOM_START
string
创建会议
ROOM_JOIN
string
加入会议
ROOM_LEAVE
string
离开会议
ROOM_DISMISS
string
会议解散
KICKED_OFFLINE
string
用户被踢下线
KICKED_OUT
string
用户被踢出会议
USER_LOGOUT
string
用户登出
ROOM_ERROR
string
会议错误

FeatureButton（枚举值）

参数
类型
描述
SwitchTheme
string
切换主题功能按钮
SwitchLayout
string
切换布局功能按钮
SwitchLanguage
string
切换语言功能按钮
FullScreen
string
全屏功能按钮
Invitation
string
邀请功能按钮

StartParams

参数
类型
描述
默认值
roomName
string（可选）
房间名称
-
isSeatEnabled
boolean（可选）
是否启用席位
false
isOpenCamera
boolean（可选）
是否开启摄像头
false
isOpenMicrophone
boolean（可选）
是否开启麦克风
false
defaultCameraId
string（可选）
默认摄像头ID
-
defaultMicrophoneId
string（可选）
默认麦克风ID
-
defaultSpeakerId
string（可选）
默认扬声器ID
-

JoinParams

参数
类型
描述
默认值
isOpenCamera
boolean（可选）
是否开启摄像头
false
isOpenMicrophone
boolean（可选）
是否开启麦克风
false
defaultCameraId
string（可选）
默认摄像头ID
-
defaultMicrophoneId
string（可选）
默认麦克风ID
-
defaultSpeakerId
string（可选）
默认扬声器ID
-
中国站