@tencent-rtc/mcp 1.3.9 → 1.4.1

package/resource/doc/livekit/{live → preset/live}/vue/components/live-scene-panel.md

@@ -1,71 +1,32 @@
 This document provides a detailed introduction to the **Media Source Configuration Panel (LiveScenePanel)**. You can refer to the sample code in this document for seamless integration of our pre-developed components in your existing project, or customize the style and layout according to your needs by following the component customization section in the document.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/3c146f8f991211f0aa4252540044a08e.png)
-
-
 ## Core Features
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Feature Category**</td>
-
-<td rowspan="1" colSpan="1" >**Specific Capability**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Multi-material type support**</td>
-
-<td rowspan="1" colSpan="1" >Camera, screen sharing, image, video, text and multiple material types, support device selection and parameter configuration.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Intelligent display mode**</td>
-
-<td rowspan="1" colSpan="1" >Display the full panel when no material is present, and automatically switch to compact button mode when material is available, with responsive layout adaptation.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Material management operations**</td>
-
-<td rowspan="1" colSpan="1" >Complete material management features including addition, editing, rename, deletion, and sorting, with support for batch operations.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Real-time preview configuration**</td>
-
-<td rowspan="1" colSpan="1" >Camera configuration pop-up provides real-time preview, supports parameter adjustment and device testing.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Permission and Error Handling**</td>
-
-<td rowspan="1" colSpan="1" >Automated permission check, Friendly error prompt and retry mechanism to guarantee user experience.</td>
-</tr>
-</table>
-
+| **Feature Category** | **Specific Capability** |
+| --- | --- |
+| **Multi-material type support** | Camera, screen sharing, image, video, text and multiple material types, support device selection and parameter configuration. |
+| **Intelligent display mode** | Display the full panel when no material is present, and automatically switch to compact button mode when material is available, with responsive layout adaptation. |
+| **Material management operations** | Complete material management features including addition, editing, rename, deletion, and sorting, with support for batch operations. |
+| **Real-time preview configuration** | Camera configuration pop-up provides real-time preview, supports parameter adjustment and device testing. |
+| **Permission and Error Handling** | Automated permission check, Friendly error prompt and retry mechanism to guarantee user experience. |
 
 ## Component Integration
 
 ### Step 1: Configuring the Environment and Activating the Service
 
-Before performing quick integration, you need to refer to [preparations](https://write.woa.com/document/185222107981008896) to meet the related environment configuration and activate the corresponding service.
+Before performing quick integration, you need to refer to preparations to meet the related environment configuration and activate the corresponding service.
 
 ### Step 2: Dependency Installation
 
-
-
-
 【npm】
 ``` bash
 npm install tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3 --save
 ```
 
-
 【pnpm】
 ``` bash
 pnpm add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
 ```
 
-
 【yarn】
 ``` bash
 yarn add tuikit-atomicx-vue3@latest @tencentcloud/uikit-base-component-vue3
@@ -124,34 +85,10 @@ Customize component appearance via CSS class names and variables, supporting com
 
 <style>.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.custom-live-scene-panel{width:100%;max-width:300px;height:80vh;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:2px solid #4c63d2;border-radius:16px;padding:24px;box-shadow:0 8px 32px rgba(0,0,0,0.1);color:white}.custom-live-scene-panel .add-material-item{background-color:#147fcb!important;color:white;border:none;border-radius:0!important;padding:12px 24px;font-weight:600;transition:all 0.3s ease}.custom-live-scene-panel .materials-list{margin-top:20px;gap:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.custom-live-scene-panel .material-item{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);border-radius:12px;padding:16px;backdrop-filter:blur(10px);transition:all 0.3s ease}.custom-live-scene-panel .material-item:hover{background:rgba(255,255,255,0.2);transform:scale(1.02)}</style>
 ```
-<table>
-<tr>
-<td rowspan="1" colSpan="2" >**Before modification**</td>
-
-<td rowspan="1" colSpan="2" >**After modification**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Add Media Source Interface**</td>
-
-<td rowspan="1" colSpan="1" >**Media Source Setting Interface**</td>
-
-<td rowspan="1" colSpan="1" >**Add Media Source Interface**</td>
-
-<td rowspan="1" colSpan="1" >**Media Source Setting Interface**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/ac5eab64991011f0a3b8525400e889b2.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/d16d5660991011f0a207525400bf7822.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/3f2a9ff2991011f0a3b8525400e889b2.png)</td>
-
-<td rowspan="1" colSpan="1" ><br>![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/62a92cae991011f08bb25254005ef0f7.png)</td>
-</tr>
-</table>
-
+| **Before modification** | **After modification** |  |  |
+| --- | --- | --- | --- |
+| **Add Media Source Interface** | **Media Source Setting Interface** | **Add Media Source Interface** | **Media Source Setting Interface** |
+|  |  |  |  |
 
 ### Listening for Status and Scaling
 

