实时音视频 Web-多人会议（含 UI）-文档中心-腾讯云

API 简介
TUIRoomKit API 是多人会议组件的含 UI 接口，使用 TUIRoomKit API，您可以通过简单接口快速实现一个类会议场景，更详细的接入步骤，详见：快速接入 TUIRoomKit。
说明：
如果您有自己的 UI 设计，想结合 RoomKit 业务自行开发，我们同时提供有灵活性更好，功能更全面的 RTC Room Engine SDK，您可以通过查看我们的 RTC Room Engine SDK API 文档，了解更多功能。
API 概览
<ConferenceMainView />:  TUIRoomkit UI 组件主体。
Conference：依赖ConferenceMainView 提供的 API。
API
描述
﻿getRoomEngine﻿
获取 roomEngine 实例。如果 roomEngine 不存在，则返回 null。
﻿on﻿
监听指定类型的事件。当事件发生时，将调用回调函数。
﻿off﻿
取消监听指定类型的事件。
﻿login﻿
登录会议系统。
﻿logout﻿
登出会议系统。
﻿start﻿
开始一个新的会议。
﻿join﻿
加入一个已经存在的会议。
﻿leave﻿
离开当前会议。
﻿dismiss﻿
解散当前会议。
﻿setSelfInfo﻿
设置自己的用户信息。
﻿setLanguage﻿
设置界面语言。
﻿setTheme﻿
设置界面主题。
﻿enableWatermark﻿
开启应用程序中的文字水印功能。具体详见：文字水印。
﻿enableVirtualBackground﻿
开启应用程序的虚拟背景功能。调用此函数后，将在 UI 上显示虚拟背景功能按钮。具体内容详见：虚拟背景。
﻿disableTextMessaging﻿
禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。
﻿disableScreenSharing﻿
禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。
﻿hideFeatureButton﻿
隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 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, TUIRoomEngine } from '@tencentcloud/roomkit-web-vue3';
TUIRoomEngine.once('ready', () => {
    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
﻿StartParams﻿
-
开始会议的参数
// 注意包的名称，如果您使用 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
﻿JoinParams﻿
-
加入会议的参数
// 注意包的名称，如果您使用 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',
  avatarUrl: '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
enableWatermark
开启应用程序中的文本消息功能。具体详见：文字水印。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.enableWatermark();
Returns：void
enableVirtualBackground
开启应用程序的虚拟背景功能。调用此函数后，将在 UI 上显示虚拟背景功能按钮。具体内容详见：虚拟背景。
// 注意包的名称，如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7
import { conference } from '@tencentcloud/roomkit-web-vue3';
conference.enableVirtualBackground();
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
﻿FeatureButton﻿
-
需要隐藏的按钮名称
// 注意包的名称，如果您使用 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
会议错误
ROOM_NEED_PASSWORD
string
入会密码
FeatureButton（枚举值）
参数
类型
描述
SwitchTheme
string
切换主题功能按钮
SwitchLayout
string
切换布局功能按钮
SwitchLanguage
string
切换语言功能按钮
FullScreen
string
全屏功能按钮
Invitation
string
邀请功能按钮
BasicBeauty
string
基础美颜功能按钮
StartParams
参数
类型
描述
默认值
roomName
string（可选）
房间名称
-
isSeatEnabled
boolean（可选）
是否启用席位
false
isOpenCamera
boolean（可选）
是否开启摄像头
false
isOpenMicrophone
boolean（可选）
是否开启麦克风
false
defaultCameraId
string（可选）
默认摄像头ID
-
defaultMicrophoneId
string（可选）
默认麦克风ID
-
defaultSpeakerId
string（可选）
默认扬声器ID
-
password
string（可选）
入会密码
-
JoinParams
参数
类型
描述
默认值
isOpenCamera
boolean（可选）
是否开启摄像头
false
isOpenMicrophone
boolean（可选）
是否开启麦克风
false
defaultCameraId
string（可选）
默认摄像头ID
-
defaultMicrophoneId
string（可选）
默认麦克风ID
-
defaultSpeakerId
string（可选）
默认扬声器ID
-
password
string（可选）
入会密码
-

API	描述
getRoomEngine	获取 roomEngine 实例。如果 roomEngine 不存在，则返回 null。
on	监听指定类型的事件。当事件发生时，将调用回调函数。
off	取消监听指定类型的事件。
login	登录会议系统。
logout	登出会议系统。
start	开始一个新的会议。
join	加入一个已经存在的会议。
leave	离开当前会议。
dismiss	解散当前会议。
setSelfInfo	设置自己的用户信息。
setLanguage	设置界面语言。
setTheme	设置界面主题。
enableWatermark	开启应用程序中的文字水印功能。具体详见：文字水印。
enableVirtualBackground	开启应用程序的虚拟背景功能。调用此函数后，将在 UI 上显示虚拟背景功能按钮。具体内容详见：虚拟背景。
disableTextMessaging	禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。
disableScreenSharing	禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。
hideFeatureButton	隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 FeatureButton 枚举值后，相应的按钮将从用户界面中隐藏。

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

参数	类型	默认值	含义
eventType	RoomEvent	-	要监听的事件类型
callback	() => void	-	事件发生时调用的回调函数

Web

本页目录：

API 简介

API 概览

ConferenceMainView 属性介绍

属性概览

示例代码

Conference API 详情

getRoomEngine

on

off

login

logout

start

join

leave

dismiss

setSelfInfo

setLanguage

setTheme

enableWatermark

enableVirtualBackground

disableTextMessaging

disableScreenSharing

hideFeatureButton

类型定义

RoomEvent（枚举值）

FeatureButton（枚举值）

StartParams

JoinParams