@tencentcloud/sdk-mcp 1.6.4 → 1.6.5

package/resource/integration/chat/preset/vue/integration.md

@@ -3,16 +3,8 @@ TUIKit 是基于腾讯云 Chat SDK 的一款 Vue 3 UI 组件库，它提供了
 > **说明：**
 >
 > - **AI 助手使用说明**
-
-> Skill 提供了** IM 知识咨询**和 **Vue3 State API 无 UI 集成**能力，您可以用 Skill 在 IDE 中直接查询 SDK、UIKit、服务端 API、产品计费等内容，也可以用 Skill 在 Vue3 项目中集成 IM 能力, [点击这里，立即体验 AI 集成和咨询助手](https://cloud.tencent.com/document/product/269/125822)。
->
-
-> 您好！我们正在开发一款即时通信产品 UIKit，它基于腾讯云 Chat SDK，是一款 Vue3 UI 组件库，能帮助您快速集成并实现核心功能。
->
-
-> 您的反馈我们会**高度重视**，本问卷填写**仅需要 30 秒**！诚邀您的参与。
+> MCP 提供了 **IM 知识咨询**和**含 UI 集成**的 AI 解决方案，您可以通过 MCP 查询 IM 相关的知识和集成 UIKit，[点击这里，立即体验 AI 助手](https://cloud.tencent.com/document/product/269/126983)。
 >
-> - **请根据您的技术栈和目标平台，选择对应的接入文档开始集成：**
 
 |接入需求|桌面端|移动端 H5|
 |---------|---------|---------|
@@ -46,15 +38,31 @@ chat-uikit-vue3 主要分为 ConversationList、Chat、MessageList、ChatHeader
 
 - Node.js（Node.js ≥ 20.0.0，建议使用目前的 LTS v22 版本）
 
-## 创建项目
+## 快速体验完整示例项目
 
-使用 Vite 创建一个新的名称为 **chat-integration-vue3** 的 Vue3 项目。
+如果您希望先快速跑通完整效果，或在接入过程中对照最终代码结构，可以直接克隆我们已经完成接入的示例项目。示例项目已完成 Chat UIKit 相关依赖安装、组件引入、初始化配置和基础页面接入，适合作为接入参考。
+``` bash
+git clone https://gitee.com/tencent-cloud-uikit/rtc-chat-web.git
+cd chat-desktop-vue3
+npm install
+npm run dev
+```
 
 > **说明：**
 >
+> 示例项目地址：[点击查看 Gitee 示例项目](https://gitee.com/tencent-cloud-uikit/rtc-chat-web)。
+>
+> 示例项目用于帮助您快速体验和对照接入流程。若您需要在已有项目中集成，建议继续阅读下方步骤，按文档逐步完成接入。
+>
+
+## 创建项目
 
-> 高版本 Vite 需要使用最新的 Node.js 版本。
+使用 Vite 创建一个新的名称为 **chat-integration-vue3** 的 Vue3 项目。
+
+> **注意：**
 >
+> 1. 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
+> 2. `npm create vite@latest` 会使用最新的 vite 版本，最新版本的 vite 可能会与低版本的 node.js 冲突，请检查您电脑上的相关环境配置。
 
 【shell】
 ``` bash
@@ -90,7 +98,6 @@ cd chat-integration-vue3
 
 > **说明：**
 >
-
 > 建议使用 npm 进行安装，npm 会主动下载所需的 peerDependencies 依赖。
 >
 
@@ -103,7 +110,6 @@ npm i @tencentcloud/chat-uikit-vue3@6 tuikit-atomicx-vue3@6
 
 > **注意：**
 >
-
 > 以下代码中未填入 `SDKAppID`、`userID` 和 `userSig`，需在 步骤3 中获取相关信息后进行替换。
 >
 
@@ -168,7 +174,13 @@ body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans
           <template #headerToolbar>
             <div class="toolbar">
               <div class="toolbar-left">
-                <EmojiPicker /><FilePicker /><VideoPicker /><ImagePicker />
+                <EmojiPicker />
+                <FilePicker />
+                <VideoPicker />
+                <ImagePicker />
+                <AudioCallPicker />
+                <VideoCallPicker />
+                <QuickConferencePicker />
               </div>
               <button class="icon-btn" @click="searchOpen = !searchOpen">
                 <IconSearch size="20" />
@@ -191,7 +203,10 @@ body { margin: 0; padding: 0; font-family: Inter, Avenir, Helvetica, Arial, sans
     </div>
 
     <div v-show="activeTab === 'contacts'" class="detail-panel">
-      <ContactInfo @send-message="activeTab = 'conversations'" />
+      <ContactInfo
+        @send-message="activeTab = 'conversations'"
+        @enter-group="activeTab = 'conversations'"
+      />
     </div>
   </div>
 </template>
@@ -203,6 +218,7 @@ import {
   ConversationList, ContactList, ContactInfo, ChatSetting,
   EmojiPicker, FilePicker, VideoPicker, ImagePicker,
   VariantType, useChatContext,
+  AudioCallPicker, VideoCallPicker, QuickConferencePicker
 } from '@tencentcloud/chat-uikit-vue3';
 import { IconMenu, IconSearch } from '@tencentcloud/uikit-base-component-vue3';
 import SideTab from './SideTab.vue';
@@ -341,7 +357,6 @@ login({
 
 > **注意：**
 >
-
 > 本文示例代码采用在[即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见[服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
@@ -357,7 +372,7 @@ login({
 
 【shell】
 ``` bash
- npm run dev
+npm run dev
 ```
 
 > **注意：**
@@ -372,17 +387,15 @@ login({
 
 > **说明：**
 >
-
 > TUICallKit 是腾讯云推出一款音视频通话 UI 组件，通过集成该组件，您只需要编写几行代码就可以在聊天应用中体验音视频通话功能。
 >
-
 > 更多详细信息可参考：音视频通话-开通服务。
 >
 
 1. 安装 `@trtc/calls-uikit-vue` 依赖。
 
    ``` bash
-     npm install @trtc/calls-uikit-vue
+   npm install @trtc/calls-uikit-vue
    ```
 2. 从 `@trtc/calls-uikit-vue` 导出 `TUICallKit`，并挂载到 DOM 节点上。
 
@@ -403,7 +416,7 @@ login({
    import { TUICallKit } from '@trtc/calls-uikit-vue';
    </script>
    ```
-3. 打开 `<MessageInput />` 组件中 `#headerToolbar` 插槽内的注释。
+3. 在 `<MessageInput />` 组件中，使用 `#headerToolbar` 插槽控制输入框工具栏。
 
    ``` java
    <MessageInput class="message-input-container">
@@ -426,20 +439,42 @@ login({
    ```
 4. 拨打语音通话。
 
+### 视频会议
+
+TUIRoomKit 是一款定位企业会议、网络研讨会、在线教育等多人音视频会话场景的含 UI 低代码组件，提供房间管理、成员管理、屏幕分享等会控功能，支持标清、高清、超高清等多种画质。
+
+上述接入过程默认集成视频会议功能，如果需要关闭视频会议功能，在 `<MessageInput />` 组件中，使用 `#headerToolbar` 插槽控制输入框工具栏，注释掉视频会议的工具（QuickConferencePicker）即可。
+``` typescript
+<MessageInput>
+  <template #headerToolbar>
+    <div class="toolbar">
+      <div class="toolbar-left">
+        <EmojiPicker />
+        <FilePicker />
+        <VideoPicker />
+        <ImagePicker />
+        <AudioCallPicker />
+        <VideoCallPicker />
+        <!-- <QuickConferencePicker /> -->
+      </div>
+      <button class="icon-btn" @click="searchOpen = !searchOpen">
+        <IconSearch size="20" />
+      </button>
+    </div>
+  </template>
+</MessageInput>
+```
+
 ### 云端搜索
 
 > **说明：**
 >
-
 > 搜索，在客服、社交、在线教育、在线医疗、OA 等场景下是刚需功能，可帮助用户快速查找群组、用户、消息，提升产品使用体验和用户粘性。
 >
-
 > 由于 Web 平台本地存储特殊性等原因，Vue **无法实现本地搜索**，为了更好的满足对于搜索能力的需求，推出了**云端搜索能力**。**云端搜索功能支持全局搜索和会话内搜索，同时支持搜索群组、用户和消息。**
 >
-
 >
 >
-
 > 此功能属于增值服务，需要您购买云端搜索插件，请点击 [购买](https://console.cloud.tencent.com/im/plugin/TUICloudSearch)。
 >
 
@@ -475,7 +510,6 @@ UserSig 是用户登录即时通信 IM 的密码，其本质是对 UserID 等信
 
 > **注意：**
 >
-
 > 本文示例代码采用在 [即时通信 IM 控制台](https://console.cloud.tencent.com/im) 获取 UserSig 的方案，**该方法仅适合本地跑通功能调试**。 正确的 UserSig 签发方式请参见 [服务端生成 UserSig](https://cloud.tencent.com/document/product/269/32688)。
 >
 
@@ -520,7 +554,7 @@ const isChatSettingShow = ref(false);
 
 ### NPM 包
 
-[chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
+[chat-uikit-vue3 npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-vue3)
 
 ### GitHub
 

package/resource/integration/livekit/preset/live/android/live-audience-integration.md

@@ -0,0 +1,133 @@
+`TUILiveKit` 的观众观看页为用户提供了丰富且便捷的直播观看与互动功能，能快速集成到您的应用中，满足观众多样化的需求。
+
+> **集成提示：**
+>
+> 本文档介绍基于 **UI 组件** 的观众观看方式（含完整交互 UI）。若您需通过 **Core SDK** 自行搭建观众端界面，请参考 观众观看 (Core SDK)。
+>
+
+## 功能概览
+- **直播观看：**清晰、流畅观看主播实时直播画面。
+
+- **互动连麦：**申请连麦，与主播进行音视频互动。
+
+- **直播信息：**查看直播间标题、简介，及在线观众列表等信息。
+
+- **直播互动：**送礼物（有动画特效，主播接收提示）、点赞（有动画及实时统计）、发弹幕互动。
+
+| 直播观看 | 互动连麦 | 直播信息 | 直播互动 |
+| --- | --- | --- | --- |
+|  | ### |  |  |
+
+## 快速接入
+
+### 步骤 1.  开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤 2.  代码集成
+
+参考 准备工作 接入 `TUILiveKit` 。
+
+### 步骤 3. 添加观众观看页面
+
+在您的观众观看页 `Activity` 中 初始化添加 `AudienceView` 观众观看视图：
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import android.util.Log
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.audienceview.AudienceView
+import com.trtc.uikit.livekit.features.audienceview.AudienceViewDefine.AudienceViewListener
+import io.trtc.tuikit.atomicxcore.api.live.LiveInfo
+
+class AudienceActivity : AppCompatActivity() {
+    lateinit var audienceView: AudienceView
+    lateinit var listener: AudienceViewListener
+
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1. 创建 AudienceView
+        audienceView = AudienceView(this)
+        val roomId = "live_1236666"
+        // 2. 初始化 AudienceView
+        audienceView.init(this, roomId)
+
+        // 3. (可选)添加 AudienceContainerView 事件监听
+        listener = object : AudienceViewListener {
+
+            override fun onLiveEnded(roomId: String, ownerName: String, ownerAvatarUrl: String) {
+                finishAndRemoveTask()
+            }
+
+            override fun onClickFloatWindow() {
+                // 画中画按钮点击事件，您可以按照您的业务需求处理该事件，此处代码示例：点击画中画按钮后，将当前页面转换为画中画模式
+                enterPictureInPictureMode()
+            }
+
+            override fun onClickCloseButton(liveInfo: LiveInfo) {
+                Log.i("TAG", "onClickCloseButton liveInfo: $liveInfo")
+                finishAndRemoveTask()
+            }
+        }
+        audienceView.addListener(listener)
+        // 4. 将 AudienceContainerView 添加到界面
+        setContentView(audienceView)
+    }
+
+    override fun onDestroy() {
+        // 5. (可选)若您添加了事件监听器，则需要在页面销毁时移除监听器
+        audienceView.removeListener(listener)
+        super.onDestroy()
+    }
+}
+```
+
+### 步骤 4. 跳转到观众观看页面
+
+在您需要点击跳转到观众观看页时，可参考如下代码示例：
+
+【Kotlin】
+``` java
+fun startActivity(context: Context) {
+    val intent = Intent(context, AudienceActivity::class.java)
+    context.startActivity(intent)
+}
+```
+
+## 自定义您的界面布局
+
+### 自定义观众观看页界面
+- 参考 观众核心页面 进行观众界面定制，在 `AudienceView` 中修改 UI 样式，添加您的业务组件。
+
+- 参考 调整视频直播挂件 进行视频位挂件定制，在 `AudienceView` 中修改视频位上的名称、头像挂件等 UI。
+
+### 文案定制
+
+`TUILiveKit` 使用 `Android` 通用的 `XML` 资源文件来管理 `UI` 所需的文案显示，您可以直接通过 `XML` 文件修改需要调整的文案：
+
+### 图标定制
+
+`TUILiveKit` 使用 `Android` 通用的 `drawable` 资源文件夹管理 `UI` 所需的图片资源，您可以通过替换资源文件快速修改自定义界面所需的图标，替换时请确保新的文件名称与原文件名称一致。
+
+## 下一步
+
+恭喜您，现在您已经成功集成了观众观看。接下来，您可以实现**主播开播**、**直播列表**等功能，可参考下表：
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>主播开播</strong> | 主播开播全流程功能，包括开播前的准备和开播后的各种互动。 | 主播开播 |
+| <strong>直播列表</strong> | 展示直播列表界面和功能，包含直播列表，房间信息展示功能。 | 直播列表 |
+| <strong>礼物系统</strong> | 实现自定义礼物素材配置、计费系统对接、PK 场景互动等功能。 | 礼物系统 |
+
+## 常见问题
+
+### 观众选择视频连麦后，视频画面显示黑屏？
+
+请前往**应用信息 >** **权限 >** **相机**，检查摄像头权限是否开启，可参考下图：
+
+### 观众发送弹幕时，直播间内其他观众看不到弹幕内容？
+- 原因 1： 先检查网络连接，确保观众设备网络正常。
+
+- 原因 2： 该观众被主播禁言，无法发送弹幕。
+
+- 原因 3：观众的弹幕内容涉及 关键词屏蔽，请确认观众发送的弹幕内容是否符合直播间规则。

package/resource/integration/livekit/preset/live/android/live-host-integration.md

@@ -0,0 +1,225 @@
+`TUILiveKit` 主播开播页为直播场景提供**开箱即用的全功能界面**，支持快速搭建主播开播所需的核心能力，让您无需关注复杂 `UI` 与逻辑实现，即可高效集成直播开播流程。
+
+> **集成提示：**
+>
+> 本文档介绍基于 **UI 组件** 的开播方式（含完整交互 UI）。若您需通过 `Core SDK` 自行搭建主播端界面，请参考 主播开播 (Core SDK)。
+>
+
+## 功能概览
+- **开播前预览：**支持主播开播前的房间名称、背景、视频预览、美颜调试、音效调试、布局模板等多种个性化配置。
+
+- **连麦互动：**支持直播过程中与观众 或 与其他直播间主播实时互动。
+
+- **观众互动：**支持弹幕、礼物等丰富直播互动形式。
+
+- **直播间管理：**支持在线用户列表展示、以及直播间内的禁言、踢人等多种管理操作。
+
+| 开播前预览 | 连麦互动 | 观众互动 | 直播间管理 |
+| --- | --- | --- | --- |
+|  |  |  |  |
+
+## 快速接入
+
+### 步骤 1.  开通服务
+
+参考 开通服务 文档开通「体验版」或「大规模直播版」套餐。
+
+### 步骤 2.  代码集成
+
+参考 准备工作 接入 `TUILiveKit`。
+
+### 步骤 3. 添加开播前的准备页面
+
+`AnchorPrepareView` 组件已内置了摄像头预览、音效设置、布局设置、以及其他功能设置，您需创建并加载 `AnchorPrepareView` ，具体示例代码如下：
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener
+
+class AnchorActivity : AppCompatActivity() {
+    private val TAG = "AnchorActivity"
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    private val anchorPrepareViewListener = object : AnchorPrepareViewListener {
+        override fun onClickStartButton() {
+            // 点击预览界面开始直播按钮触发
+        }
+
+        override fun onClickBackButton() {
+            // 点击预览界面返回按钮触发
+            finishAndRemoveTask()
+        }
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1.创建并初始化 AnchorPrepareView
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1236666", null)
+        anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener)
+
+        // 2.将 AnchorPrepareView 添加到界面
+        setContentView(anchorPrepareView)
+    }
+}
+```
+
+### 步骤 4. 添加主播用的推流页面
+
+`AnchorView` 组件已内置了音视频推流、观众连麦、直播互动、直播管理等功能，您只需创建并加载 `AnchorView` ，具体示例代码如下：
+
+> **配合服务端 (RESTFUL API) 开播：**
+>
+> 如果您的房间是先通过 服务端 API 创建的，在集成时无需修改任何代码逻辑，只需将示例代码中的 `liveID` 替换为服务端生成的 ID 即可。SDK 将自动接管该房间并开启直播。
+>
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareViewListener
+import com.trtc.uikit.livekit.features.anchorprepare.LiveStreamPrivacyStatus
+import com.trtc.uikit.livekit.features.anchorview.AnchorState
+import com.trtc.uikit.livekit.features.anchorview.AnchorView
+import com.trtc.uikit.livekit.features.anchorview.AnchorViewListener
+import com.trtc.uikit.livekit.features.anchorview.RoomBehavior
+import io.trtc.tuikit.atomicxcore.api.live.LiveInfo
+import io.trtc.tuikit.atomicxcore.api.live.SeatLayoutTemplate
+
+class AnchorActivity : AppCompatActivity() {
+    private val TAG = "AnchorActivity"
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    private val anchorPrepareViewListener = object : AnchorPrepareViewListener {
+        override fun onClickStartButton() {
+            // 完成从准备页到主播开播页的切换
+            initAnchorView()
+        }
+
+        override fun onClickBackButton() {
+            finishAndRemoveTask()
+        }
+    }
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        // 1.创建并初始化 AnchorPrepareView
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1236666", null)
+        anchorPrepareView.addAnchorPrepareViewListener(anchorPrepareViewListener)
+
+        // 2.将 AnchorPrepareView 添加到界面
+        setContentView(anchorPrepareView)
+    }
+
+    val anchorViewListener = object : AnchorViewListener {
+        override fun onEndLiving(state: AnchorState) {
+            finishAndRemoveTask()
+        }
+
+        override fun onClickFloatWindow() {
+        }
+    }
+
+    fun initAnchorView() {
+        // 1.创建 AnchorView
+        val anchorView = AnchorView(this)
+
+        // 2.初始化 AnchorView，其中 liveInfo 为直播间信息，anchorPrepareView 为您的开播前的准备页面
+        val liveInfo = LiveInfo()
+        liveInfo.liveID = "live_1236666"
+        liveInfo.liveName = anchorPrepareView.getState()?.roomName?.value ?: ""
+        liveInfo.isPublicVisible = anchorPrepareView.getState()?.liveMode?.value == LiveStreamPrivacyStatus.PUBLIC
+        liveInfo.coverURL = anchorPrepareView.getState()?.coverURL?.value ?: ""
+        liveInfo.seatTemplate = SeatLayoutTemplate.VideoDynamicGrid9Seats
+        // 进房行为：
+        //    RoomBehavior.CREATE_ROOM: 主播创建房间
+        //    RoomBehavior.ENTER_ROOM: 主播进入服务端 rest api 创建的直播间
+        anchorView.init(liveInfo, anchorPrepareView.getCoreView(), RoomBehavior.CREATE_ROOM, null)
+        anchorView.addAnchorViewListener(anchorViewListener)
+
+        // 3.将 AnchorView 添加到界面
+        setContentView(anchorView)
+    }
+}
+```
+
+## 自定义您的界面布局
+
+`TUILiveKit` 支持灵活定制开播页与直播页的功能和样式，您可根据业务需求调整布局、隐藏 / 显示功能模块。
+
+### 直播布局模板选择
+
+`TUILiveKit` 提供 **4 种直播布局模板**，您可在主播开播页的 **UI 交互「布局」入口** 选择合适样式：
+
+#### 布局模板一览：
+| <strong>布局分类</strong> | <strong>动态宫格布局</strong> | <strong>浮动小窗布局</strong> | <strong>固定宫格布局</strong> | <strong>固定小窗布局</strong> |
+| --- | --- | --- | --- | --- |
+| <strong>模板取值</strong> | <code>VideoDynamicGrid9Seats</code> | <code>VideoDynamicFloat7Seats</code> | <code>VideoFixedGrid9Seats</code> | <code>VideoFixedFloat7Seats</code> |
+| <strong>描述</strong> | 默认布局，可根据连麦人数动态调整宫格大小。 | 连麦嘉宾以浮动小窗形式显示。 | 连麦人数固定，每个嘉宾占据一个固定宫格。 | 连麦人数固定，嘉宾以固定小窗形式显示。 |
+| <strong>运行效果</strong> |  |  |  |  |
+
+### 自定义开播页功能区
+
+通过调用 步骤 3 创建的 `prepareView` 的 API，可自定义隐藏开播准备页的操作区或特定功能：
+
+【Kotlin】
+``` java
+import android.os.Bundle
+import androidx.appcompat.app.AppCompatActivity
+import com.trtc.uikit.livekit.features.anchorprepare.AnchorPrepareView
+
+class AnchorActivity : AppCompatActivity() {
+
+    lateinit var anchorPrepareView: AnchorPrepareView
+    override fun onCreate(savedInstanceState: Bundle?) {
+        super.onCreate(savedInstanceState)
+        anchorPrepareView = AnchorPrepareView(this)
+        anchorPrepareView.init("live_1235858", null)
+
+        // 1. 自定义功能区 - 例如：隐藏整个功能区
+        anchorPrepareView.disableFeatureMenu(true)
+
+        setContentView(anchorPrepareView)
+    }
+}
+```
+
+|隐藏整个功能区|隐藏美颜按钮|隐藏音效按钮|隐藏摄像头切换按钮|
+|---------|---------|---------|---------|
+|`disableFeatureMenu(true)`|`disableMenuBeautyButton(true)`|`disableMenuAudioEffectButton(true)`|`disableMenuSwitchCameraButton(true)`|
+|||||
+
+### 自定义主播直播页界面
+- 参考 主播核心页面 进行主播界面定制，在 `AnchorView` 中修改 `UI` 样式，添加您的业务组件。
+
+- 参考 调整视频直播挂件 进行视频位挂件定制，在 `AnchorView` 中修改视频位上的名称、头像挂件等 `UI`。
+
+### 文案定制
+
+`TUILiveKit` 使用 Android 通用的 `XML` 资源文件来管理 UI 所需的文案显示，您可以直接通过 `XML` 文件修改需要调整的文案：
+
+### 图标定制
+
+`TUILiveKit` 使用 Android 通用的 `drawable` 资源文件夹管理 UI 所需的图片资源，您可以通过替换资源文件快速修改自定义界面所需的图标，替换时请确保新的文件名称与原文件名称一致。
+
+## 下一步
+
+恭喜您，现在您已经成功集成了 **主播开播** 。接下来，您可以实现**观众观看**、**直播列表**等功能，可参考下表：
+| <strong>功能</strong> | <strong>描述</strong> | <strong>集成指引</strong> |
+| --- | --- | --- |
+| <strong>观众观看</strong> | 实现观众进入主播的直播间后观看直播，实现观众连麦 、直播间信息、在线观众、弹幕显示等功能。 | 观众观看 |
+| <strong>直播列表</strong> | 展示直播列表界面和功能，包含直播列表，房间信息展示功能。 | 直播列表 |
+| <strong>礼物系统</strong> | 实现自定义礼物素材配置、计费系统对接、PK 场景互动等功能。 | 礼物系统 |
+
+## 常见问题
+
+### 开播后无画面？
+
+请前往**应用信息 >** **权限 >** **相机**，检查摄像头权限是否开启，可参考下图：
+
+### 点击开播按钮无法开播，提示“未登录”？
+
+参考 登录指引， 确认已完成登录功能接入。