@tencent-rtc/mcp 1.2.9 → 1.3.1

package/resource/doc/livekit/vue/live-player-h5-integration.md

@@ -0,0 +1,269 @@
+This article provides a detailed introduction to the watch page in **TUILiveKit **Demo. You can directly refer to this document to integrate the watch page we developed in your existing project, or you can deeply customize the page style, layout, and functional items according to your needs according to the content in the document.
+
+### Function Overview
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Functional classification**</td>
+
+<td rowspan="1" colSpan="1" >**Specific capabilities**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live video playback**</td>
+
+<td rowspan="1" colSpan="1" >HD and smooth live streaming experience</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Barrage Interaction**</td>
+
+<td rowspan="1" colSpan="1" >Real-time Barrage chat</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Viewer List**</td>
+
+<td rowspan="1" colSpan="1" >View online viewer information</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Follow Streamer**</td>
+
+<td rowspan="1" colSpan="1" >Follow your favorite streamers with one click</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Full Screen Play**</td>
+
+<td rowspan="1" colSpan="1" >Immersive viewing experience</td>
+</tr>
+</table>
+
+
+## Function Display
+
+The watch page provides default behavior and style, but if the default behavior and style don't fully meet your needs, you can also customize the UI. The numbers shown in the figure correspond to categories in the specific function list. These mainly include live broadcast information display, video broadcast area, online audience, audio and video operation, live broadcast duration, screen resolution switching, full screen function, chat interaction, message list, etc.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/722ab157984711f09b0c525400bf7822.png)
+
+
+## Quick Access
+
+### Step 1: Environment Configuration and Service Activation
+
+Before using Quick Access, you need to refer to [Preparations](https://write.woa.com/document/163673134112337920) configuration requirements and activate the corresponding services.
+
+
+
+
+【npm】
+``` bash
+npm install tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 --save
+```
+
+
+【pnpm】
+``` bash
+pnpm add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+```
+
+
+【yarn】
+``` bash
+yarn add tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3
+```
+
+### Step 2: Access the viewing page
+
+Create a live-player.vue file in your project and copy the following code to integrate the watch page into your project.
+``` java
+<template>
+  <UIKitProvider language="zh-CN">
+    <div class="container">
+      <!-- Live core area -->
+      <section class="live">
+        <header class="header">
+          <IconArrowStrokeBack class="back-btn" size="20" />
+          <Avatar :src="currentLive?.liveOwner.avatarUrl" :size="32" class="avatar" />
+          <span class="user-name">{{ currentLive?.liveOwner.userName || currentLive?.liveOwner.userId }}</span>
+        </header>
+        <LiveCoreView class="player" />
+      </section>
+
+      <div class="sidebar">
+        <!-- Online viewers list -->
+        <section class="audience">
+          <header class="section-header">
+            <h3> online viewers <span>({{ audienceList.length }})</span></h3>
+          </header>
+          <LiveAudienceList class="list" />
+        </section>
+
+        <!-- Message List & Message List -->
+        <section class="barrage">
+          <header class="section-header">
+            <h3>MessageList</h3>
+          </header>
+          <BarrageList class="list" />
+          <BarrageInput class="input" height="48px" />
+        </section>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { LiveAudienceList, BarrageList, BarrageInput, useLiveAudienceState, LiveCoreView, useLiveState, Avatar, useLoginState } from 'tuikit-atomicx-vue3';
+import { UIKitProvider, IconArrowStrokeBack } from '@tencentcloud/uikit-base-component-vue3';
+
+const { audienceList } = useLiveAudienceState();
+const { currentLive } = useLiveState();
+const { login } = useLoginState();
+
+async function initLogin() {
+  try {
+    await login({
+      sdkAppId: 0,        // SDKAppId, refer to step 1 to obtain
+      userId: '',         // UserID, refer to step 1 to obtain
+      userSig: '',        // userSig, refer to step 1 to obtain
+    });
+  } catch (error) {
+    console.error('Login Failed:', error);
+  }
+}
+
+onMounted(async () => {
+  await initLogin();
+});
+
+</script>
+
+<style>:global(body){height:100vh;width:100vw;margin:0;padding:0;overflow:hidden;font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:70% 30%;height:100vh;width:100vw;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
+
+```
+
+### Step 3: Start the project
+``` bash
+npm run dev
+```
+
+## Customizable
+
+As shown in the functional diagram above, we also support customizing the UI of the watch page based on your project needs. The following table lists the main customizable features.
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Category**</td>
+
+<td rowspan="1" colSpan="1" >**Function**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live information display**</td>
+
+<td rowspan="1" colSpan="1" >Customize the display of the watch page information area</td>
+
+<td rowspan="1" colSpan="1" >**Supports:**<br>- **Show/hide the logo, replace it with your desired logo**<br>- **UI customization, show/hide the follow button, and replace it with your desired button style**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Online viewers**</td>
+
+<td rowspan="1" colSpan="1" >Customize audience information display</td>
+
+<td rowspan="1" colSpan="1" >**Supports:**<br>- **Show/hide audience level**<br>- **Customize audience information font and color UI**<br>- **Replace icon style with your desired style**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**MessageList**</td>
+
+<td rowspan="1" colSpan="1" >Custom message barrage area display</td>
+
+<td rowspan="1" colSpan="1" >**Supports:**<br>- **Show/hide chat input area**<br>- **Supports UI customization for chat bubble style, audience level, etc.**</td>
+</tr>
+</table>
+
+
+## Playing a Live Stream
+
+#### Method 1: Playing by Specifying a LiveId
+
+If you need to specify a LiveId for playback, you need to add the following code based on the code in [step 3](https://write.woa.com/#c1b852bc-da02-4c9f-bb11-2a63582ce978) of the Quick Access section above. The reference method is as follows:
+``` java
+// live-player.vue
+import { onMounted } from 'vue';
+import { useLiveState } from 'tuikit-atomicx-vue3';
+
+const { joinLive } = useLiveState();
+
+onMounted(async () => {
+  // Enter liveId to join the live broadcast room. For the specific meaning of the parameters, 
+  // please refer to the preparation work in step 1.
+  await joinLive({ liveId: 'xxx' });                                  
+});
+```
+
+#### Method 2: Routing Configuration
+
+Because of the logic involved in redirecting from the live stream list (or homepage) to the live stream room, you'll need to configure Vue Router. Create a new router folder in the project's src directory and create an index.ts file. Then, import and use the router in your main file (e.g., main.ts or index.ts). See the [GitHub code examples](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts) for more information. For a live stream list, see the Live Stream List documentation.
+``` typescript
+// src/router/index.ts
+import { createRouter, createWebHistory } from 'vue-router';
+
+const routes = [
+  {
+    path: '/live-player',
+    component: () => import('../views/live-player.vue'),
+  },
+  // If you need the live broadcast list function, you can add the following route
+  // {  
+    //   path: '/live-list',  
+    //   component: () => import('../views/live-list.vue'),  
+  // },
+];
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+export default router;
+
+// src/main.ts
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router';
+
+const app = createApp(App);
+app.use(router);
+app.mount('#app');
+```
+
+### Next Steps
+
+Congratulations! You've successfully integrated the watch page. Next, you can implement content such as the anchor's start page and live broadcast list page. Please refer to the table below:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**Function**</td>
+
+<td rowspan="1" colSpan="1" >**Description**</td>
+
+<td rowspan="1" colSpan="1" >**Integration Guide**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Host Streaming**</td>
+
+<td rowspan="1" colSpan="1" >The complete workflow for a host to start a stream, including pre-stream setup and various in-stream interactions.</td>
+
+<td rowspan="1" colSpan="1" >[Host Streaming](https://write.woa.com/document/194114399449153536)</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**Live Stream List**</td>
+
+<td rowspan="1" colSpan="1" >Display the live broadcast list interface and functions, including live broadcast list and room information display function</td>
+
+<td rowspan="1" colSpan="1" >[Live Stream List](https://write.woa.com/document/194114814480777216)</td>
+</tr>
+</table>

package/resource/doc/livekit/vue/workflow.md

@@ -0,0 +1,218 @@
+# Web Live TUIKit Code Generation Workflow Instructions (Vue)
+
+**【Instruction Purpose】**: Provide Agent with a **code generation blueprint** for implementing Vue Web Live TUIKit core functionalities, and guide Agent to **prioritize using the latest documentation content fetched in real-time via tools**.
+
+**💡 Special Reminder:**
+1. **When user requirements include 【Live List】, 【Broadcaster Page】, and 【Viewer Page】, Agent MUST add a 【Host/Viewer Identity Selection】 page or logic in the generated code to allow users to test with different UserIDs**.
+2. **When users need to implement co-guest (mic connection) features, call** `get_web_live_state_detail` **to obtain liveKit client API for implementing related functions**.
+
+---
+
+## 📦 UIKit Version & Dependency Instructions
+
+### Recommended Versions
+```json
+{
+  "tuikit-atomicx-vue3": "latest",
+  "@tencentcloud/uikit-base-component-vue3": "latest",
+}
+```
+
+### Automatic Dependency Installation Workflow
+After generating code, Agent **MUST automatically execute** the following steps:
+
+1. **Detect Dependency Completeness**: Check if `package.json` contains all required dependencies
+2. **Auto-install Dependencies**: Execute `npm install` or `pnpm install`
+3. **Verify Installation**: Confirm successful installation before prompting user to run the project
+
+### esbuild Issue Resolution
+Add the following content to `package.json`. `resolutions` is compatible with `yarn`, `overrides` is compatible with `npm` and `pnpm`:
+```json
+{
+ "resolutions": {
+    "esbuild": "npm:esbuild-wasm@latest"
+  },
+   "overrides": {
+    "esbuild": "npm:esbuild-wasm@latest"
+  }
+}
+```
+
+---
+
+## 🔐 Automatic Test Credential Generation
+
+### UserSig Auto-fetch Workflow
+
+Before generating code, Agent **MUST**:
+
+1. **Call `get_usersig` MCP tool** to automatically generate test account credentials
+2. **Generate Test UserIDs**:
+   - Broadcaster UserID: Format as live001 or host001
+   - Viewer UserID: Format as user001 or viewer001
+3. **Embed in Code**: Directly write the generated SDKAppID, userID (for both host and viewer), and userSig into the code's configuration section
+4. **Security Notice**: Clearly mark in code comments that these are test credentials; production environment MUST generate on backend
+
+---
+
+## ⚙️ Core Code Generation Workflow (LLM Action Guide)
+
+Agent, this tool has **fetched in real-time** the latest documentation content corresponding to the user's required functionalities (Goals), and attached this content **below this instruction** (in the `llm_code_generation_instructions_md` field).
+
+### Strictly Execute Steps:
+
+#### Step 0: Pre-preparation (Automated)
+```
+a. Call get_usersig tool to generate test credentials
+   - Broadcaster userID: Use format `live001`
+   - Viewer userID: Use format `user001`
+   
+b. Check and prepare project environment
+   - Verify dependency versions in package.json
+   - Automatically add to dependencies if missing
+   
+c. Execute dependency installation
+   - Run npm install or pnpm install
+   - Wait for completion and check for errors
+```
+
+#### Step 1: Select Functional Modules
+Based on user's specific functional requirements, select corresponding instructions from the following function blocks.
+
+#### Step 2: Use Real-time Documentation
+**MUST prioritize and exclusively** use the real-time documentation content **provided in this tool's return results** (not external URLs) to generate Vue code snippets.
+
+---
+
+## 🎯 Feature Implementation Instructions
+
+### 1. Implement Live List Page (`liveList`)
+
+**Target Component**: `liveList`
+
+**Code Generation Instructions**:
+- Generate Vue component structure, import `liveList`
+- **Auto-inject Test Credentials**: Use auto-generated **viewer** `SDKAppID`, `userID`, `userSig` during component initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, extract latest API calls and example code
+
+**Dependent Components**: `liveList`
+
+**Post-generation Actions**:
+```bash
+# Agent auto-executes
+npm install  # Install dependencies
+npm run dev  # Start dev server
+```
+
+---
+
+### 2. Implement PC Live Viewer Page (`livePlayer` & `barrage`)
+
+**Target Components**: `livePlayer`, `barrage`
+
+**Code Generation Instructions**:
+- Generate viewer page based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure **viewer** test account during player initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, MUST follow documentation steps to integrate `livePlayer` and `barrage` (bullet comments), and demonstrate how to monitor video stream status
+- **Interaction Optimization**: Add loading states, error handling, reconnection mechanisms
+
+**Dependent Components**: `livePlayer`, `barrage`
+
+---
+
+### 3. Implement H5 Live Viewer Page (`livePlayer` & `barrage`)
+
+**Target Components**: `livePlayer`, `barrage`
+
+**Code Generation Instructions**:
+- Generate viewer page based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure **viewer** test account during player initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, MUST follow documentation steps to integrate `livePlayer` and `barrage` (bullet comments), and demonstrate how to monitor video stream status
+- **Interaction Optimization**: Add loading states, error handling, reconnection mechanisms
+
+**Dependent Components**: `livePlayer`, `barrage`
+
+---
+
+### 4. Implement Live Broadcasting Page (`livePusher`)
+
+**Target Component**: `livePusher`
+
+**Code Generation Instructions**:
+- Generate broadcasting page based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure **broadcaster** test account during pusher initialization
+- **Core Logic**: Reference real-time documentation content in this tool's return results, MUST include Vue logic to handle camera and microphone **permission requests and toggle controls**
+- **Device Detection**: Auto-detect available camera and microphone devices
+- **Error Handling**: Handle permission denial, device unavailability, and other exceptions
+
+**Dependent Components**: `livePusher`
+
+---
+
+### 5. Implement Live Co-guest Feature (`CoGuestPanel`)
+
+**Target Component**: `CoGuestPanel`
+
+**Code Generation Instructions**:
+- Generate complex components or logic modules for co-guest functionality based on real-time documentation examples
+- **Auto-inject Test Credentials**: Configure test accounts separately for broadcaster and co-guest viewers
+- **Core Logic**: Reference real-time documentation content in this tool's return results, code should demonstrate how to use `CoGuestPanel` to manage co-guest requests and coordinate pusher/player logic switching
+- **State Management**: Handle state transitions for co-guest invitations, acceptance, rejection, disconnection, etc.
+- **Multi-person Co-guest**: Support scenarios with multiple simultaneous co-guests
+
+**Dependent Components**: `CoGuestPanel`, `livePusher`, `livePlayer`
+
+---
+
+## 🔄 Complete Automation Workflow Summary
+
+```mermaid
+graph TD
+    A[Receive User Requirements] --> B[Call get_web_live_uikit_integration to Fetch Latest Docs]
+    B --> C[Check package.json Dependencies]
+    C --> D[Auto-add Missing Dependencies]
+    D --> E[Execute npm install]
+    E --> F[Generate Code Based on Real-time Docs]
+    F --> G[Call get_usersig to Generate Test Credentials]
+    G --> H[Inject Test Credentials into Code]
+    H --> I[Add Security Comments and Warnings]
+    I --> J[Start Dev Server]
+    J --> K[Output Test Info to User]
+```
+
+---
+
+## 📋 Agent Checklist
+
+After completing code generation, Agent MUST confirm:
+
+- [x] Called `get_usersig` to generate test credentials
+- [x] Embedded credentials into code configuration section
+- [x] Added security warning comments in code
+- [x] Checked `package.json` dependency completeness
+- [x] Auto-executed `npm install`
+- [x] Verified successful dependency installation
+- [x] Used real-time documentation content (not external URLs)
+- [x] Added error handling and logging output
+- [x] Provided test account information to user
+- [x] Prompted user to run `npm run dev`
+
+---
+
+## 🚨 Security Warning (MUST be included in generated code comments)
+
+```javascript
+/**
+ * ⚠️ Important Security Notice
+ * 
+ * 1. The current userSig is a test credential auto-generated by development tools
+ * 2. userSig validity period is 7 days, regeneration required after expiration
+ * 3. ❌ Frontend generation of userSig is STRICTLY PROHIBITED in production
+ * 4. ✅ Before going live, userSig MUST be generated on backend services
+ * 5. Reference documentation: https://trtc.io/document/34385
+ * 
+ * SDKAppID and secretKey retrieval locations:
+ * - Chat Application: https://console.trtc.io
+ * - TRTC Application: https://console.trtc.io
+ */
+```