package/resource/doc/livekit/{live → preset/live}/vue/components/live-view.md

@@ -1,53 +1,29 @@
 This document provides a detailed introduction to the **live stream video component (LiveView)**. You can refer to the sample code in this document to integrate our pre-developed components into your existing project, or customize the style and layout according to your needs by following the component customization section in the document.
 
-![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027862798/7120df7bb00111f0bd1d5254001c06ec.png)
-
-
 ## Core Features
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Feature Category**</td>
-
-<td rowspan="1" colSpan="1" >**Specific Capacity**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Smart stream switchover**</td>
-
-<td rowspan="1" colSpan="1" >LiveView can switch stream types automatically based on the current user's identity (audience or host).<br>- Audience mode: The component plays ultra-low-latency video streams to ensure smooth viewing for millions of audience members while drastically reducing traffic costs.<br>- Connected mode: The component automatically switches to TRTC streaming, providing millisecond-level ultra-low latency to ensure real-time, clear interaction experience between connected users.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >**Customizable UI**</td>
-
-<td rowspan="1" colSpan="1" >To meet diverse business scenarios, LiveView provides custom UI slots, enabling full control over the co-broadcasting user's video stream area. You can rewrite the UI display, flexibly define the user's avatar, nickname, status, and other information, and easily create a unique visual experience that matches your brand style.</td>
-</tr>
-</table>
-
+| **Feature Category** | **Specific Capacity** |
+| --- | --- |
+| **Smart stream switchover** | LiveView can switch stream types automatically based on the current user's identity (audience or host).<br>- Audience mode: The component plays ultra-low-latency video streams to ensure smooth viewing for millions of audience members while drastically reducing traffic costs.<br>- Connected mode: The component automatically switches to TRTC streaming, providing millisecond-level ultra-low latency to ensure real-time, clear interaction experience between connected users. |
+| **Customizable UI** | To meet diverse business scenarios, LiveView provides custom UI slots, enabling full control over the co-broadcasting user's video stream area. You can rewrite the UI display, flexibly define the user's avatar, nickname, status, and other information, and easily create a unique visual experience that matches your brand style. |
 
 ## Component Integration
 
 ### Step 1: Configuring the Environment and Activating the Service
 
