@tencent-rtc/mcp 1.4.7 → 1.6.0-beta.1

package/resource/doc/livekit/preset/live/vue/components/co-guest-panel.md

@@ -1,91 +0,0 @@
-This document provides a detailed introduction to **Link Management Panel (CoGuestPanel)**. 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 customization section of components in the document.
-
-## Core Features
-| **Feature Name** | **Detailed Description** |
-| --- | --- |
-| **Tab switchover** | The UI offers dual tabs, allowing users to quickly switch between the Mic Connection Request and Mic Connection Management feature modules. It supports status memory and message prompts. |
-| **Application List** | Display all pending Mic Connection Requests in real time, showing user avatars, Nicknames, and status. Supports sorting by time and the filter function. |
-| **Anchor Operations** | Provide abundant one-click operation buttons, support accept application, reject application, disconnect and other features, with real-time feedback on operation results. |
-
-## Component Integration
-
-### Step 1: Configuring the Environment and Activating the 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 @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 3: Integrating the Link Management Panel
-
-Introduce **Link Management Panel** in your project and use it. You can copy the following example code directly to your project to show the Link Management Panel.
-``` typescript
-<template>
-  <UIKitProvider theme="light" language="en-US">
-    <div class="app">
-      <CoGuestPanel class="co-guest-panel" />
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { CoGuestPanel, useLoginState, useLiveState } from 'tuikit-atomicx-vue3';
-
-const { login, loginUserInfo } = useLoginState();
-const { joinLive } = useLiveState();
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, see Step 1 to get
-      userId: '',         // UserID, see Step 1 to get
-      userSig: '',        // userSig, see Step 1 to get
-    });
-  } catch (error) {
-    console.error('login error:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-  // enter live room by inputting corresponding liveId
-  await joinLive({
-    liveId: 'input corresponding live streaming room LiveId',
-  });
-});
-</script>
-
-<style scoped>.app{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.co-guest-panel{width:100%;max-width:500px;padding: 24px;height:600px;background:rgba(255,255,255,0.9);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.1);overflow:hidden}</style>
-```
-
-## Custom Style Customization
-
-The Link Management Panel supports style customization via CSS variables. You can override the following variables to adjust the component appearance. After completing **Step 3**, see the following example to adjust the UI of the Link Management Panel, or directly perform incremental copying of the sample code into your component to generate the effect example.
-``` typescript
-<template>
-   <CoGuestPanel class="co-guest-panel" />
-</template>
-
-<style>
-.co-guest-panel{--text-color-primary:#2d3748;--text-color-secondary:#93a3bb;--text-color-link:#20c9e7;--bg-color-primary:#ffffff;--bg-color-hover:#d6e7f3;--stroke-color-primary:#8bb6ef;--stroke-color-secondary:#90c0f4;--shadow-light:0 2px 8px rgba(69,67,67,0.08);--shadow-medium:0 4px 16px rgba(93,87,87,0.12);--transition:all 0.3s ease;}.co-guest-panel .panel-content{background:var(--bg-color-primary);border-radius:16px;border:1px solid var(--stroke-color-primary);box-shadow:var(--shadow-medium);transition:var(--transition);overflow:hidden;}.co-guest-panel .panel-content:hover{box-shadow:0 8px 24px rgba(0,0,0,0.15);transform:translateY(-2px);border-color:var(--stroke-color-secondary);}.co-guest-panel .user-item{padding:16px;margin:8px 0;background:var(--bg-color-primary);border:1px solid var(--stroke-color-primary);border-radius:12px;transition:var(--transition);cursor:pointer;}.co-guest-panel .user-item:hover{background:var(--bg-color-hover);border-color:var(--text-color-link);box-shadow:var(--shadow-light);transform:translateY(-1px);}.co-guest-panel .user-item:active{transform:translateY(0);transition:all 0.15s ease;}.co-guest-panel .user-item.selected{background:rgba(102,126,234,0.08);border-color:var(--text-color-link);box-shadow:var(--shadow-light);}
-</style>
-```
-| **Before modification** | **After modification** |
-| --- | --- |
-|  |  |

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

