@tencent-rtc/mcp 1.7.2 → 1.7.4

package/resource/knowledge/roomkit/best-practice/vue/screen-share-auto-stop-on-leave.md

@@ -0,0 +1,62 @@
+---
+title: Whether Screen Sharing Stops Automatically When Leaving the Room/Ending the Meeting in TUIRoomKit Vue3
+product: room
+frameworks: [vue, web]
+scope: platform_specific
+tags: [TUIRoomKit, screen share, stopScreenShare, startScreenShare, leaveRoom, endRoom, leave room, end meeting, close browser, useDeviceState, useRoomState, screenStatus, vue3, Atomicx]
+version_range: ">=2.0.0"
+---
+
+# Whether Screen Sharing Stops Automatically When Leaving the Room/Ending the Meeting in TUIRoomKit Vue3
+
+## 1. Key Conclusions
+
+- Leaving the room (`leaveRoom`), ending the meeting (`endRoom`), and exit actions such as closing the browser or closing the web page all automatically end the current screen share. The business side does not need to manually call `stopScreenShare` again.
+- Screen sharing is part of the room session: leaving the room releases the user's sharing channel, and screen sharing stops accordingly.
+- No extra cleanup code is needed to "stop screen sharing when leaving the room." You only need to explicitly call `stopScreenShare` when **actively stopping** screen sharing during the meeting (without leaving the room).
+- This behavior is consistent between UI-less integration (`tuikit-atomicx-vue3`) and integration with UI (`@tencentcloud/roomkit-web-vue3`).
+
+## 2. Field/Capability Reference
+
+| Field/Capability | Purpose | Notes |
+|---|---|---|
+| `startScreenShare` | Starts screen sharing | Provided by `useDeviceState()`; once started, the share is visible to other room members |
+| `stopScreenShare` | Stops screen sharing | Only needs to be called explicitly when **actively stopping during the meeting without leaving the room** |
+| `screenStatus` | Screen share status | Provided by `useDeviceState()`; `DeviceStatus.On` indicates sharing is active |
+| `leaveRoom` | Leave the room | A member exits the room; the member's screen share ends automatically |
+| `endRoom` | End the meeting | The host dismisses the room; screen sharing ends automatically |
+| Close browser/web page | Abnormal/normal exit | Disconnects the room session; screen sharing ends accordingly |
+
+## 3. Mechanism/Sequence
+
+The user starts screen sharing during the meeting (`startScreenShare`, `screenStatus = On`) -> an exit action is triggered (`leaveRoom` / `endRoom` / closing the browser or web page) -> the room session disconnects and the user's sharing channel is released -> screen sharing stops automatically, and other room members no longer see the shared content.
+
+## 4. Standard Usage
+
+1. Start screen sharing during the meeting: call `startScreenShare` from `useDeviceState()`.
+2. To stop sharing **without leaving the room**: explicitly call `stopScreenShare`.
+3. When the user leaves the room: just call `leaveRoom` (or the host calls `endRoom`); screen sharing ends automatically, and there is no need to call `stopScreenShare` first.
+4. Exit scenarios such as closing the browser / closing the web page: no extra handling is needed; screen sharing ends automatically as the room session disconnects.
+
+## 5. Result Verification
+
+- After calling `leaveRoom` / `endRoom`, the user's screen share stops and the shared content disappears for other room members.
+- After closing the browser or web page, other room members no longer receive the user's screen-sharing stream.
+- When staying in the room and calling only `stopScreenShare`, screen sharing stops while the user remains in the room.
+
+## 6. Common Pitfalls
+
+- Pitfall 1: Assuming you must manually call `stopScreenShare` before leaving, otherwise the screen share lingers (leaving the room ends the share automatically).
+- Pitfall 2: Assuming screen sharing continues after closing the browser/web page (the share ends once the room session disconnects).
+- Pitfall 3: Conflating the responsibilities of `leaveRoom`/`endRoom` with `stopScreenShare` (the former leaves the room and cleans up automatically; the latter only stops sharing without leaving the room).
+
+## 7. Problem Definition (Retrieval Aid, Minimal)
+
+In TUIRoomKit Vue3, whether screen sharing stops automatically when the user calls `leaveRoom`/`endRoom` or closes the browser/web page.
+
+## 8. Synonymous Phrasing Coverage (Retrieval Recall, Minimal)
+
+- Does `leaveRoom` / `endRoom` automatically `stopScreenShare`?
+- Does screen sharing continue after leaving the room?
+- Does screen sharing end automatically after closing the browser/web page?
+- Do I need to manually stop screen sharing before leaving the room?

package/resource/knowledge/roomkit/core-sdk/react/network-proxy.md

@@ -0,0 +1,83 @@
+The Conference SDK is built on Tencent Cloud Chat (IM) and Tencent Real-Time Communication (TRTC). It supports configuring the IM and TRTC proxies together in intranet / firewall environments, which is suitable for scenarios such as private deployment and enterprise intranet isolation where a direct connection to Tencent Cloud services is not available.
+
+## Proxy architecture
+
+|Proxy server|Proxy link|
+|---------|---------|
+|IM proxy|Proxies the signaling channels for IM login, message sending/receiving, etc. (WebSocket), as well as the upload and download of resources such as chat images and files.|
+|TRTC WebSocket proxy (e.g. Nginx)|Proxies the signaling channels for TRTC room entry, control, etc. (WebSocket), and is responsible for room management and user state synchronization.|
+|TRTC TURN Server|Relays TRTC audio and video media streams.|
+
+> **Note:**
+> The proxy servers (IM proxy, Nginx, TURN) need to be deployed by yourself. For how to set them up, see [TRTC Web SDK handling firewall restrictions](https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-34-advanced-proxy.html).
+>
+
+## API and parameters
+
+The Conference SDK allows you to configure the intranet proxy uniformly through the `callExperimentalAPI` interface before calling `login()`:
+``` typescript
+callExperimentalAPI({
+  api: 'setNetworkProxy',
+  params: {
+    im?: { /* IM proxy parameters */ },
+    rtc?: { /* TRTC proxy parameters */ },
+  },
+});
+```
+
+### IM proxy parameters
+
+|Parameter|Type|Description|
+|---------|---------|---------|
+|`proxyServer`|String|IM signaling WebSocket proxy address.|
+|`fileUploadProxy`|String|IM file upload proxy address.|
+|`fileDownloadProxy`|String|IM file download proxy address.|
+
+### TRTC proxy parameters
+
+|Parameter|Type|Description|
+|---------|---------|---------|
+|`websocketProxy`|String|TRTC signaling WebSocket proxy address, e.g. `wss://proxy.example.com/ws/`.|
+|`turnServer`|Array|List of TURN servers. Each item contains `url` / `username` / `credential`.|
+|`iceTransportPolicy`|`'relay' \| 'all'`|Client-side ICE transport policy. In an intranet environment, it is recommended to set it to `'relay'` to force a connection to the TURN server.|
+
+## Sample code
+
+``` typescript
+import { callExperimentalAPI } from 'tuikit-atomicx-react';
+import { useLoginState, useRoomState } from 'tuikit-atomicx-react/room';
+
+callExperimentalAPI({
+  api: 'setNetworkProxy',
+  params: {
+    im: {
+      proxyServer: 'wss://proxy.example.com:8080',
+      fileUploadProxy: 'https://proxy.example.com:8080',
+      fileDownloadProxy: 'https://proxy.example.com:8080',
+    },
+    rtc: {
+      websocketProxy: 'wss://proxy.example.com/ws/',
+      turnServer: [
+        { url: '14.3.3.3:3478', username: 'turn', credential: 'turn' },
+      ],
+      iceTransportPolicy: 'relay',
+    },
+  },
+});
+
+const { login } = useLoginState();
+await login({ sdkAppId, userId, userSig });
+
+const { createAndJoinRoom } = useRoomState();
+await createAndJoinRoom({ roomId });
+```
+
+## FAQs
+
+### A user can join the conference normally on the public network, but cannot join it on the intranet?
+
+Check whether `setNetworkProxy` was called before `login()`. If it is already configured but still fails, check the TURN port and the outbound allowlist of the proxy server.
+
+### A user can join the conference but cannot see the remote video or hear the remote audio?
+
+Confirm that `turnServer` is reachable, and set `iceTransportPolicy` to `'relay'` in an intranet environment.

package/resource/knowledge/roomkit/core-sdk/vue/network-proxy.md

@@ -0,0 +1,83 @@
+The Conference SDK is built on Tencent Cloud Chat (IM) and Tencent Real-Time Communication (TRTC). It supports configuring the IM and TRTC proxies together in intranet / firewall environments, which is suitable for scenarios such as private deployment and enterprise intranet isolation where a direct connection to Tencent Cloud services is not available.
+
+## Proxy architecture
+
+|Proxy server|Proxy link|
+|---------|---------|
+|IM proxy|Proxies the signaling channels for IM login, message sending/receiving, etc. (WebSocket), as well as the upload and download of resources such as chat images and files.|
+|TRTC WebSocket proxy (e.g. Nginx)|Proxies the signaling channels for TRTC room entry, control, etc. (WebSocket), and is responsible for room management and user state synchronization.|
+|TRTC TURN Server|Relays TRTC audio and video media streams.|
+
+> **Note:**
+> The proxy servers (IM proxy, Nginx, TURN) need to be deployed by yourself. For how to set them up, see [TRTC Web SDK handling firewall restrictions](https://web.sdk.qcloud.com/trtc/webrtc/v5/doc/zh-cn/tutorial-34-advanced-proxy.html).
+>
+
+## API and parameters
+
+The Conference SDK allows you to configure the intranet proxy uniformly through the `callExperimentalAPI` interface before calling `login()`:
+``` typescript
+callExperimentalAPI({
+  api: 'setNetworkProxy',
+  params: {
+    im?: { /* IM proxy parameters */ },
+    rtc?: { /* TRTC proxy parameters */ },
+  },
+});
+```
+
+### IM proxy parameters
+
+|Parameter|Type|Description|
+|---------|---------|---------|
+|`proxyServer`|String|IM signaling WebSocket proxy address.|
+|`fileUploadProxy`|String|IM file upload proxy address.|
+|`fileDownloadProxy`|String|IM file download proxy address.|
+
+### TRTC proxy parameters
+
+|Parameter|Type|Description|
+|---------|---------|---------|
+|`websocketProxy`|String|TRTC signaling WebSocket proxy address, e.g. `wss://proxy.example.com/ws/`.|
+|`turnServer`|Array|List of TURN servers. Each item contains `url` / `username` / `credential`.|
+|`iceTransportPolicy`|`'relay' \| 'all'`|Client-side ICE transport policy. In an intranet environment, it is recommended to set it to `'relay'` to force a connection to the TURN server.|
+
+## Sample code
+
+``` typescript
+import { callExperimentalAPI } from 'tuikit-atomicx-vue3';
+import { useLoginState, useRoomState } from 'tuikit-atomicx-vue3/room';
+
+callExperimentalAPI({
+  api: 'setNetworkProxy',
+  params: {
+    im: {
+      proxyServer: 'wss://proxy.example.com:8080',
+      fileUploadProxy: 'https://proxy.example.com:8080',
+      fileDownloadProxy: 'https://proxy.example.com:8080',
+    },
+    rtc: {
+      websocketProxy: 'wss://proxy.example.com/ws/',
+      turnServer: [
+        { url: '14.3.3.3:3478', username: 'turn', credential: 'turn' },
+      ],
+      iceTransportPolicy: 'relay',
+    },
+  },
+});
+
+const { login } = useLoginState();
+await login({ sdkAppId, userId, userSig });
+
+const { createAndJoinRoom } = useRoomState();
+await createAndJoinRoom({ roomId });
+```
+
+## FAQs
+
+### A user can join the conference normally on the public network, but cannot join it on the intranet?
+
+Check whether `setNetworkProxy` was called before `login()`. If it is already configured but still fails, check the TURN port and the outbound allowlist of the proxy server.
+
+### A user can join the conference but cannot see the remote video or hear the remote audio?
+
+Confirm that `turnServer` is reachable, and set `iceTransportPolicy` to `'relay'` in an intranet environment.

package/resource/knowledge/roomkit/core-sdk/vue/recording.md

@@ -0,0 +1,245 @@
+This document guides developers in implementing cloud recording in the no-UI integration solution for standard meetings. You can control the start and stop of recording through `startRecording()` / `stopRecording()` provided by `useRoomState()`, and monitor recording state changes in real time through `currentRoom.recordingInfo` and `RoomEvent`.
+
+> **Version note:**
+>
+> The cloud recording interfaces (`startRecording` / `stopRecording`) are supported since **tuikit-atomicx-vue3 6.4.0** and **tuikit-atomicx-react 6.2.0**. Make sure the version you use meets the requirement.
+>
+
+## Prerequisites
+- The user has completed login authentication through `useLoginState`.
+
+- The user has entered a standard meeting room through `useRoomState`.
+
+- Cloud recording package activation and storage configuration have been completed:
+
+  - Purchase a Conference SDK package that includes cloud recording capability.
+
+  - Enable the recording file storage service: Recording files can be stored in [Cloud VOD (VOD)](https://console.cloud.tencent.com/vod) or [Cloud Object Storage (COS)](https://console.cloud.tencent.com/cos). Complete the activation in the corresponding console and record the storage information.
+
+  - [Submit a ticket](https://console.cloud.tencent.com/workorder/category), select the **Real-Time Communication** product, and apply to configure the cloud recording storage information for your SDKAppID.
+
+## Recording effect
+
+The Conference SDK uses **mixed-stream recording** mode by default, mixing the audio and video streams published in the room into one complete recording file. The recording layout **switches automatically** with the in-meeting state, and the recording task is not restarted during the switch:
+
+|**In-meeting state**|**Mixed-stream layout**|**Maximum number of views**|
+|---------|---------|---------|
+|No screen sharing / whiteboard|Grid layout|Up to **25** video views|
+|With screen sharing / whiteboard|Screen sharing layout (sharing as the main view)|Up to **1** screen sharing + **16** video views|
+|Audio only|-|—|
+
+## Interface description
+
+Conference SDK no-UI integration provides recording control and state subscription capabilities through `useRoomState()`. The recording task is fully managed by the server, and the client is only responsible for starting and stopping it.
+
+|**Type**|**Name**|**Description**|
+|---------|---------|---------|
+|Method|`startRecording(): Promise<void>`|Starts cloud recording. Only the **room owner or administrator** can call it, and it must be called after successfully entering the room.|
+|Method|`stopRecording(): Promise<void>`|Stops cloud recording. Only the **room owner or administrator** can call it.|
+|State|`currentRoom.recordingInfo`|The recording information of the current room, including the `status` field (`RecordingStatus.Recording` indicates recording in progress).|
+|Event|`RoomEvent.onRecordingStarted`|Triggered when the recording task starts successfully. The callback parameter is `{ roomInfo, operator }`.|
+|Event|`RoomEvent.onRecordingStopped`|Triggered when the recording task stops. The callback parameter is `{ roomInfo, operator, reason }`. `reason` can distinguish between active stop and abnormal interruption.|
+
+## Step 1: Start cloud recording
+
+### Permission requirements
+
+Only the **room owner or administrator** can call `startRecording()`; other roles calling it will throw a permission error. Only one recording task can exist in the same room at a time, and repeated calls will also return an error.
+
+### Sample code
+
+【Vue3】
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { startRecording } = useRoomState();
+
+await startRecording();
+```
+
+【React】
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-react/room';
+
+const { startRecording } = useRoomState();
+
+await startRecording();
+```
+
+### Error handling
+
+`startRecording()` throws an error when it fails. Common error cases are as follows:
+
+|**Error code**|**Meaning**|**Suggested handling**|
+|---------|---------|---------|
+|`100001`|Backend system error.|Retry later; if it persists, submit a ticket for investigation.|
+|`100004`|The room does not exist.|Confirm that you have successfully entered the room through `createAndJoinRoom()` or `joinRoom()` before calling the recording interface.|
+|`100006`|No permission; must be the room owner or administrator.|Check the current user role; only the room owner or administrator can start recording.|
+|`101072`|The recording configuration does not exist or is not enabled.|Confirm that you have completed the console package activation, ticket configuration, and value-added feature switch. .|
+
+【Vue3】
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { startRecording } = useRoomState();
+
+try {
+  await startRecording();
+} catch (error: any) {
+  switch (error?.code) {
+    case 100001:
+      console.error('Backend system error, please retry later.');
+      break;
+    case 100004:
+      console.error('The room does not exist, please confirm you have entered the room before starting recording.');
+      break;
+    case 100006:
+      console.error('Insufficient permission, only the room owner or administrator can start recording.');
+      break;
+    case 101072:
+      console.error('The recording configuration does not exist or is not enabled, please check the console activation configuration.');
+      break;
+    default:
+      console.error('Failed to start recording:', error);
+  }
+}
+```
+
+【React】
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-react/room';
+
+const { startRecording } = useRoomState();
+
+try {
+  await startRecording();
+} catch (error: any) {
+  switch (error?.code) {
+    case 100001:
+      console.error('Backend system error, please retry later.');
+      break;
+    case 100002:
+      console.error('Parameter error, please check the passed parameters.');
+      break;
+    case 100004:
+      console.error('The room does not exist, please confirm you have entered the room before starting recording.');
+      break;
+    case 100006:
+      console.error('Insufficient permission, only the room owner or administrator can start recording.');
+      break;
+    case 101072:
+      console.error('The recording configuration does not exist or is not enabled, please check the console activation configuration.');
+      break;
+    default:
+      console.error('Failed to start recording:', error);
+  }
+}
+```
+
+## Step 2: Stop cloud recording
+
+### Preconditions
+
+There is a recording task in progress (`RecordingStatus.Recording`) in the current room.
+
+### Permission requirements
+
+Only the **room owner or administrator** can call `stopRecording()`.
+
+### Sample code
+
+【Vue3】
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-vue3/room';
+
+const { stopRecording } = useRoomState();
+
+try {
+  await stopRecording();
+} catch (error: any) {
+  console.error('Failed to stop recording:', error);
+}
+```
+
+【React】
+``` typescript
+import { useRoomState } from 'tuikit-atomicx-react/room';
+
+const { stopRecording } = useRoomState();
+
+try {
+  await stopRecording();
+} catch (error: any) {
+  console.error('Failed to stop recording:', error);
+}
+```
+
+## Step 3: Monitor recording state changes
+
+### Preconditions
+- You have successfully entered the room.
+
+- It is recommended to subscribe to events **immediately** after entering the room to avoid missing recording notifications initiated by other ends (such as a mobile room owner).
+
+### Sample code
+
+【Vue3】
+``` typescript
+import { useRoomState, RecordingStatus, RecordingStopReason, RoomEvent } from 'tuikit-atomicx-vue3/room';
+
+const { currentRoom, subscribeEvent } = useRoomState();
+
+// Actively query the current recording state
+const isRecording = currentRoom.value?.recordingInfo?.status === RecordingStatus.Recording;
+
+// Listen for recording start
+subscribeEvent(RoomEvent.onRecordingStarted, ({ operator }) => {
+  console.log('Recording started, operator:', operator.userId);
+});
+
+// Listen for recording stop
+subscribeEvent(RoomEvent.onRecordingStopped, ({ operator, reason }) => {
+  if (reason === RecordingStopReason.StoppedByUser) {
+    console.log('Recording stopped, operator:', operator.userId);
+  } else if (reason === RecordingStopReason.RecorderLeftRoom) {
+    console.warn('Recording interrupted abnormally, the recording robot has left the room. Restart recording if needed.');
+  }
+});
+```
+
+【React】
+``` typescript
+import { useRoomState, RecordingStatus, RecordingStopReason, RoomEvent } from 'tuikit-atomicx-react/room';
+
+const { currentRoom, subscribeEvent } = useRoomState();
+
+// Actively query the current recording state
+const isRecording = currentRoom?.recordingInfo?.status === RecordingStatus.Recording;
+
+// Listen for recording start
+subscribeEvent(RoomEvent.onRecordingStarted, ({ operator }) => {
+  console.log('Recording started, operator:', operator.userId);
+});
+
+// Listen for recording stop
+subscribeEvent(RoomEvent.onRecordingStopped, ({ operator, reason }) => {
+  if (reason === RecordingStopReason.StoppedByUser) {
+    console.log('Recording stopped, operator:', operator.userId);
+  } else if (reason === RecordingStopReason.RecorderLeftRoom) {
+    console.warn('Recording interrupted abnormally, the recording robot has left the room. Restart recording if needed.');
+  }
+});
+```
+
+### Error cases
+
+The `reason` field of the `onRecordingStopped` event identifies the reason the recording stopped:
+
+|**Enum value**|**Value**|**Description**|
+|---------|---------|---------|
+|`RecordingStopReason.StoppedByUser`|`0`|The room owner or administrator actively called `stopRecording()` for a normal stop.|
+|`RecordingStopReason.RecorderLeftRoom`|`1`|The recording robot left the room abnormally and the recording was interrupted. It is recommended to prompt the user and decide whether to restart recording based on business needs.|
+
+> **Note:**
+> - The cloud recording feature requires completing package purchase, storage service activation, and ticket configuration in advance. Confirm that you have completed all steps in the **Prerequisites** of this document.
+> - Recording files are stored in the Cloud VOD (VOD) or Cloud Object Storage (COS) you configured. Go to the corresponding console to view and manage them.

package/resource/knowledge/roomkit/core-sdk/vue/whiteboard-annotation.md

@@ -0,0 +1,196 @@
+This document introduces how to use the Atomicx API to integrate whiteboard or screen sharing annotation into your own meeting UI.
+
+First, choose the feature you want to implement:
+
+|Goal|Do you need to start screen sharing first|Integration order|
+|---------|---------|---------|
+|Whiteboard: Write on a blank canvas|No|Once the display area is ready, call `startWhiteboard`|
+|Screen sharing annotation: Annotate on the screen sharing view|Yes|Call `startScreenShare` first, then call `startWhiteboard`|
+
+> **Note:**
+> **To integrate screen sharing annotation, you do not need to integrate the standalone whiteboard first.** Both features use `startWhiteboard` to create the drawing layer, but their integration flows are independent of each other. Choose one according to your business goal.
+>
+
+## Preparation
+
+Before you start, please confirm:
+- User state: The user has completed login authentication through `useLoginState` (see Integration overview) and is already in a room as the owner or a member of that room (see Room management).
+
+- Environment dependency: The project has correctly installed and imported `tuikit-atomicx-vue3` (Vue 3), version `6.1.0` or later.
+
+- Use the latest stable versions of Chrome and Edge on Windows or macOS desktops.
+
+   The "display area" in the code in this document is a `<div>` on the page used to display the whiteboard or shared view. After setting its `id`, pass that `id` to the API. It determines both where the content is displayed and the display size, and you do not need to understand the internal implementation of the whiteboard.
+
+## Integrating the whiteboard
+
+The whiteboard does not depend on screen sharing. Prepare a display area, and when the user clicks "Open whiteboard", pass its `id` to `startWhiteboard`:
+``` typescript
+<template>
+  <button @click="openWhiteboard">Open whiteboard</button>
+  <div id="whiteboard-view" class="content-view" />
+</template>
+
+<script setup lang="ts">
+import { useWhiteboardState } from 'tuikit-atomicx-vue3/room';
+
+const { startWhiteboard } = useWhiteboardState();
+
+async function openWhiteboard() {
+  await startWhiteboard({
+    view: 'whiteboard-view',
+    canvasColor: '#FFFFFF',
+  });
+}
+</script>
+
+<style scoped>
+.content-view {
+  position: relative;
+  width: 100%;
+  height: 600px;
+  background: #fff;
+}
+</style>
+```
+
+After the call succeeds, the current user can draw in that area, and other members in the room will see the whiteboard view in real time.
+
+## Integrating screen sharing annotation
+
+Screen sharing annotation adds a transparent drawing layer on top of the shared view. The whole flow has only two steps:
+1. Display the screen sharing view in a `<div>` on the page.
+
+2. Pass the `id` of the same `<div>` to `startWhiteboard` so that the strokes overlay the shared view.
+
+   The following example provides two buttons, "Start sharing" and "Start annotation":
+
+   ``` typescript
+   <template>
+     <button @click="shareScreen">Start sharing</button>
+     <button @click="openAnnotation">Start annotation</button>
+     <div id="screen-share-view" class="content-view" />
+   </template>
+
+   <script setup lang="ts">
+   import {
+     DeviceStatus,
+     useDeviceState,
+     useWhiteboardState,
+   } from 'tuikit-atomicx-vue3/room';
+
+   const { screenStatus, startScreenShare } = useDeviceState();
+   const { startWhiteboard } = useWhiteboardState();
+
+   async function shareScreen() {
+     await startScreenShare({
+       screenAudio: true,
+       view: 'screen-share-view',
+     });
+   }
+
+   async function openAnnotation() {
+     if (screenStatus.value !== DeviceStatus.On) {
+       throw new Error('Please start screen sharing first');
+     }
+
+     await startWhiteboard({
+       view: 'screen-share-view',
+     });
+   }
+   </script>
+
+   <style scoped>
+   .content-view {
+     position: relative;
+     width: 100%;
+     height: 600px;
+   }
+   </style>
+   ```
+
+## Adding drawing tools
+
+The whiteboard and screen sharing annotation use the same set of tool APIs. Just connect the methods below to your toolbar buttons:
+``` typescript
+import {
+  useWhiteboardState,
+  WhiteboardTool,
+} from 'tuikit-atomicx-vue3/room';
+
+const {
+  setToolConfig,
+  undo,
+  redo,
+  clear,
+  snapshot,
+} = useWhiteboardState();
+
+// Pen
+setToolConfig({
+  tool: WhiteboardTool.Pen,
+  color: '#006EFF',
+  lineWidth: 4,
+});
+
+// Rectangle
+setToolConfig({
+  tool: WhiteboardTool.Shape,
+  shapeType: 'rect',
+  color: '#006EFF',
+  lineWidth: 4,
+});
+
+await undo();           // Undo
+await redo();           // Redo
+await clear();          // Clear
+const image = await snapshot();
+```
+
+The available tools include:
+
+|Tool|Enum value|Purpose|
+|---------|---------|---------|
+|Select|`WhiteboardTool.None`|Stop drawing.|
+|Pen|`WhiteboardTool.Pen`|Free-form writing.|
+|Laser pointer|`WhiteboardTool.Laser`|Disappears automatically after a short stay.|
+|Shape|`WhiteboardTool.Shape`|Draw a rectangle or ellipse through `shapeType`.|
+|Arrow|`WhiteboardTool.Arrow`|Mark a direction or key point.|
+|Eraser|`WhiteboardTool.EraserObject`|Erase graphic objects.|
+
+When drawing a shape, set `shapeType` in the same configuration object: `rect` for a rectangle and `ellipse` for an ellipse.
+
+## Hiding the whiteboard and annotation entries
+
+When closing the whiteboard or annotation, call `stopWhiteboard`:
+``` typescript
+const { stopWhiteboard } = useWhiteboardState();
+
+stopWhiteboard();
+```
+
+## Updating the whiteboard display area
+
+When you need to switch the whiteboard to another display area, you can call `updateWhiteboard` and pass in the new element id.
+``` typescript
+const { updateWhiteboard } = useWhiteboardState();
+
+updateWhiteboard({ view: 'whiteboard-new-view' });
+```
+
+## Scope of use
+- Does not yet support mobile browsers and webinar (Webinar) rooms.
+
+- Currently, the initiator draws while other members watch in real time; simultaneous drawing by multiple people is not yet supported.
+
+- The whiteboard and regular screen sharing use the same sharing channel and cannot be enabled at the same time.
+
+## FAQs
+
+### Why is no content displayed on the page after calling `startWhiteboard`?
+
+Please confirm that when calling it you passed the `id` of the display area through `view`, and that the corresponding `<div>` exists on the page. If the element is mounted later, call `updateWhiteboard({ view })` after the whiteboard is started.
+
+### Can the whiteboard and regular screen sharing be enabled at the same time?
+
+No. The whiteboard and regular screen sharing use the same sharing channel; screen sharing annotation, on the other hand, overlays a drawing layer on top of the screen sharing view, which is a supported combination.