API 简介
TUIRoomKit API 是多人会议组件的含 UI 接口,使用 TUIRoomKit API,您可以通过简单接口快速实现一个类会议场景,更详细的接入步骤,详细参见:快速接入 TUIRoomKit。
API 概览
<ConferenceMainView />:
TUIRoomkit UI 组件主体。Conference:依赖
ConferenceMainView
提供的 API。API | 描述 |
获取 roomEngine 实例。如果 roomEngine 不存在,则返回 null。 | |
监听指定类型的事件。当事件发生时,将调用回调函数。 | |
取消监听指定类型的事件。 | |
登录会议系统。 | |
登出会议系统。 | |
开始一个新的会议。 | |
加入一个已经存在的会议。 | |
离开当前会议。 | |
解散当前会议。 | |
设置自己的用户信息。 | |
设置界面语言。 | |
设置界面主题。 | |
禁用应用程序中的文本消息功能。调用此函数后,用户将无法发送或接收文本消息。 | |
禁用应用程序中的屏幕共享功能。调用此函数后,用户将无法与他人共享屏幕。 | |
ConferenceMainView 属性介绍
属性概览
属性 | 描述 | 类型 | 是否必填 | 默认值 |
displayMode | 组件显示模式控制 permanent:常驻模式。组件始终显示,内部不控制组件的显示与隐藏,若业务端不进行控制,则组件一直保持显示状态。 wake-up:唤醒模式。组件需通过调用 conference start/join 接口并正式加入会议后才被激活,之前不会显示。 | 'permanent' | 'wake-up' | 否 | permanent |
示例代码
<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-457748c94997sdkAppId: 0,// 用户在您业务中的唯一标示 IduserId: '',// 本地开发调试可在 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-457748c94997sdkAppId: 0,// 用户在您业务中的唯一标示 IduserId: '',// 本地开发调试可在 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.7import { conference, TUIRoomEngine } from '@tencentcloud/roomkit-web-vue3';TUIRoomEngine.once('ready', () => {const roomEngine = conference.getRoomEngine();});
Returns:TUIRoomEngine | null
on
监听指定类型的事件。当事件发生时,将调用回调函数。
参数:
参数 | 类型 | 默认值 | 含义 |
eventType | - | 要监听的事件类型 | |
callback | () => void | - | 事件发生时调用的回调函数 |
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { 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 | - | 要取消监听的事件类型 | |
callback | () => void | - | 之前添加的回调函数 |
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.off('event', callback);
Returns:void
login
登录会议系统。
参数:
参数 | 类型 | 默认值 | 含义 |
params | {sdkAppId: Number; userId: String; userSig: String; tim?: ChatSDK} | - | 登录参数对象 |
sdkAppId | Number | - | |
userId | String | - | 用户ID建议限制长度为32字节,只允许包含大小写英文字母(a-zA-Z)、数字(0-9)及下划线和连词符。 |
userSig | String | - | |
tim | ChatSDK (可选) | - |
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.login({sdkAppId: 123456,userId: 'testUser',userSig: 'testSig'});
Returns:Promise<void>
logout
登出会议系统。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.logout();
Returns:Promise<void>
start
开始一个新的会议。
参数:
参数 | 类型 | 默认值 | 含义 |
roomId | String | - | 会议房间 ID |
params | - | 开始会议的参数 |
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { 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.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.join('123456', {isOpenCamera: false,isOpenMicrophone: false,});
Returns:Promise<void>
leave
离开当前会议。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.leave();
Returns:Promise<void>
dismiss
解散当前会议。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { 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.7import { 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.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.setLanguage('en-US');
Returns:void
setTheme
设置界面主题。
参数:
参数 | 类型 | 默认值 | 含义 |
theme | 'LIGHT' | 'DARK' | - | 主题类型 |
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.setTheme('DARK');
Returns:void
disableTextMessaging
禁用应用程序中的文本消息功能。调用此函数后,用户将无法发送或接收文本消息。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.disableTextMessaging();
Returns:void
disableScreenSharing
禁用应用程序中的屏幕共享功能。调用此函数后,用户将无法与他人共享屏幕。
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { conference } from '@tencentcloud/roomkit-web-vue3';conference.disableScreenSharing();
Returns:void
hideFeatureButton
参数:
参数 | 类型 | 默认值 | 含义 |
name | - | 需要隐藏的按钮名称 |
// 注意包的名称,如果您使用 vue2 版本请更改包名为 @tencentcloud/roomkit-web-vue2.7import { 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(可选) | 入会密码 | - |