@@ -1,112 +0,0 @@
-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.
-
-## Core Features
-| **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 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
-```
-
-### Step 3: Integrating the **Media Source Configuration Panel**
-
-Add **Media Source Configuration Panel** to your project and use it. Copy the following example code directly into your project to show the media source configuration panel.
-``` typescript
-<template>
-  <UIKitProvider theme="dark" language="en-US">
-    <div class="app-container">
-      <LiveScenePanel class="live-scene-panel" />
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveScenePanel, useLoginState } from 'tuikit-atomicx-vue3';
-
-const { login } = useLoginState();
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, see Step 1 to get it
-      userId: '',         // UserID, see Step 1 to get it
-      userSig: '',        // userSig, see Step 1 to get it
-    });
-  } catch (error) {
-    console.error('login error:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-});
-</script>
-
-<style scoped>.app-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;padding:20px;box-sizing:border-box}.live-scene-panel{width:20%;height:80vh;background:rgba(0,0,0,0.8);border-radius:16px}</style>
-```
-
-## Customize Component
-
-The media source configuration panel provides users with various and dimensional feature APIs for user customization, allowing users to customize material types, operation behavior, style themes, etc. After completing **Step 3** above, see the following example to adjust the UI of the media source configuration panel, or directly copy the sample code incrementally into the component to generate the effect example.
-
-### Style Customization
-
-Customize component appearance via CSS class names and variables, supporting comprehensive customization of theme colors, layout styles, animation effects, and more.
-``` typescript
-<template>
-  <LiveScenePanel class="custom-live-scene-panel" />
-</template>
-
-<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>
-```
-| **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
-
-Using status management Hooks, you can listen to internal state changes in the media source configuration panel and implement responsive processing for external business logic. This approach allows you to monitor and respond to operations like adding, deleting, and updating materials without modifying the component's internal code, thereby achieving data synchronization, service statistics, user prompts, and other extended features.
-``` typescript
-<template>
-    <!-- status display -->
-    <div class="status-info">
-      <span>Number of materials: {{ materialCount }}</span>
-      <span>Last operation: {{ lastOperation }}</span>
-    </div>
-    <LiveScenePanel />
-    <LiveScenePanel />
-    <StreamMixer />
-</template>
-
-<script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { LiveScenePanel, useVideoMixerState, StreamMixer } from 'tuikit-atomicx-vue3';
-
-```

package/resource/doc/livekit/preset/live/vue/components/stream-mixer.md

@@ -1,215 +0,0 @@
-This document provides a detailed introduction to **Video Source Editing Canvas (StreamMixer)**. 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.
-
-## Core Features
-| **Feature Category** | **Specific Capabilities** |
-| --- | --- |
-| **Real-time preview** | Provide a WYSIWYG editing experience where hosts can intuitively see the mixed stream effect, supporting operations like rotation, move, scale, mirror, and hierarchy adjustment. |
-| **Template layout** | Built-in multiple live streaming room layout templates support automatic adaptation to different microphone-connected scenarios, including nine-grid, 1v6, floating window, helping you quickly switch between different live stream styles. |
-| **User status management** | Intelligent detection of co-broadcasting users joining and exiting, automatic layout adjustment with no manual intervention required, ensuring smooth live streaming and providing seamless experience for hosts. |
-| **Customizable UI** | To meet diverse business scenarios, the video source editing canvas provides component UI customization slots, enabling full control over co-broadcasting users' video stream areas. Rewrite their UI display, flexibly define avatars, nicknames, status, and other information, and easily create a unique visual experience that matches your UI style. |
-
-## Component Integration
-
-### Step 1: Configuring the Environment and Activating the Service
-
-Before quick integration, you need to refer to Preparations, meet related environment configuration and activate corresponding service.
-
-### Step 2: Installing Dependencies
-
-【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
-```
-
-### Step 3: Joining Live Room
-
-Introduce and use the **Video Source Editing Canvas** in your project. You can copy the following example code directly to your project and add the corresponding live streaming room.
-``` typescript
-<template>
-  <UIKitProvider theme="dark" language="zh-CN">
-    <div class="app">
-      <LiveScenePanel class="live-scene-panel" />
-      <StreamMixer class="live-stream-mixer" />
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { LiveScenePanel, StreamMixer, useLoginState, useLiveState, useCoGuestState } from 'tuikit-atomicx-vue3';
-
-const { login } = useLoginState();
-const { createLive } = useLiveState();
-const { sendCoGuestRequest } = useCoGuestState();
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,        // SDKAppID, see Step 1 to get
-      userId: '',         // UserID, see Step 1 to get
-      userSig: '',        // userSig, see Step 1 to get
-    });
-  } catch (error) {
-    console.error('login error:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-  // After the anchor creates a live streaming room
-  // StreamMixer automatically pushes the local composite video stream to the room
-  await createLive({
-    liveId: `live_${loginUserInfo.value.userId}`,
-    liveName: `${loginUserInfo.value?.userName}'s live streaming room`,
-  });
-  // The client can join the live room by calling the method and switch on/off mic as needed.
-  // After the audience succeeds in going on mic, StreamMixer starts TRTC streaming automatically
-  await sendCoGuestRequest();
-});
-</script>
-
-<style>.app {width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center}</style>
-```
-``` bash
-npm run dev
-```
-
-## Component Customization
-
-**Video Source Editing Canvas** provides a flexible component customization slot that supports you in adjusting the style and layout of elements such as avatar, nickname, and status based on your own needs. It also supports customizing the video stream area for co-streaming UI. Below are slot usage examples.
-
-### Component Slot
-| **Name** | **Parameter** | **Description** |
-| --- | --- | --- |
-| seatViewUI | seatInfo: SeatInfo | Display UI for custom seat |
-
-``` java
-// Example of using the seatViewUI slot
-<StreamMixer>
-  <CustomSeatViewUI #seatViewUI></CustomSeatViewUI>
-</StreamMixer>
-```
-1. `SeatInfo` defines the basic info and status of each seat in a live streaming room:
-
-| Parameter | Type | Required | Description |
-| --- | --- | --- | --- |
-| `index` | `number` | Required | The seat index number starts incrementing from 0, used to identify the seat position in the room. |
-| `isLocked` | `boolean` | Required | The seat lock status, `true` means the seat is locked and other users are unable to enter; `false` means the seat is open. |
-| `userInfo` | `SeatUserInfo` | optional | The user information of the current occupant in this seat. If the seat is empty, it is `undefined`. |
-| `region` | `RegionInfo` | optional | The display region information of the seat in the video canvas, for multiple streams video layout. |
-
-   ``` typescript
-   interface SeatInfo {
-     index: number;           // Seat index
-     isLocked: boolean;       // Whether the seat is locked
-     userInfo?: SeatUserInfo; // User information on the seat (optional)
-     region?: RegionInfo;     // Region information of the seat in the canvas (optional)
-   }
-   ```
-2. `SeatUserInfo` defines the user details of each seat in a live streaming room:
-
-| Parameter | Type | Required | Description |
-| --- | --- | --- | --- |
-| `roomId` | `string` | Required | The current unique identifier of the 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, English, and other characters. |
-| `avatarUrl` | `string` | Required | The complete URL of the user profile photo supports HTTPS protocol. |
-| `microphoneStatus` | `DeviceStatus` | Required | Microphone status |
-| `microphoneStatusReason` | `DeviceStatusReason` | Required | Reasons for microphone status changes, to distinguish between user proactive operation and administrator operation |
-| `cameraStatus` | `DeviceStatus` | Required | Camera status |
-| `cameraStatusReason` | `DeviceStatusReason` | Required | Reasons for camera status changes, to distinguish between user proactive operation and administrator operation |
-
-   ``` typescript
-   interface SeatUserInfo {
-     roomId: string;                    // Live streaming room ID
-     userId: string;                    // User ID
-     userName: string;                  // User Display Name
-     avatarUrl: string;                 // User Avatar URL
-     microphoneStatus: DeviceStatus;    // mic status
-     allowOpenMicrophone: boolean;      // whether to allow turning on microphone
-     cameraStatus: DeviceStatus;        // camera status
-     allowOpenCamera: boolean;          // whether to allow turning on camera
-   }
-
-   export type SeatUserInfo = {
-     liveId: string;                                // Live streaming room ID
-     userId: string;                                // User ID
-     userName: string;                              // User Display Name
-     avatarUrl: string;                             // User Avatar URL
-     microphoneStatus: DeviceStatus;                // mic status
-     microphoneStatusReason: DeviceStatusReason;    // reason for change
-     cameraStatus: DeviceStatus;                    // camera status
-     cameraStatusReason: DeviceStatusReason;        // reason for change
-   }
-   ```
-3. `RegionInfo` defines the display area and hierarchical information of the seat in the video canvas:
-
-| 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 overlap display priority |
-
-   ``` typescript
-   interface RegionInfo {
-     x: number;      // Top-left X-axis coordinate of the region
-     y: number;      // Top-left Y-axis coordinate of the region
-     w: number;      // Region width
-     h: number;      // Region height
-     zOrder: number; // Z-order
-   }
-   ```
-
-### Custom Slot Example
-
-To help you better experience and understand the customized capability of the seatViewUI slot in the video source editing Canvas component, we provide a **live streaming and mic connection scenario** example for your reference. You can refer to the above **step 3** to incrementally copy the following code into your project to achieve a similar effect.
-``` typescript
-<template>
-  <StreamMixer>
-    <template #seatViewUI="{ userInfo }">
-      <div
-        class="live-stream-view"
-        :class="{ 'is-anchor': isAnchor(userInfo), 'is-guest': !isAnchor(userInfo) }"
-      >
-        User information overlay
-        <div class="user-overlay">
-          <div class="user-badge" :class="{ 'anchor-badge': isAnchor(userInfo) }">
-            {{ isAnchor(userInfo) ? 'Anchor' : 'Audience' }}
-          </div>
-          <div class="user-name">{{ userInfo.userName }}</div>
-          <div class="device-status">
-            <span :class="['mic', userInfo.microphoneStatus]"></span>
-            <span :class="['camera', userInfo.cameraStatus]"></span>
-          </div>
-        </div>
-      </div>
-    </template>
-  </StreamMixer>
-</template>
-
-<script setup lang="ts">
-import { StreamMixer } from 'tuikit-atomicx-vue3';
-import type { SeatUserInfo } from 'tuikit-atomicx-vue3';
-
-// Determine whether it is an anchor (based on business logic)
-const isAnchor = (userInfo: SeatUserInfo) => {
-  // Here access can be judged based on uid and role
-  return userInfo.userId.includes('anchor') || userInfo.userName.includes('Anchor');
-};
-</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>
-```