Conference
  • 产品概述
  • Web
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 虚拟背景
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomEvents
        • TUIRoomEngine 定义
    • 常见问题
  • iOS
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Android
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • Electron
    • 跑通 Demo
    • 集成
    • UI 定制
    • Conference Control
    • 房间中聊天
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
      • 文字水印
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEvent
        • TUIRoomEngine
        • TUIRoomEngine 定义
    • 常见问题
  • Flutter
    • 跑通 Demo
    • 集成
    • UI 定制
    • 会议控制
    • In-Conference Chat
    • 云端录制
    • AI 降噪
    • 机器人推流
    • 更多功能
      • 悬浮窗
    • 接口文档
      • RoomKit 接口
      • RoomEngine 接口
        • 接口概述
        • TUIRoomEngine
        • TUIRoomObserver
        • 类型定义
    • 常见问题
  • 产品概述
    • 产品概述
  • 开通服务
  • 价格中心
    • 免费时长
    • TRTC 多人音视频 Conference 包月套餐
    • 订阅套餐时长计费说明
    • 现收现付
      • 音视频时长计费说明
      • 云端录制计费说明
      • 混流转码与旁路转推计费说明
  • 服务器 API
    • REST 接口
      • RESTful 接口概述
      • RESTful 接口列表
      • Room Management
        • Create a Room
        • Destroy a Room
        • Update the Room Information
        • Get the Room Information
      • 用户管理
        • Get the Room Member List
        • Update the Room Member Information
        • Change the Room Ownership
        • Mark Room Members
        • Ban Room Members
        • Unban Room Members
        • Get the Banned Room Member List
        • Remove Room Member
      • Seat Management
        • Get the Seat List
        • Pick User on the Seat
        • Kick User off the Seat
        • Lock the Seat
    • Third-Party Callback
      • Callback Overview
      • Callback Command List
      • Callback Configuration
        • Query Callback Configuration
        • Create Callback Configuration
        • Update Callback Configuration
        • Delete Callback Configuration
      • Room Related
        • After a Room Is Created
        • After a Room Is Destroyed
        • After the Room Information Is Updated
      • User Related
        • After a Room Is Entered
        • After a Room Is Left
      • Seat Connection Related
        • After the Seat List Is Changed
  • 错误码
Conference

UI 定制

本文将详细介绍如何定制 TUIRoomkit 的用户界面。TUIRoomkit 提供了两种定制方式,一种是通过简单的自定义 UI API 来进行定制,另一种是替换现有的 UI 组件。下面我们将分别进行详细介绍。

方案一:界面微调

TUIRoomkit 提供了一系列的 API,可以方便地进行 UI 的定制。下表列出了一些主要的 API 和它们的作用:
API
描述
设置界面语言。
setTheme
设置界面主题。
开启应用程序中的文本消息功能。具体详见:文字水印
禁用应用程序中的文本消息功能。调用此函数后,用户将无法发送或接收文本消息。
禁用应用程序中的屏幕共享功能。调用此函数后,用户将无法与他人共享屏幕。
隐藏应用程序中的特定功能按钮。调用此函数并传入适当的 FeatureButton 枚举值后,相应的按钮将从用户界面中隐藏。

方案二:UIKit 源码导出修改

您可以直接修改我们提供的 UI 源代码,以便根据需求调整 TUIRoomKit 的用户界面。执行以下 node 脚本,将 TUIRoomKit 的界面源代码自动复制到您的项目中(默认路径./src/components/TUIRoom)。
说明: 在导出源码后,您需要手动将 TUIRoom 组件的引用从 npm 包地址更改为 TUIRoom 源码的相对路径地址。
Vue3
Vue2
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 界面。详情可见: