@tencent-rtc/mcp 1.3.0 → 1.3.2

package/resource/doc/roomkit/vue/features/room-state.md

@@ -0,0 +1,291 @@
+This document will guide you in detail on how to use Atomicx's [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) to manage the complete lifecycle of a room, including creating, joining, leaving, and ending a room, as well as handling key room status notifications. The following sequence diagram demonstrates the main process from room creation to destruction.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/b5d730a6dfdc11f08775525400bf7822.png)
+
+
+## Feature Introduction
+
+[useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) is the core Hook responsible for room management in the Atomicx solution. It encapsulates complex underlying signaling processes, and developers can drive room state through simple reactive data and method calls.
+- **Create & Join:** Create and join a room through [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom) method, or join an existing room through [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#joinRoom) method.
+
+- **Real-time State Sync:** The `useRoomState` Hook internally maintains [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentRoom) reactive data, automatically synchronizing room name, mode, member count and other information.
+
+- **Role-based Exit Mechanism:** Provides clear operational boundaries for different roles. Regular members can use [leaveRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#leaveRoom) to exit; while the room owner (host) has [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#endRoom) permission to end the room and destroy room resources with one click.
+
+
+## **Prerequisites**
+
+User has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to [Integration Overview](https://write.woa.com/document/197379797539790848).
+
+## Implementing Room Management
+
+### Step 1: Import useRoomState
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { 
+  createAndJoinRoom, 
+  joinRoom, 
+  leaveRoom, 
+  endRoom,
+  currentRoom 
+} = useRoomState();
+```
+
+### Step 2: Create Room
+
+Create room (room owner): Use [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom), after successful call the user will automatically obtain room owner permissions.
+
+> **Note:**
+> 
+
+> The roomId specified when creating a room is recommended to be generated and issued by the business backend to ensure global uniqueness and stability of the room ID.
+> 
+
+- **Example 1: User creates room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+   
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+   })
+   ```
+- **Example 2: User creates room and specifies room name**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+   
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+     options: {
+       roomName: 'My Temporary Room'
+     }
+   })
+   ```
+- **Example 3: User creates password-protected room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+   
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+     options: {
+       roomName: 'My Temporary Room',
+       password: '123456',
+     }
+   })
+   ```   
+
+   > **Note:**
+   > 
+
+   > Creator automatically joins the room when calling [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom), no password required.
+   > 
+
+- **Example 4: User creates room and configures member management settings**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { createAndJoinRoom } = useRoomState();
+   
+   await createAndJoinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+     options: {
+       roomName: 'My Temporary Room',
+       password: '123456',
+       isAllMicrophoneDisabled: true,   // Enable mute all
+       isAllCameraDisabled: true,       // Enable disable all videos
+       isAllScreenShareDisabled: true,  // Enable disable all screen sharing
+       isAllMessageDisabled: true,      // Enable disable all in-meeting messages
+     }
+   })
+   ```   
+
+   > **Note:**
+   > 
+
+   > Member management configuration only applies to regular members, room owner and administrators are not restricted. To modify member management configuration after room creation or manage individual member permissions, please refer to [Member Management](https://write.woa.com/document/197380064613830656).
+   > 
+
+
+### Step 3: User joins existing room
+
+Logged-in users can call [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#joinRoom) to join an existing room. Atomicx only supports users joining one room at a time.
+- **Example 1: User joins room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { joinRoom } = useRoomState();
+   
+   await joinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+   })
+   ```
+- **Example 2: User joins password-protected room**
+
+   ``` typescript
+   import { useRoomState } from 'tuikit-atomicx-vue3/room';
+   const { joinRoom } = useRoomState();
+   
+   await joinRoom({
+     roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+     password: '123456',
+   })
+   ```
+
+### Step 4: Update room information
+
+Room owner can use [updateRoomInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#updateRoomInfo) to update room name and password after creating a room.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+const { updateRoomInfo } = useRoomState();
+
+await updateRoomInfo({
+  roomId: 'YOUR_ROOM_ID',    // Specify room ID, generated by business backend
+  options: {
+     roomName: 'New Room Name',
+     password: '234567',
+  },
+})
+```
+
+> **Note:**
+> 
+
+> Room owner must be in the room to call [updateRoomInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#updateRoomInfo). If room owner has left the room, they need to rejoin before updating room information.
+> 
+
+
+### Step 5: Leave room
+
+Both room owner and regular users can call [leaveRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#leaveRoom) interface to leave the room. Prerequisite for using this interface is that the user has joined the room through [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom) or [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#joinRoom) interface.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+const { leaveRoom } = useRoomState();
+
+await leaveRoom();
+```
+
+### Step 6: Destroy room
+
+Only room owner can call [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#endRoom) interface to destroy the room. Prerequisite for using this interface is that the user has created a room through [createAndJoinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#createAndJoinRoom) or has obtained room owner status.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+const { endRoom } = useRoomState();
+
+await endRoom();
+```
+
+> **Note:**
+> 
+> - If room owner leaves the room without calling [endRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#endRoom), the room will continue to exist until automatic reclamation conditions are met (6 consecutive hours without users).
+> - Room owner can transfer owner status to other users through [transferOwner](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#transferOwner) interface.
+
+
+### Step 7: Handle abnormal exit
+
+#### Handle room destroyed event
+
+Regular users can handle room destruction business interaction by listening to `RoomEvent.onRoomEnded` event.
+``` typescript
+import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
+import { TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
+const { subscribeEvent, unsubscribeEvent } = useRoomState();
+
+function onRoomEnded() {
+  TUIMessageBox.alert({
+    title: 'Notice',
+    content: 'Room owner has ended the room',
+  });
+}
+
+// Subscribe to RoomEvent when component loads
+subscribeEvent(RoomEvent.onRoomEnded, onRoomEnded);
+// Unsubscribe from RoomEvent when component is destroyed
+unsubscribeEvent(RoomEvent.onRoomEnded, onRoomEnded);
+```
+
+#### Handle user kicked from room event
+
+Regular users can handle being kicked from room business interaction by listening to `RoomParticipantEvent.onKickedFromRoom` event.
+``` typescript
+import { useRoomParticipantState, RoomParticipantEvent, KickedOutOfRoomReason } from 'tuikit-atomicx-vue3/room';
+import { TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
+
+const { subscribeEvent, unsubscribeEvent } = useRoomParticipantState();
+
+function onKickedFromRoom({ reason }: { reason: KickedOutOfRoomReason; message: string }) {
+    let notice = '';
+    switch (reason) {
+      case KickedOutOfRoomReason.KickedByAdmin:
+        notice = 'You have been removed from the room by the host';
+        break;
+      case KickedOutOfRoomReason.ReplacedByAnotherDevice:
+        notice = 'Your account has been logged in on another device';
+        break;
+      case KickedOutOfRoomReason.KickedByServer:
+        notice = 'You have been removed from the room by the server';
+        break;
+      case KickedOutOfRoomReason.ConnectionTimeout:
+        notice = 'Network connection timeout, exiting room';
+        break;
+      case KickedOutOfRoomReason.InvalidStatusOnReconnect:
+        notice = 'Room has been destroyed or you were removed during offline period';
+        break;
+      case KickedOutOfRoomReason.RoomLimitExceeded:
+        notice = 'Room capacity reached, unable to join';
+        break;
+      default:
+        notice = 'You have been removed from the room';
+        break;
+    }
+    TUIMessageBox.alert({
+      title: 'Notice',
+      content: notice,
+    });
+  }
+
+// Subscribe to RoomParticipantEvent when component loads
+subscribeEvent(RoomParticipantEvent.onKickedFromRoom, onKickedFromRoom);
+// Unsubscribe from RoomParticipantEvent when component is destroyed
+unsubscribeEvent(RoomParticipantEvent.onKickedFromRoom, onKickedFromRoom);
+```
+
+## Advanced Implementation
+
+The current document introduces quickly creating and immediately joining a room, suitable for instant multi-party audio/video communication scenarios.
+
+However, in real business scenarios, we often need to plan ahead: set room topics, schedule specific start and end times, and invite participants. Participants can receive reminders before the multi-party audio/video room starts and join on time.
+
+Atomicx provides complete scheduled room capabilities, including:
+- **Schedule Room:** Set multi-party room time and participant list in advance.
+
+- **Schedule List**: View and manage all upcoming multi-party rooms under your name.
+
+- **Meeting Reminders:** Support automatic reminder logic before start.
+
+
+   If you need to implement more complex business multi-party audio/video room management logic as described above, please refer to: [Schedule Room](https://write.woa.com/document/197380092150673408).
+
+
+## FAQ
+
+### If there are no users in the room but the room has not been destroyed, will the room exist forever?
+
+When there are no users in the room for 6 consecutive hours, the backend will attempt to reclaim the room.
+
+### If there are no users in the room but the room has not been destroyed, will there be any charges?
+
+Rooms without users but not yet destroyed only occupy package group count, do not consume minutes and do not generate additional charges.
+
+### Can a user join multiple rooms simultaneously?
+
+The `useRoomState` provided by Atomicx is a singleton interface and only supports users joining one room at a time. If you need to support a user joining multiple rooms simultaneously, please feel free to [contact us](https://cloud.tencent.com/document/product/647/19906) to submit feedback.
+
+### What is the maximum number of users that can join a room simultaneously?
+
+The upper limit on the number of users in a room is related to your package. For details, please check [TUIRoomKit Package Description](https://cloud.tencent.com/document/product/647/104842#function).

package/resource/doc/roomkit/vue/features/room-view.md

@@ -0,0 +1,338 @@
+This document will guide you in using Atomicx's core view component `RoomView` to implement video rendering for real-time audio and video rooms. By configuring layout templates and utilizing component slots, you can quickly implement video layout switching and personalized customization.
+
+`RoomView` is the main container component responsible for video rendering in Atomicx. It automatically handles video stream subscription, rendering, and release. You only need to focus on its layout configuration and UI enhancement.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/c09ab2a6e07f11f0a5a25254007c27c5.png)
+
+
+## Core Capabilities
+
+`RoomView`, as the core view container for multi-party audio and video rooms, has built-in multiple enterprise-grade audio and video processing capabilities:
+- **Intelligent Performance Management**: Supports lazy loading of video streams within the viewport, and can automatically switch between high and low-definition streams based on stream area size and number of remote streams, significantly reducing system energy consumption and bandwidth usage.
+
+- **Fine-grained Sorting Strategy**: The system automatically adjusts frame order based on roles (host priority) and media status (audio and video enabled priority).
+
+- **Interactive Speaker Mode**: Supports double-clicking to lock the main screen, and in sidebar or top bar layouts, supports collapsing non-core areas to focus on presentation content.
+
+- **Immersive Visual Design**: All video windows are forced to maintain a standard `16:9` ratio, combined with interactive display toolbars, providing an interference-free multi-party audio and video room experience.
+
+
+## Customizable Range
+
+`RoomView` focuses only on underlying video stream playback, while giving developers all "presentation rights" at the view layer. Using `RoomView`, you can freely define:
+- **Layout Switching**: Transform layouts in real-time according to business scenarios (e.g., speaker mode or discussion mode).
+
+- **Video Widget UI:** Including name tags, volume dynamic waveforms, role badges, etc.
+
+
+## **Prerequisites**
+- The user has completed login authentication through [useLoginState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-LoginState), please refer to [Integration Overview](https://write.woa.com/document/197379797539790848).
+
+- The user has entered a room through [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState), refer to [Room Management](https://write.woa.com/document/197379861957083136).
+
+- Global `UIKitProvider` has been configured in `App.vue`, please refer to [Configure App.vue](https://cloud.tencent.com/document/product/647/81962#ce98ee15-b0cb-43af-81da-70f51231430e).
+
+
+## Implementing Video Layout Feature
+
+### Step 1: Import and Render Basic Layout
+
+In your meeting page (e.g., RoomLayoutView.vue), import `RoomView` and the layout enum `RoomLayoutTemplate`.
+``` typescript
+<template>
+  <div class="room-container">
+    <RoomView />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { RoomView } from 'tuikit-atomicx-vue3/room';
+</script>
+
+<style lang="scss">
+.room-container {
+ width: 100%;
+ height: 100%;
+}
+</style>
+```
+
+> **Note:**
+> 
+
+> `RoomView` will automatically fill the parent container's height and width, please ensure its parent container has explicit dimensions.
+> 
+
+
+### Step 2: Switch Layout Mode
+
+You can dynamically update the `layoutTemplate` attribute value of `RoomView` based on business logic (e.g., clicking a switch button).
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Property Name</td>
+
+<td rowspan="1" colSpan="1" >Type</td>
+
+<td rowspan="1" colSpan="1" >Default Value</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`layoutTemplate`</td>
+
+<td rowspan="1" colSpan="1" >`RoomLayoutTemplate`</td>
+
+<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.GridLayout`</td>
+
+<td rowspan="1" colSpan="1" >Video stream layout</td>
+</tr>
+</table>
+
+
+`RoomLayoutTemplate` optional value analysis:
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Layout Mode</td>
+
+<td rowspan="1" colSpan="1" >Enum Value</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Grid Layout</td>
+
+<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.GridLayout`</td>
+
+<td rowspan="1" colSpan="1" >Default layout. All participant screens are evenly arranged, supports pagination when participants exceed 9 people.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Sidebar Layout</td>
+
+<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.SidebarLayout`</td>
+
+<td rowspan="1" colSpan="1" >Main screen is prominently displayed, with other participant screens arranged in a sidebar format, suitable for speeches, reports, and other scenarios.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Top Bar Layout</td>
+
+<td rowspan="1" colSpan="1" >`RoomLayoutTemplate.CinemaLayout`</td>
+
+<td rowspan="1" colSpan="1" >Main screen is prominently displayed, with other participant screens arranged in a top bar format, suitable for speeches, reports, and other scenarios.<br></td>
+</tr>
+</table>
+
+``` typescript
+<template>
+  <!-- Add layout switch buttons -->
+  <div class="layout-switcher">
+    <button @click="switchLayout(RoomLayoutTemplate.GridLayout)">Grid</button>
+    <button @click="switchLayout(RoomLayoutTemplate.SidebarLayout)">Sidebar</button>
+    <button @click="switchLayout(RoomLayoutTemplate.CinemaLayout)">Top Bar</button>
+  </div>
+  <div class="room-container">
+    <RoomView :layoutTemplate="currentLayout" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
+// Default to grid layout
+const currentLayout = ref(RoomLayoutTemplate.GridLayout);
+
+// Switch layout
+const switchLayout = (layout: RoomLayoutTemplate) => {
+  currentLayout.value = layout;
+};
+</script>
+
+<style lang="scss">
+.room-container {
+ width: 100%;
+ height: 100%;
+}
+</style>
+```
+
+### Step 3: Implement Video Stream Widget Information
+
+You can customize UI display content for video screens (e.g., set nicknames, add custom icons) by using the `participantViewUI` slot.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3728c9fce00311f09bba52540044a08e.png)
+
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Slot Parameter</td>
+
+<td rowspan="1" colSpan="1" >Type</td>
+
+<td rowspan="1" colSpan="1" >Description</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`participant`</td>
+
+<td rowspan="1" colSpan="1" >`RoomParticipant`</td>
+
+<td rowspan="1" colSpan="1" >Participant object corresponding to the current video stream, containing real-time status information such as user's `userId`, `userName`, `role`, etc.</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >`streamType`</td>
+
+<td rowspan="1" colSpan="1" >`VideoStreamType`</td>
+
+<td rowspan="1" colSpan="1" >Distinguish whether the current is camera stream (Camera) or screen share stream (Screen)</td>
+</tr>
+</table>
+
+
+#### Prepare Visual Resources
+
+To provide complete interactive feedback, it is recommended to prepare the following icons in advance:
+- Microphone status icons: Distinguish between enabled, muted, and dynamic volume bars.
+
+- Identity icons: Used to distinguish room owner (Owner), administrator (Admin), and regular members.
+
+- Network signal icons: Display real-time uplink/downlink network quality.
+   
+
+   > **Special Note:**
+   > 
+
+   > We provide copyright-free icons in the @tencentcloud/uikit-base-component-vue3 npm package in the sample project, which you can directly import and use.
+   > 
+
+
+#### Implementation Code Example
+1. Add file `ParticipantViewUI.vue` to implement UI rendering logic for a single video stream widget layer.
+
+   ``` typescript
+   <template>
+     <div class="stream-cover-container">
+       <div class="corner-user-info-container">
+         <div
+           v-if="showMasterIcon || showAdminIcon"
+           :class="{ 'master-icon': showMasterIcon, 'admin-icon': showAdminIcon }"
+         >
+           <IconUser />
+         </div>
+         <div v-if="!isScreenStream" :class="['audio-icon-container']">
+           <div class="audio-level-container">
+             <div class="audio-level" :style="audioLevelStyle" />
+           </div>
+           <IconMicOff v-if="!isMicrophoneOn" class="audio-icon" size="20" />
+           <IconMicOn v-else class="audio-icon" size="20" />
+         </div>
+         <span class="user-name" :title="displayName">
+           {{ displayName }}
+         </span>
+       </div>
+     </div>
+   </template>
+   
+   <script setup lang="ts">
+   import { computed, defineProps } from 'vue';
+   import {
+     IconUser,
+     IconMicOff,
+     IconMicOn,
+   } from '@tencentcloud/uikit-base-component-vue3';
+   import { RoomParticipantRole, DeviceStatus, VideoStreamType, useRoomParticipantState } from 'tuikit-atomicx-vue3/room';
+   import type { RoomParticipant } from 'tuikit-atomicx-vue3/room';
+   
+   interface Props {
+     participant: RoomParticipant;
+     streamType: VideoStreamType;
+   }
+   const props = defineProps<Props>();
+   
+   const { speakingUsers } = useRoomParticipantState();
+   const speakingAudioVolume = computed(() => speakingUsers.value.get(props.participant.userId) || 0);
+   const audioLevelStyle = computed(() => {
+     if (props.participant.microphoneStatus === DeviceStatus.Off || !speakingAudioVolume.value) {
+       return '';
+     }
+     return `height: ${speakingAudioVolume.value * 4}%`;
+   });
+   
+   const isMicrophoneOn = computed(() => props.participant.microphoneStatus === DeviceStatus.On);
+   const displayName = computed(() => props.participant.nameCard || props.participant.userName || props.participant.userId);
+   
+   const showMasterIcon = computed(() => {
+     const { role } = props.participant;
+     return role === RoomParticipantRole.Owner && props.streamType === VideoStreamType.Camera;
+   });
+   
+   const showAdminIcon = computed(() => {
+     const { role } = props.participant;
+     return (role === RoomParticipantRole.Admin && props.streamType === VideoStreamType.Camera);
+   });
+   </script>
+   
+   <style lang="scss" scoped>
+   .stream-cover-container {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  border-radius: 12px;  pointer-events: none;  .corner-user-info-container {    position: absolute;    bottom: 8px;    left: 8px;    display: flex;    align-content: center;    align-items: center;    box-sizing: border-box;    min-width: 118px;    max-width: calc(100% - 24px);    padding-right: 10px;    height: 32px;    overflow: hidden;    font-size: 14px;    color: var(--uikit-color-white-1);    border-radius: 16px;    background-color: var(--uikit-color-black-5);    .master-icon,    .admin-icon {      display: flex;      flex-shrink: 0;      align-items: center;      justify-content: center;      width: 32px;      height: 32px;      margin-left: 0;      border-radius: 50%;      background-color: var(--button-color-primary-default);    }    .admin-icon {      background-color: var(--text-color-warning);    }    .audio-icon-container {      margin-left: 4px;      position: relative;      width: 20px;      height: 20px;      flex-shrink: 0;      min-width: 20px;      &:first-child {        margin-left: 8px;      }      .audio-level-container {        position: absolute;        top: 2px;        left: 6px;        display: flex;        flex-flow: column-reverse wrap;        justify-content: space-between;        width: 8px;        height: 12px;        overflow: hidden;        border-radius: 4px;        .audio-level {          width: 100%;          background-color: var(--text-color-success);          transition: height 0.2s;        }      }      .audio-icon {        position: absolute;        top: 0;        left: 0;      }    }    .user-name {      margin-left: 4px;      overflow: hidden;      text-overflow: ellipsis;      white-space: nowrap;      min-width: 0;    }    .screen-icon {      flex-shrink: 0;      min-width: 0;      color: var(--uikit-color-white-1);      margin-left: 4px;      margin-right: 2px;    }    .screen-info {      margin-left: 4px;      font-size: 12px;      color: var(--uikit-color-white-1);      flex-shrink: 0;      min-width: 0;    }  }}
+   </style>
+   ```
+2. Configure `RoomView` slot to render video stream widget content on the page.
+
+   ``` typescript
+   <template>
+     <div class="room-container">
+       <RoomView :layout-template="currentLayout">
+         <template #participantViewUI="{ participant, streamType }">
+           <ParticipantViewUI :participant="participant" :stream-type="streamType" />
+         </template>
+       </RoomView>
+     </div>
+   </template>
+   
+   <script setup lang="ts">
+   import { ref } from 'vue';
+   import { RoomView, RoomLayoutTemplate } from 'tuikit-atomicx-vue3/room';
+   // Import the newly added ParticipantViewUI.vue file
+   import ParticipantViewUI from './ParticipantViewUI.vue';
+   
+   // Default to grid layout
+   const currentLayout = ref(RoomLayoutTemplate.GridLayout);
+   </script>
+   ```
+
+## API Documentation
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >**State/Component**</td>
+
+<td rowspan="1" colSpan="1" >**Feature Description**</td>
+
+<td rowspan="1" colSpan="1" >**API Documentation**</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >**useRoomParticipantState**</td>
+
+<td rowspan="1" colSpan="1" >Contains room user data and user management interface.</td>
+
+<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState)</td>
+</tr>
+</table>
+
+
+## Common Questions
+
+### **Does RoomView include screen share stream rendering?**
+
+`RoomView` has built-in remote screen share stream rendering. For local screen sharing, you need to complete local screen share placeholder UI through the `participantViewUI` slot.
+
+### Does RoomView include default UI widgets?
+
+`RoomView` has no default UI widgets internally. You can refer to [RoomView Open Source Usage Example](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts/src/components/RoomLayoutView) to quickly complete custom UI widgets.
+
+### If the layouts provided by RoomView do not meet requirements, can more optional layouts be provided?
+
+`RoomView` currently supports grid layout, sidebar, and top bar layouts. If you have customization needs, please [contact us](https://cloud.tencent.com/document/product/647/19906).