-Before quick integration, you need to refer to [preparations](https://write.woa.com/document/185222107981008896), meet the related environment configuration and activate the corresponding service.
+Before quick integration, you need to refer to preparations, meet the related environment configuration and activate the corresponding service.
 
 ### Step 2: Dependency Installation
 
-
-
-
 【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
@@ -87,13 +63,13 @@ async function initLogin() {
 }
 
 onMounted(async () => {
-  await initLogin();                    
+  await initLogin();
   // After the audience enters the live room
   // LiveView starts VOD automatically with ultra-low latency
   await joinLive({
-    liveId: 'existing live streaming room Id',   
+    liveId: 'existing live streaming room Id',
   })
-  // The client can join the live room by calling the corresponding method and switch mic as needed. 
+  // The client can join the live room by calling the corresponding method and switch mic as needed.
   // After the audience successfully goes on mic, LiveView autoplays TRTC streaming.
   await sendCoGuestRequest();
 });
@@ -107,23 +83,9 @@ onMounted(async () => {
 LiveView provides flexible component customization slots. These slots support adjusting the style and layout of elements like avatars, nicknames, and status based on your needs, and also allow customizing the video stream area UI for co-streaming. Below are usage examples for the slots.
 
 #### Component Slot
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >**Name**</td>
-
-<td rowspan="1" colSpan="1" >**Parameter**</td>
-
-<td rowspan="1" colSpan="1" >**Description**</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >streamViewUI</td>
-
-<td rowspan="1" colSpan="1" >userInfo</td>
-
-<td rowspan="1" colSpan="1" >Display UI for custom seat</td>
-</tr>
-</table>
+| **Name** | **Parameter** | **Description** |
+| --- | --- | --- |
+| streamViewUI | userInfo | Display UI for custom seat |
 
 ``` java
 // Example of using the streamViewUI slot
@@ -133,126 +95,27 @@ LiveView provides flexible component customization slots. These slots support ad
 ```
 1. `userInfo` defines the basic info and status of each seat in a live streaming room:
 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Parameter</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userInfo`</td>
-
-<td rowspan="1" colSpan="1" >`userInfo`</td>
-
-<td rowspan="1" colSpan="1" >optional</td>
-
-<td rowspan="1" colSpan="1" >User information of the current occupant in this seat. If the seat is empty, it is `undefined`.</td>
-</tr>
-</table>
+| Parameter | Type | Required | Description |
+| --- | --- | --- | --- |
+| `userInfo` | `userInfo` | optional | User information of the current occupant in this seat. If the seat is empty, it is `undefined`. |
 
    ``` typescript
    interface SeatInfo {
      userInfo?: SeatUserInfo; // User info on the seat (optional)
-   } 
+   }
    ```
 2. `userInfo` defines the user details of each seat in a live streaming room:
 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Parameter</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`roomId`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >The unique identifier of the current live streaming room, used to distinguish different live streaming rooms</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userId`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >User's unique identifier must be unique in the entire system</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`userName`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >The name displayed for users in live streams supports Chinese and English characters.</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`avatarUrl`</td>
-
-<td rowspan="1" colSpan="1" >`string`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >The complete URL address of the user profile photo, supporting HTTPS protocol</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`microphoneStatus`</td>
-
-<td rowspan="1" colSpan="1" >`DeviceStatus`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Microphone status</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`microphoneStatusReason`</td>
-
-<td rowspan="1" colSpan="1" >`DeviceStatusReason`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >The cause for mic status change, to distinguish between user proactive operation and administrator operation</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`cameraStatus`</td>
-
-<td rowspan="1" colSpan="1" >`DeviceStatus`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Camera status</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`cameraStatusReason`</td>
-
-<td rowspan="1" colSpan="1" >`DeviceStatusReason`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >The cause for camera status change, to distinguish between user proactive operation and administrator operation</td>
-</tr>
-</table>
+| Parameter | Type | Required | Description |
+| --- | --- | --- | --- |
+| `roomId` | `string` | Required | The unique identifier of the current live streaming room, used to distinguish different live streaming rooms |
+| `userId` | `string` | Required | User's unique identifier must be unique in the entire system |
+| `userName` | `string` | Required | The name displayed for users in live streams supports Chinese and English characters. |
+| `avatarUrl` | `string` | Required | The complete URL address of the user profile photo, supporting HTTPS protocol |
+| `microphoneStatus` | `DeviceStatus` | Required | Microphone status |
+| `microphoneStatusReason` | `DeviceStatusReason` | Required | The cause for mic status change, to distinguish between user proactive operation and administrator operation |
+| `cameraStatus` | `DeviceStatus` | Required | Camera status |
+| `cameraStatusReason` | `DeviceStatusReason` | Required | The cause for camera status change, to distinguish between user proactive operation and administrator operation |
 
    ``` typescript
    interface SeatUserInfo {
@@ -265,7 +128,7 @@ LiveView provides flexible component customization slots. These slots support ad
      cameraStatus: DeviceStatus;        // Camera Status
      allowOpenCamera: boolean;          // Whether to allow turning on camera
    }
-   
+
    export type SeatUserInfo = {
      liveId: string;                                // Live streaming room ID
      userId: string;                                // Unique user ID
@@ -279,67 +142,13 @@ LiveView provides flexible component customization slots. These slots support ad
    ```
 3. `RegionInfo` defines the display area and hierarchical information of the seat in the video canvas:
 
-<table>
-<tr>
-<td rowspan="1" colSpan="1" >Parameter</td>
-
-<td rowspan="1" colSpan="1" >Type</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Description</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`x`</td>
-
-<td rowspan="1" colSpan="1" >`number`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >X-coordinate of the region's top-left corner relative to the canvas (pixel value)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`y`</td>
-
-<td rowspan="1" colSpan="1" >`number`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Y-coordinate of the region's top-left corner relative to the canvas (pixel value)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`w`</td>
-
-<td rowspan="1" colSpan="1" >`number`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Width of the region (pixel value), must be greater than 0</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`h`</td>
-
-<td rowspan="1" colSpan="1" >`number`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Height of the region (pixel value), must be greater than 0</td>
-</tr>
-
-<tr>
-<td rowspan="1" colSpan="1" >`zOrder`</td>
-
-<td rowspan="1" colSpan="1" >`number`</td>
-
-<td rowspan="1" colSpan="1" >Required</td>
-
-<td rowspan="1" colSpan="1" >Z-order, the larger the value, the more positioned towards the front, for processing display priority of overlap regions</td>
-</tr>
-</table>
+| Parameter | Type | Required | Description |
+| --- | --- | --- | --- |
+| `x` | `number` | Required | X-coordinate of the region's top-left corner relative to the canvas (pixel value) |
+| `y` | `number` | Required | Y-coordinate of the region's top-left corner relative to the canvas (pixel value) |
+| `w` | `number` | Required | Width of the region (pixel value), must be greater than 0 |
+| `h` | `number` | Required | Height of the region (pixel value), must be greater than 0 |
+| `zOrder` | `number` | Required | Z-order, the larger the value, the more positioned towards the front, for processing display priority of overlap regions |
 
    ``` typescript
    interface RegionInfo {
@@ -358,7 +167,7 @@ To help you better experience and understand the customized capability of the Li
 <template>
   <LiveView>
     <template #streamViewUI="{ userInfo }">
-      <div 
+      <div
         class="live-stream-view"
         :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
       >
@@ -366,7 +175,7 @@ To help you better experience and understand the customized capability of the Li
         <div class="video-area">
           <!-- The video stream will be rendered automatically -->
         </div>
-        
+
         <!-- User information overlay -->
         <div class="user-overlay">
           <div class="user-badge" :class="{ 'anchor-badge': isAnchor(userInfo) }">
@@ -395,4 +204,4 @@ const isAnchor = (userInfo: SeatUserInfo) => {
 </script>
 
 <style scoped>.live-stream-view{position:relative;width:100%;height:100%;border-radius:8px;overflow:hidden}.live-stream-view.is-anchor{border:3px solid #ff6b35;box-shadow:0 0 20px rgba(255,107,53,.3)}.live-stream-view.is-guest{border:1px solid #ddd}.video-area{width:100%;height:100%;background:#000}.user-overlay{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(0,0,0,.8));padding:10px;color:#fff}.user-badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:12px;margin-bottom:5px;background:#666}.anchor-badge{background:#ff6b35;color:#fff}.user-name{font-weight:700;margin-bottom:5px}.device-status span{margin-right:5px;opacity:.8}.device-status .camera.Off,.device-status .mic.Off{opacity:.3}</style>
-```
+```