- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
- 动态与公告
- 产品简介
- 购买指南
- 新手指引
- Demo 体验
- 视频通话（含 UI）
- 多人会议（含 UI）
- 组件介绍（TUIRoomKit）
- 开通服务（TUIRoomKit）
- 跑通 Demo（TUIRoomKit）
- 快速接入（TUIRoomKit）
- 预定会议（TUIRoomKit）
- 会中呼叫（TUIRoomKit）
- 界面定制（TUIRoomKit）
- 虚拟背景（TUIRoomKit）
- 会议控制（TUIRoomKit）
- 云端录制（TUIRoomKit）
- AI 降噪（TUIRoomKit）
- 会中聊天（TUIRoomKit）
- 机器人推流（TUIRoomKit）
- 更多特性（TUIRoomKit）
- 客户端 API（TUIRoomKit）
- 服务端 API（TUIRoomKit）
- 常见问题（TUIRoomKit）
- 错误码 (TUIRoomKit)
- SDK更新日志（TUIRoomKit）
- 在线直播（含 UI）
- 组件介绍（TUILiveKit）
- 开通服务（TUILiveKit）
- 跑通 Demo（TUILiveKit）
- 快速接入（TUILiveKit）
- 界面定制（TUILiveKit）
- 开播和观看（TUILiveKit）
- 房间列表（TUILiveKit）
- 关注主播（TUILiveKit）
- 主播连线（TUILiveKit）
- 主播 PK（TUILiveKit）
- 观众连麦（TUILiveKit）
- 互动弹幕（TUILiveKit）
- 互动礼物（TUILiveKit）
- 礼物特效（TUILiveKit）
- 美颜特效（TUILiveKit）
- 悬浮窗（TUILiveKit）
- 客户端API（TUILiveKit）
- 服务端 API（TUILiveKit）
- 错误码（TUILiveKit）
- 发布日志（TUILiveKit）
- 常见问题（TUILiveKit）
- 语音聊天室（含 UI）
- 无 UI 集成
- 高级功能
- 服务端 API
- 控制台指南
- 解决方案
- 常见问题
- 旧版文档
- 协议与策略
- TRTC 政策
- 词汇表
本文将详细介绍如何定制 TUIRoomkit 的用户界面。TUIRoomkit 提供了两种定制方式，一种是通过简单的自定义 UI API 来进行定制，另一种是替换现有的 UI 组件。下面我们将分别进行详细介绍。
方案一：界面微调
API | 描述 |
设置界面语言。 | |
设置界面主题。 | |
禁用应用程序中的文本消息功能。调用此函数后，用户将无法发送或接收文本消息。 | |
禁用应用程序中的屏幕共享功能。调用此函数后，用户将无法与他人共享屏幕。 | |
方案二：UIKit 源码导出修改
您可以直接修改我们提供的 UI 源代码，以便根据需求调整 TUIRoomKit 的用户界面。执行以下 node 脚本，将 TUIRoomKit 的界面源代码自动复制到您的项目中（默认路径
./src/components/TUIRoom）。说明：
在导出源码后，您需要手动将 TUIRoom 组件的引用从 npm 包地址更改为 TUIRoom 源码的相对路径地址。
node ./node_modules/@tencentcloud/roomkit-electron-vue3/scripts/eject.js
node ./node_modules/@tencentcloud/roomkit-electron-vue2.7/scripts/eject.js
1. 替换图标
您可以直接修改
/TUIRoom/assests/icons/svg 文件夹下的图标组件，以确保整个 app 中的图标色调风格保持一致，请在替换时保持图标文件的名字不变。
2. 调整 UI 布局
您可以通过修改
/TUIRoom/components/ 文件下的不同组件来调整多人视频会议界面的UI布局- components/- Chat 聊天- common 公用图标组件- ManageMember 成员管理- RoomContent Room 视频- RoomFooter Room 页面 Footer部分- RoomHeader Room 页面 Header部分- RoomHome Home 页面- RoomInvite 邀请成员- RoomLogin 登录页面- RoomMore 更多- RoomSetting 设置- RoomSidebar 抽屉组件
方案三：自实现 UI 方法
TUIRoomKit 的整体功能是基于 TUIRoomEngine 这个无 UI SDK实现的，您可以完全基于 TUIRoomEngine 实现一套自己的 UI 界面。详情可见：
是
否
本页内容是否解决了您的问题？