@tencent-rtc/mcp 1.3.0 → 1.3.2

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

@@ -0,0 +1,349 @@
+The scheduled room feature allows users to plan meeting times, topics, and entry passwords in advance. Through this feature, users can create future meeting plans, generate exclusive meeting numbers and entry links, making it convenient to notify participants in advance.
+
+## Use Cases
+- **Corporate Regular Meetings:** Schedule weekly and monthly meetings in advance to ensure participants receive notifications ahead of time.
+
+- **Online Class Scheduling:** Teachers can set up course schedules for the week in advance.
+
+- **Remote Interview Appointments:** HR can schedule specific time slots for interviewees and interviewers.
+
+
+## Prerequisites
+- **User Status:** The user has completed login authentication through useLoginState, refer to [Integration Overview](https://write.woa.com/document/197379797539790848), and must be in **logged in** status to initiate scheduling or view scheduled list.
+
+- **Environment Dependencies:** The project has imported `tuikit-atomicx-vue3`.
+
+
+## Implementing Scheduled Room Feature
+
+This feature provides two integration solutions. You can choose the most suitable one according to business needs:
+- **Solution 1 (Recommended):** Quick integration using UI components. Directly import the schedule room panel ([ScheduleRoomPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduleRoomPanel.vue)) and scheduled room list component ([ScheduledRoomList](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduledRoomList.vue)) provided by `tuikit-atomicx-vue3`, with the lowest development cost.
+
+- **Solution 2 (Advanced):** Custom integration using underlying API. Based on atomicx-core SDK API `useRoomState` state hook to implement UI and interaction logic yourself, with the highest flexibility.
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/87d4918de48011f0ab0f5254005ef0f7.png)
+
+
+## Solution 1: Quick Integration Using UI Components
+
+`tuikit-atomicx-vue3` provides two core components:
+- [**ScheduleRoomPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduleRoomPanel.vue)**:** Configuration panel for scheduling meetings, including time selection, member invitation, and other functions.
+
+- [**ScheduledRoomList**](https://github.com/Tencent-RTC/TUIKit_Vue3/blob/main/packages/tuikit-atomicx-vue3/src/components/ScheduleRoomPanel/ScheduledRoomList.vue)**:** Displays the current user's scheduled meeting list, supports clicking to join, modify, and cancel schedules.
+
+
+### Step 1: Import Components
+``` typescript
+import { ScheduleRoomPanel, ScheduledRoomList } from 'tuikit-atomicx-vue3/room';
+```
+
+### Step 2: Use Components
+
+In your page, you can directly combine these two components.
+``` typescript
+<template>
+  <UIKitProvider theme="light" language="zh-CN">
+    <div class="schedule-container">
+      <!-- Schedule button, displays schedule dialog after clicking -->
+      <button @click="showSchedulePanel = true">
+        Schedule Meeting
+      </button>
+
+      <!-- Schedule list component -->
+      <div class="list-container">
+        <!-- Listen to join-room event to handle joining logic -->
+        <ScheduledRoomList @join-room="handleJoinRoom" />
+      </div>
+
+      <!-- Schedule panel dialog -->
+      <!-- It is recommended to wrap it in a Dialog or Modal component -->
+      <div v-if="showSchedulePanel" class="modal-mask">
+        <div class="modal-content">
+          <ScheduleRoomPanel
+            @confirm="handleScheduleConfirm"
+            @cancel="showSchedulePanel = false"
+          />
+        </div>
+      </div>
+    </div>
+  </UIKitProvider>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
+import { ScheduleRoomPanel, ScheduledRoomList, useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { joinRoom } = useRoomState();
+
+const showSchedulePanel = ref(false);
+
+const handleScheduleConfirm = (roomId: string, options: Record<string, any>) => {
+  console.log('Schedule successful', roomId, options);
+  showSchedulePanel.value = false;
+  // Optional: Display invitation dialog or copy link
+};
+
+const handleJoinRoom = async (roomInfo: { roomId: string }) => {
+  console.log('Click to join', roomInfo.roomId);
+  await joinRoom(roomInfo.roomId); 
+};
+</script>
+
+<style scoped>
+.schedule-container{padding:24px;max-width:1000px;margin:0 auto;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}button{background-color:#006eff;color:#fff;border:none;padding:10px 20px;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s;margin-bottom:24px}button:hover{background-color:#0056cc}.list-container{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);padding:16px}.modal-mask{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.4);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background-color:#fff;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.1);padding:24px;width:100%;max-width:480px}
+</style>
+```
+
+## Solution 2: Custom Integration Using Underlying API
+
+This section mainly introduces how to implement the core logic of scheduled rooms through atomicx-core SDK API [useRoomState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) interface.
+
+![Scheduled room sequence diagram](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/8dbc9bdedfae11f08304525400454e06.png)
+
+Scheduled room sequence diagram
+
+
+### Step 1: Initiate Schedule
+
+Use the [scheduleRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#scheduleRoom) method to create a new scheduled meeting. You need to specify the meeting's start time, end time, room name, and other information.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { scheduleRoom } = useRoomState();
+
+const createSchedule = async () => {
+  try {
+    // roomId restriction: string type, required parameter, recommended to generate randomly
+    const roomId = '123456'; 
+    
+    // Note: Timestamp unit must be **seconds** (Date.getTime() gets milliseconds, need to divide by 1000)
+    const startTime = Math.floor(new Date().getTime() / 1000) + 3600; // Start after 1 hour
+    const duration = 1800; // 30 minutes
+
+    const options = {
+      roomName: 'Product Requirements Review Meeting',
+      scheduleStartTime: startTime, // Unit: seconds
+      scheduleEndTime: startTime + duration, // Unit: seconds
+      scheduleAttendees: ['userA', 'userB'], // Invited participant ID list
+      password: '123', // Optional: Set entry password
+      isAllMicrophoneDisabled: false, // Optional: Mute all microphones
+      isAllCameraDisabled: false,     // Optional: Disable all cameras
+    };
+
+    await scheduleRoom({ roomId, options });
+    console.log('Schedule successful', roomId);
+  } catch (error) {
+    console.error('Schedule failed', error);
+  }
+};
+```
+
+### Step 2: Get Scheduled List
+
+Use the [getScheduledRoomList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#getScheduledRoomList) method to retrieve the current user's scheduled meeting list. The list data will be reactively updated to the [scheduledRoomList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#scheduledRoomList) state.
+``` typescript
+import { onMounted, watch } from 'vue';
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { 
+  scheduledRoomList,      // Reactive data: scheduled meeting list
+  getScheduledRoomList    // Method: Retrieve list
+} = useRoomState();
+
+// Initialize and load list
+onMounted(async () => {
+  // cursor indicates where to start pulling data, empty string means start from beginning
+  // getScheduledRoomList return value includes new cursor
+  const { cursor } = await getScheduledRoomList({ cursor: '' }); 
+  // If cursor is not empty, it means there is more data, can continue calling to retrieve
+});
+
+// Listen for list changes and update UI in real-time
+watch(scheduledRoomList, (list) => {
+  console.log('Current scheduled list:', list);
+});
+```
+
+### Step 3: Modify Schedule
+
+If you need to adjust the time or topic of a scheduled meeting, you can use the [updateScheduledRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#updateScheduledRoom) method.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { updateScheduledRoom } = useRoomState();
+
+const updateRoom = async (roomId: string) => {
+  try {
+    const newStartTime = Math.floor(new Date().getTime() / 1000) + 7200; // Postpone by 2 hours
+    const options = {
+      roomName: 'Product Requirements Review Meeting (Rescheduled)',
+      scheduleStartTime: newStartTime,
+      scheduleEndTime: newStartTime + 1800,
+    };
+
+    await updateScheduledRoom({ roomId, options });
+    console.log('Modification successful');
+  } catch (error) {
+    console.error('Modification failed', error);
+  }
+};
+```
+
+### Step 4: Cancel Schedule
+
+If you need to cancel a scheduled meeting, you can call the [cancelScheduledRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cancelScheduledRoom) method.
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { cancelScheduledRoom } = useRoomState();
+
+const cancelRoom = async (roomId: string) => {
+  try {
+    await cancelScheduledRoom({ roomId });
+    console.log('Cancellation successful');
+    // After successful cancellation, scheduledRoomList will automatically update, no need to manually retrieve again
+  } catch (error) {
+    console.error('Cancellation failed', error);
+  }
+};
+```
+
+### Step 5: Handle Entry Password
+
+For scheduled meetings with passwords, when calling the [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#joinRoom) interface to join, you need to catch authentication failure errors and guide users to enter the password.
+``` typescript
+import { useRoomState, TUIErrorCode } from 'tuikit-atomicx-vue3/room';
+
+const { joinRoom } = useRoomState();
+
+const enterRoom = async (roomId: string, password?: string) => {
+  try {
+    await joinRoom({ roomId, password });
+  } catch (error: any) {
+    // Catch specific error code, TUIErrorCode.ERR_NEED_PASSWORD (-2010)
+    if (error.code === TUIErrorCode.ERR_NEED_PASSWORD) {
+      console.log('This room requires a password, please guide user to enter');
+      // 1. Pop up password input box
+      // 2. Get user entered password inputPassword
+      // 3. Re-call enterRoom(roomId, inputPassword)
+    } else if (error.code === TUIErrorCode.ERR_WRONG_PASSWORD) {
+      console.error('Incorrect password, please re-enter');
+    } else {
+      console.error('Join failed', error);
+    }
+  }
+};
+```
+
+### Step 6: Listen for Schedule Events
+
+In addition to passively responding to data changes, you can also listen to specific schedule events to handle business logic, such as popping up reminders when meetings are about to start.
+``` typescript
+import { onMounted, onUnmounted } from 'vue';
+import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
+
+const { subscribeEvent, unsubscribeEvent } = useRoomState();
+
+// Meeting starting soon notification (default is 5 minutes before start)
+const handleRoomStartingSoon = (info: { roomInfo: any }) => {
+  console.log('Meeting starting soon:', info.roomInfo.roomName);
+  // Can implement Toast reminder or system notification here
+};
+
+// Meeting cancelled notification
+const handleRoomCancelled = (info: { roomInfo: any; operateUser: any }) => {
+  console.log(`Meeting ${info.roomInfo.roomName} has been cancelled by ${info.operateUser.userName}`);
+};
+
+// Received new meeting invitation notification
+const handleRoomAdded = (info: { roomInfo: any }) => {
+  console.log('Received new meeting invitation:', info.roomInfo.roomName);
+};
+
+// Removed from meeting notification
+const handleRemovedFromRoom = (info: { roomInfo: any; operateUser: any }) => {
+  console.log(`You have been removed from meeting ${info.roomInfo.roomName} by ${info.operateUser.userName}`);
+};
+
+onMounted(() => {
+  // Register event listeners
+  subscribeEvent(RoomEvent.onScheduledRoomStartingSoon, handleRoomStartingSoon);
+  subscribeEvent(RoomEvent.onScheduledRoomCancelled, handleRoomCancelled);
+  subscribeEvent(RoomEvent.onAddedToScheduledRoom, handleRoomAdded);
+  subscribeEvent(RoomEvent.onRemovedFromScheduledRoom, handleRemovedFromRoom);
+});
+
+onUnmounted(() => {
+  // Remove event listeners
+  unsubscribeEvent(RoomEvent.onScheduledRoomStartingSoon, handleRoomStartingSoon);
+  unsubscribeEvent(RoomEvent.onScheduledRoomCancelled, handleRoomCancelled);
+  unsubscribeEvent(RoomEvent.onAddedToScheduledRoom, handleRoomAdded);
+  unsubscribeEvent(RoomEvent.onRemovedFromScheduledRoom, handleRemovedFromRoom);
+});
+```
+
+## Development Notes
+1. **Timestamp Unit**: All time parameters involved in the SDK (e.g., `scheduleStartTime`, `scheduleEndTime`) are in **seconds**, not milliseconds as in JavaScript's `Date` object by default. Please make sure to perform `/ 1000` operation before passing parameters.
+
+2. **Style Import**: When using UI components, make sure to import `UIKitProvider`, otherwise component styles will not render properly.
+
+3. **RoomID Recommendation**: Although `scheduleRoom` allows the frontend to pass in `roomId`, to avoid ID conflicts, it is recommended that this ID be generated by the business backend and ensure global uniqueness.
+
+4. **Pagination Handling**: The scheduled list may be very long, and the `getScheduledRoomList` interface supports paginated retrieval. Please pay attention to the `cursor` field in the return value. If it is not empty, it means there is more data.
+
+
+## Common Questions
+1. **Schedule successful but list not updating?**
+
+
+   Please confirm that you are logged in and have called `getScheduledRoomList` on the first screen (e.g., `cursor: ''`). If the returned `cursor` is not empty, you need to continue retrieving; the list is reactive and UI will synchronize after updates.
+
+2. `joinRoom`** how to pass parameters?**
+
+
+   It is recommended to use object parameters uniformly: `joinRoom({ roomId, password })`, avoid directly passing strings which may cause type mismatch or limit subsequent extensions.
+
+3. **Using milliseconds for timestamp causes appointment failure?**
+
+
+   All time-related parameters must be in seconds, `Date.now()` needs `/ 1000`, otherwise it will return time conflict error.
+
+4. **How to handle rooms with passwords?**
+
+
+   Catch `TUIErrorCode.ERR_NEED_PASSWORD` / `ERR_WRONG_PASSWORD`, pop up password input box, re-call `joinRoom({ roomId, password })`; after multiple errors, you can prompt to contact room owner to reset.
+
+5. **roomId conflict or duplication?**
+
+
+   It is recommended that roomId be generated by the backend to ensure global uniqueness; if generated by the frontend, please check for conflicts before scheduling and have a retry strategy.
+
+6. **How to continue paginated retrieval?**
+
+
+   When the `cursor` returned by `getScheduledRoomList` is not empty, continue passing it in; empty means all data has been retrieved.
+
+
+## **Sample Project**
+
+Tencent Cloud provides a sample project [atomicx-vite-vue3-ts](https://github.com/Tencent-RTC/TUIRoomKit/tree/main/Web/example/atomicx-vite-vue3-ts) on GitHub, which you can refer to for implementing complete RoomKit functionality.
+
+## 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" >**useRoomState**</td>
+
+<td rowspan="1" colSpan="1" >Room state management (create, join, schedule, etc.)</td>
+
+<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState)</td>
+</tr>
+</table>

package/resource/doc/roomkit/vue/features/screen-share.md

@@ -0,0 +1,333 @@
+This document guides you on how to use Atomicx to implement screen sharing capabilities and handle room interactions based on screen sharing status.
+
+## 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), please refer to [Room Management](https://write.woa.com/document/197379861957083136).
+
+- If integrating in `iframe`, permissions need to be declared in the tag.
+
+   ``` typescript
+   <iframe allow="display-capture; fullscreen;"></iframe>
+   ```
+
+## Implementing Screen Sharing Feature
+
+### Step 1: Start Screen Sharing
+
+Use the [startScreenShare](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#startScreenShare) method to start screen sharing. In the Web environment, you will see the browser's screen selector where you can choose to share the entire screen, application window, or browser tab.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3233e9a6dbe911f0a38652540044a08e.png)
+
+``` typescript
+import { useDeviceState } from 'tuikit-atomicx-vue3/room';
+const { startScreenShare } = useDeviceState();
+
+// Try to start screen sharing and attempt to share system audio
+const handleStartShare = async () => {
+  try {
+    await startScreenShare({ screenAudio: true });
+  } catch (error) {
+    // Handle errors such as user rejection or browser not supporting
+    console.error('Failed to start screen sharing:', error);
+  }
+};
+```
+
+### Step 2: Share System Audio
+
+By setting the `screenAudio: true` parameter, you can share system audio while screen sharing. This is very useful when sharing videos, presentations, music, and other audio content.
+
+![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/3e3557c9dbe911f0a4f35254007c27c5.png)
+
+``` typescript
+import { useDeviceState } from 'tuikit-atomicx-vue3/room';
+const { startScreenShare } = useDeviceState();
+
+// Start screen sharing and share system audio
+const handleStartScreenShareWithAudio = async () => {
+  try {
+    await startScreenShare({ screenAudio: true });
+    console.log('Screen sharing (with audio) started');
+  } catch (error) {
+    console.error('Failed to start screen sharing:', error);
+  }
+};
+```
+
+**Browser Compatibility Notes:**
+<table>
+<tr>
+<td rowspan="1" colSpan="1" >Browser</td>
+
+<td rowspan="1" colSpan="1" >System Audio Sharing Support</td>
+
+<td rowspan="1" colSpan="1" >Notes</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Chrome 74+</td>
+
+<td rowspan="1" colSpan="1" >Supported</td>
+
+<td rowspan="1" colSpan="1" >Need to check **Share audio** in selector</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Edge 79+</td>
+
+<td rowspan="1" colSpan="1" >Supported</td>
+
+<td rowspan="1" colSpan="1" >Based on Chromium, same experience as Chrome</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Firefox</td>
+
+<td rowspan="1" colSpan="1" >Not Supported</td>
+
+<td rowspan="1" colSpan="1" >System audio sharing not supported yet</td>
+</tr>
+
+<tr>
+<td rowspan="1" colSpan="1" >Safari</td>
+
+<td rowspan="1" colSpan="1" >Not Supported</td>
+
+<td rowspan="1" colSpan="1" >System audio sharing not supported yet</td>
+</tr>
+</table>
+
+
+> **Note:**
+> 
+
+> System audio sharing requires browser support, and users need to check the **Share audio** option in the screen selector. If the browser doesn't support system audio sharing, the `screenAudio` parameter will be ignored, but screen video sharing will work normally.
+> 
+
+
+### Step 3: Stop Screen Sharing
+
+Users can stop screen sharing through the following methods:
+1. **Call the **[**stopScreenShare()**](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#stopScreenShare)** interface**
+
+   ``` typescript
+   import { useDeviceState, DeviceStatus } from 'tuikit-atomicx-vue3/room';
+   const { screenStatus, stopScreenShare } = useDeviceState();
+   
+   // Stop screen sharing
+   const handleStopScreenShare = async () => {
+     try {
+       await stopScreenShare();
+       console.log('Screen sharing stopped');
+     } catch (error) {
+       console.error('Failed to stop screen sharing:', error);
+     }
+   };
+   ```
+2. **Click the browser's native "Stop sharing" button**
+
+   ![](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027337918/471f5332dbe911f0809c525400454e06.png)
+
+3. **Close the shared window or tab**
+   
+
+   > **Note:**
+   > 
+
+   > When users stop screen sharing using any method, Atomicx will automatically update the [screenStatus](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#screenStatus) state.
+   > 
+
+
+### Step 4: Permission Control and State Listening
+
+#### **Set Screen Sharing Permissions**
+
+You can control screen management permissions in the room through member management interfaces provided by [useRoomParticipantState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomParticipantState).
+``` typescript
+import { useRoomParticipantState, DeviceType } from 'tuikit-atomicx-vue3/room';
+const { disableAllDevices } = useRoomParticipantState();
+
+// Restrict screen sharing to only room owner/admin
+async function handleDisableAllScreen() {
+  await disableAllDevices({
+    deviceType: DeviceType.Screen,
+    disable: true,
+  });
+}
+
+// Allow all users in the room to initiate screen sharing
+async function handleEnableAllScreen() {
+  await disableAllDevices({
+    deviceType: DeviceType.Screen,
+    disable: false,
+  });
+}
+```
+
+#### **Automatic Layout Switching**
+
+When detecting that a user in the room has started screen sharing, it is recommended to switch to sidebar layout (`RoomLayoutTemplate.SidebarLayout`), enlarging the shared screen while displaying other participants' screens in the sidebar.
+``` typescript
+<template>
+  <div class="room-container">
+    <RoomView :layout-template="layoutTemplate">
+      <template #participantViewUI="{ participant, streamType }">
+        <ParticipantViewUI 
+          :participant="participant" 
+          :stream-type="streamType" 
+        />
+      </template>
+    </RoomView>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { 
+  RoomView, 
+  RoomLayoutTemplate,
+  useRoomParticipantState
+} from 'tuikit-atomicx-vue3/room';
+
+const layoutTemplate = ref(RoomLayoutTemplate.GridLayout);
+const { participantWithScreen } = useRoomParticipantState();
+
+// Listen for screen sharing state and automatically switch layout
+watch(participantWithScreen, (participant) => {
+  if (participant) {
+    // Someone is sharing screen, switch to sidebar layout
+    layoutTemplate.value = RoomLayoutTemplate.SidebarLayout;
+  } else {
+    // No one is sharing screen, switch back to grid layout
+    layoutTemplate.value = RoomLayoutTemplate.GridLayout;
+  }
+});
+</script>
+```
+
+#### **Restrict to One Person Screen Sharing**
+
+Only one person should be allowed to share screen in a room. When someone is sharing, disable other users' share buttons:
+``` typescript
+<script setup>
+import { computed } from 'vue';
+import { useRoomParticipantState } from 'tuikit-atomicx-vue3/room';
+
+const { participantWithScreen, localParticipant } = useRoomParticipantState();
+
+const isOtherSharing = computed(() => {
+  const sharer = participantWithScreen.value;
+  if (!sharer) return false;
+  return sharer.userId !== localParticipant.value?.userId;
+});
+
+const canStartScreenShare = computed(() => {
+  return !isOtherSharing.value;
+});
+</script>
+
+// Use in template
+<template>
+  <button :disabled="!canStartScreenShare" @click="handleStartShare">
+    Start Screen Sharing
+  </button>
+<template>
+```
+
+### Step 5: Handle Screen Sharing Errors
+
+When screen sharing encounters errors, provide appropriate prompts to users based on error messages.
+
+**Code Example:**
+``` typescript
+import { useDeviceState, DeviceError } from 'tuikit-atomicx-vue3/room';
+import { TUIToast } from '@tencentcloud/uikit-base-component-vue3';
+
+const { startScreenShare } = useDeviceState();
+
+try {
+  await startScreenShare();
+} catch (error: any) {
+  let message = '';
+  switch (error.name) {
+    case 'NotReadableError':
+      message = 'System prohibits current browser from accessing screen content, please enable screen sharing permission.';
+      break;
+    case 'NotAllowedError':
+      if (error.message.includes('Permission denied by system')) {
+        message = 'System prohibits current browser from accessing screen content, please enable screen sharing permission.';
+      } else {
+        message = 'User cancelled screen sharing';
+      }
+      break;
+    default:
+      message = 'Unknown error occurred during screen sharing, please try again.';
+      break;
+  }
+  TUIToast.warning({
+    message,
+  });
+}
+```
+
+## 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" >**useDeviceState**</td>
+
+<td rowspan="1" colSpan="1" >Contains audio/video device status, audio/video device list, and operation interfaces.</td>
+
+<td rowspan="1" colSpan="1" >[API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState)</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
+
+### Why doesn't system audio sharing work?
+- **Platform Restriction:** Audio sharing is currently only supported on modern browsers like Chrome and Edge.
+
+- **Operational Details:** Users must manually select **Share audio** in the browser's screen selector.
+
+- **System Restriction:** Some operating systems do not support sharing audio from specific **application windows**. It is recommended to prioritize selecting **entire screen** or **browser tab**.
+
+
+### How to detect when users stop screen sharing by clicking the browser's "Stop sharing" button?
+
+Atomicx automatically listens for the browser's stop sharing event and updates the `screenStatus` state. You just need to listen for changes in `screenStatus`:
+``` typescript
+watch(screenStatus, (newStatus, oldStatus) => {
+  if (oldStatus === DeviceStatus.On && newStatus === DeviceStatus.Off) {
+    console.log('User has stopped screen sharing.');
+  }
+});
+```
+
+### Do mobile browsers support screen sharing?
+
+Only desktop browsers support screen sharing. Mobile browsers do not support screen sharing capabilities.
+
+### Why does the user's microphone status display as "on" when they enable screen sharing audio?
+
+This is expected system behavior for the following reasons:
+
+**Technical Principle:**`microphoneStatus` indicates whether the current device is transmitting audio signals externally. When screen sharing is enabled and **system audio capture is checked**, Atomicx SDK will start an audio transmission channel. Since the remote end receives a continuous audio data stream, the system cannot distinguish whether the audio source is from a physical microphone or system playback sound, so the audio capture status is uniformly marked as `DeviceStatus.On`.
+
+**Privacy Note:** Please rest assured, this does not mean your microphone is capturing voice. Whether the microphone voice is being pushed is only related to microphone control interfaces (`openLocalMicrophone` and `unmuteLocalMicrophone`), and is independent of screen sharing audio capture. Even if screen sharing audio is being transmitted, as long as microphone-related interfaces are not called, your microphone voice will not be captured and pushed.