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

package/resource/doc/livekit/preset/live/vue/live-player-h5-integration.md

@@ -1,300 +0,0 @@
-This guide provides a comprehensive overview of the **Viewer Page** in the TUILiveKit Demo. Use this documentation to quickly integrate our pre-built viewer page into your project, or leverage the details here to fully customize its style, layout, and features to fit your specific needs.
-
-## Feature Overview
-
-The viewer page comes with default functionality and styling out of the box. If these defaults don’t match your requirements, you can easily tailor the UI. The numbers in the screenshot map to the main feature categories. Core features include: **stream information display, live video area, online audience, audio/video controls, live duration, resolution switching, fullscreen mode, chat interaction, and message list**.
-- **Live Video Playback**: High-definition, low-latency streaming.
-
-- **Live Comments Interaction**: Real-time live comments for audience engagement.
-
-- **Audience List**: View details about online audience members.
-
-- **Fullscreen Playback**: Immersive viewing experience.
-
-- **H5 Mobile Platform Support**: Works seamlessly across platforms.
-
-## Quick Integration
-
-### Step 1: Environment Setup and Activate the Service
-
-Before you begin, see Preparation for instructions on integrating required components and implementing login.
-
-### Step 2: Install Dependencies
-
-Install the necessary packages using your preferred package manager:
-
-【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: Integrate Viewer Page
-
-Create a `live-player.vue` file in your project. Copy and paste the following code to add the **viewer page**.
-
-> **Note：**
->
-
-> You can use the code below directly, or refer to [Audience Viewing](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/TUILiveKit/component/LivePlayer/LivePlayerPC.vue) for the full source.
->
-
-``` typescript
-<template>
-  <UIKitProvider theme="dark">
-    <div class="container">
-      <!-- Live Core Area -->
-      <section class="live">
-        <header class="header">
-          <IconArrowStrokeBack class="back-btn" size="20" />
-          <Avatar :src="currentLive?.liveOwner.avatarUrl" :size="32" class="avatar" />
-          <span class="user-name">{{ currentLive?.liveOwner.userName || currentLive?.liveOwner.userId }}</span>
-        </header>
-        <LiveCoreView class="player" />
-      </section>
-
-      <div class="sidebar">
-        <!-- Online Audience List -->
-        <section class="audience">
-          <header class="section-header">
-            <h3> Online Audience <span>({{ audienceList.length }})</span></h3>
-          </header>
-          <LiveAudienceList class="list" />
-        </section>
-
-        <!-- Message List & Input Box -->
-        <section class="barrage">
-          <header class="section-header">
-            <h3>Message List</h3>
-          </header>
-          <BarrageList class="list" />
-          <BarrageInput class="input" height="48px" />
-        </section>
-      </div>
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-import { LiveAudienceList, BarrageList, BarrageInput, useLiveAudienceState, LiveCoreView, useLiveListState, Avatar, useLoginState } from 'tuikit-atomicx-vue3';
-import { UIKitProvider, IconArrowStrokeBack } from '@tencentcloud/uikit-base-component-vue3';
-
-const { audienceList } = useLiveAudienceState();
-const { currentLive } = useLiveListState();
-const { login, setSelfInfo } = useLoginState();
-
-const liveId = 'live_xxxx'  // Enter the ID of the live stream you want to watch
-
-async function initLogin() {
-  try {
-    await login({
-      sdkAppId: 0,     // SDKAppID, refer to Step 1 for details
-      userId: '',      // UserID, refer to Step 1 for details
-      userSig: '',     // userSig, refer to Step 1 for details
-    });
-  } catch (error) {
-    console.error('Login failed:', error);
-  }
-}
-
-onMounted(async () => {
-  await initLogin();
-  await setSelfInfo({
-    userName: 'Your Name/Nickname',    // Username
-    avatarUrl: '',                     // Avatar URL
-  });
-  await joinLive({ liveId });
-});
-
-</script>
-
-<style>html,body,#app{height:100%;width:100%;margin:0;padding:0;overflow:hidden}:global(body){font-size:15px;line-height:1.6;text-rendering:optimizeLegibility;}:global(*),:global(*::before),:global(*::after){box-sizing:border-box;margin:0;}.container{display:grid;grid-template-columns:1fr 320px;height:100%;width:100%;gap:16px;padding:16px;background:var(--bg-color-default);box-sizing:border-box;overflow:hidden;}.live{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);}.header{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--stroke-color-primary);}.back-btn{cursor:pointer;color:var(--text-color-tertiary);transition:color 0.2s;}.back-btn:hover{color:var(--text-color-link-hover);}.avatar{border:1px solid var(--uikit-color-white-7);}.user-name{color:var(--text-color-primary);font-weight:500;}.player{flex:1;background:var(--uikit-color-black-1);min-height:0;}.sidebar{display:flex;flex-direction:column;gap:16px;height:100%;overflow:hidden;}.audience{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.barrage{display:flex;flex-direction:column;background:var(--bg-color-operate);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px var(--shadow-color);flex:1;min-height:0;}.section-header{padding:16px;border-bottom:1px solid var(--stroke-color-primary);background:var(--bg-color-operate);}.section-header h3{margin:0;font-size:16px;font-weight:600;color:var(--text-color-primary);}.section-header span{font-weight:400;color:var(--text-color-secondary);font-size:14px;}.list{flex:1;min-height:0;overflow-y:auto;}.input{border-top:1px solid var(--stroke-color-primary);flex-shrink:0;height:48px;}@media (max-width:1200px){.container{grid-template-columns:1fr;grid-template-rows:60% 20% 20%;gap:12px;}.sidebar{gap:12px;}.audience,.barrage{min-height:200px;}}@media (max-width:768px){.container{padding:8px;gap:8px;grid-template-rows:50% 25% 25%;}.header,.section-header{padding:12px;}.sidebar{gap:8px;}}</style>
-```
-
-#### Core API Parameters
-
-##### setSelfInfo
-
-Configure user information.
-| Parameter | Type | Required | Description |
-| --- | --- | --- | --- |
-| userName | String | Yes | User nickname, shown in the live room and chat area. |
-| avatarUrl | String | No | URL of the user's avatar image. |
-
-### Step 4: Start the Project
-
-Open your terminal, navigate to your project directory, and run the following command to launch the project. You’ll then be able to view the live stream.
-
-> **Note：**
->
-
-> After the command runs successfully, enter your local access URL in your browser (for example, `http://localhost:5173/live-player`; the port may vary based on your setup) to access the viewer page.
->
-
-``` bash
-npm run dev
-```
-
-## Play Live Stream
-
-### Step 1: Start a Live Stream
-- **Method 1 (Recommended):**
-
-   Use our [Online Hosting Website](https://web.sdk.qcloud.com/trtc/livekit/pusher/index.html) to start a live stream. After starting, copy the live stream room ID.
-
-- **Method 2:**
-
-   Integrate our Host Streaming (Web Desktop Browser) to start a live stream. After starting, copy the live stream room ID.
-
-   > **Important Tip:****：**
-   >
-
-   > Use different **userID** for hosting and viewing. If the same user ID logs in on multiple devices, the later login will force the earlier device offline (**kick offline**).
-   >
-
-### Step 2: Watch the Live Stream
-
-Refer to the sample code from Step 3 of Quick Integration. Enter the corresponding `liveId` to join the live room and view the stream.
-
-### Step 3: Router Configuration
-
-To enable navigation from the Live Stream List or homepage to the live room, configure Vue Router. In your project’s **src** directory, create a **router** folder and an **index.ts** file. Import and use the router in your main entry file (such as **main.ts** or **index.ts**). For reference, see the [GitHub code example](https://github.com/Tencent-RTC/TUILiveKit/blob/main/Web/web-vite-vue3/src/main.ts). If you need the Live Stream List feature, check the Live Stream List documentation.
-
-> **Note：**
->
-
-> In the code below, `live-player.vue` refers to the sample file created in Step 3.
->
-
-``` typescript
-// src/router/index.ts
-import { createRouter, createWebHistory } from 'vue-router';
-
-const routes = [
-  {
-    path: '/live-player',
-    component: () => import('../live-player.vue'),
-  },
-  // To add the Live Stream List feature, include the following route. Update the path as needed for your project.
-  // {
-  //   path: '/live-list',
-  //   component: () => import('../live-list.vue'),
-  // },
-];
-
-const router = createRouter({
-  history: createWebHistory(),
-  routes,
-});
-export default router;
-
-// src/main.ts
-import { createApp } from 'vue';
-import App from './App.vue';
-import router from './router';
-
-const app = createApp(App);
-app.use(router);
-app.mount('#app');
-```
-
-## Customization
-
-### Theme and Language Configuration
-
-You can change the default theme and language by setting parameters in `UIKitProvider` within `App.vue`.
-| UIKitProvider Parameter | Options | Default Value |
-| --- | --- | --- |
-| theme | "light" | "dark" |
-| language | "zh-CN" | "en-US" |
-
-``` typescript
-<UIKitProvider theme="light">
-  <router-view />
-</UIKitProvider>
-
-<script setup lang="ts">
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-```
-
-### Button and Icon Customization
-
-To add, remove, or replace buttons, icons, or other controls for UI customization, follow the example below. Use the screenshot to locate the relevant code in `live-player.vue` and update the UI as needed.
-
-You can also customize the **audience viewer page** to match your project requirements. In addition to layout adjustments, you can **add, remove, or modify** elements such as **color theme, fonts, border radius, buttons, icons, input boxes, pop-ups**, and more.
-| Category | Feature | Description |
-| --- | --- | --- |
-| Asset Management | Customize asset management area display | Adjust icon size, color, or replace icons. |
-| Live Tools | Customize live tool information display | Adjust icon size, color, or replace icons. |
-| Online Audience | Customize audience information display | Supports: - Show/hide audience level. - Customize audience info font and color. - Use your preferred icon style. |
-| Message List | Customize live comments area display | Supports: - Show/hide chat input area. - Customize chat bubble style, audience level, and more. |
-
-## FAQs
-
-### Browser Autoplay Restrictions?
-
-Modern browsers restrict autoplay for media with sound: playback must be triggered by explicit user interaction (such as a click or tap). This prevents websites from playing audio unexpectedly. Most browsers allow muted video to autoplay, but on iOS Safari in low power mode and in iOS WKWebView with custom restrictions (such as iOS WeChat browser), even muted video may be blocked.
-
-#### Autoplay Failure Handling?
-
-If a user's Media Engagement Index (MEI) for your site is below the required threshold, attempts to autoplay sound-enabled video will fail. By default, when the SDK detects autoplay failure, it displays a dialog prompting the user to interact with the page (for example, by clicking the **Confirm** button). Once the user interacts, audio playback resumes as expected.
-
-#### Customizing Autoplay Failure UI?
-
-To customize the user experience when autoplay fails (such as replacing the default popup), listen for the SDK's `onAutoplayFailed` callback. Below is a Vue3 sample that listens for the event and displays a custom dialog:
-``` java
-import TUIRoomEngine, { TUIRoomEvents } from '@tencentcloud/tuiroom-engine-js';
-import { useUIKit, TUIMessageBox } from '@tencentcloud/uikit-base-component-vue3';
-import { useRoomEngine } from 'tuikit-atomicx-vue3';
-
-const roomEngine = useRoomEngine();
-
-let isShowAutoPlayDialog = false;
-
-export default function useCustomizedAutoPlayDialog() {
-  const { t } = useUIKit();
-  TUIRoomEngine.once('ready', () => {
-    roomEngine.instance?.on(TUIRoomEvents.onAutoPlayFailed, () => {
-      if (!isShowAutoPlayDialog) {
-        isShowAutoPlayDialog = true;
-        TUIMessageBox.alert({
-          title: t('RoomCommon.Attention'),
-          content: t('RoomNotifications.AudioPlaybackFailed'),
-          showClose: false,
-          modal: false,
-          confirmText: t('Confirm'),
-          callback: () => {
-            isShowAutoPlayDialog = false;
-          },
-        });
-      }
-    });
-  });
-}
-
-export { useCustomizedAutoPlayDialog };
-```
-
-> **Note：**
->
-
-> Make sure to install the required `@tencentcloud/tuiroom-engine-js` package.
->
-
-## Next Steps
-
-You’ve now integrated the audience viewing feature. To further enhance your application, consider adding the following features:
-| Feature | Description | Integration Guide |
-| --- | --- | --- |
-| Live Stream List | Displays the live stream list interface and features, including live stream list and room information display. | Live Stream List |
-| Web Monitoring | Operations platform for live room management. | Web Monitoring Page |

package/resource/doc/roomkit/faq/common/error-code.md

@@ -1,67 +0,0 @@
----
-product: 'Room'
-tech_stack: 'roomKit'
-framework: 'common'
-title: 'RoomKit Error Code Reference'
-keywords: ['error code', 'error', 'roomKit', 'room package issue', 'microphone permission issue', 'camera/microphone issue']
----
-
-# RoomKit Error Code Reference
-
-## RoomKit Error Codes (Topic: RoomKit Error Code)
-
-## Error Code -2
-**Cause:** Operation frequency limit exceeded. Requests are too frequent, please try again later.
-**Solution:** Operation frequency limit exceeded. Requests are too frequent, please try again later.
-
-## Error Code -1002
-**Cause:** SDK not initialized.
-**Solution:** Please call the initialization interface first to complete SDK initialization.
-
-## Error Code -1004
-**Cause:** No package purchased or account is in arrears.
-**Solution:** Visit the [Tencent Cloud Console](https://console.trtc.io/subscription/buy/live) to purchase. For first-time use, you can [activate the trial version](https://trtc.io/document/60033?product=live&menulabel=uikit&platform=web).
-
-## Error Code -1101
-**Cause:** Camera permission denied.
-**Solution:** Please check your browser settings to ensure camera access is allowed. If you have confirmed permission is granted, please visit the [Audio/Video Capability Detection Tool](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) to check if your device and environment are supported.
-
-## Error Code -1105
-**Cause:** Microphone permission denied.
-**Solution:** Please check your browser settings to ensure microphone access is allowed. If you have confirmed permission is granted, please visit the [Audio/Video Capability Detection Tool](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) to check if your device and environment are supported.
-
-## Error Code -1100
-**Cause:** Failed to open camera.
-**Solution:** Please check your browser settings to ensure camera access is allowed. If you have confirmed permission is granted, please visit the [Audio/Video Capability Detection Tool](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) to check if your device and environment are supported.
-
-## Error Code -1104
-**Cause:** Failed to open microphone.
-**Solution:** Please check your browser settings to ensure microphone access is allowed. If you have confirmed permission is granted, please visit the [Audio/Video Capability Detection Tool](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) to check if your device and environment are supported.
-
-## Error Code 100007
-**Cause:** No package purchased or account is in arrears.
-**Solution:** Visit the [Tencent Cloud Console](https://console.trtc.io/subscription/buy/live) to purchase. For first-time use, you can [activate the trial version](https://trtc.io/document/60033?product=live&menulabel=uikit&platform=web).
-
-## Error Code 70001
-**Cause:** User signature has expired.
-**Solution:** It is recommended to set the signature validity period to no less than 24 hours. Refer to [Generate UserSig (User Authentication)](https://trtc.io/document/35166?product=live&menulabel=uikit&platform=web).
-
-## Error Code 70003
-**Cause:** Invalid user signature.
-**Solution:** Please regenerate. Refer to [Generate UserSig (User Authentication)](https://trtc.io/document/35166?product=live&menulabel=uikit&platform=web).
-
-## Error Code 70014
-**Cause:** SDKAppID does not match the user signature.
-**Solution:** Please verify. You can validate the signature at the [Tencent Cloud Console](https://console.trtc.io/usersig).
-
-## Error Code 5300
-**Cause:** Exception occurred while accessing device or capturing audio/video.
-**Solution:** Please visit the [Audio/Video Capability Detection Tool](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) to check if your device and environment are supported.
-
-## Error Code 5301
-**Cause:** Camera/microphone device not detected.
-**Solution:** Please ensure your camera/microphone is connected and check if the camera/microphone is available in system or browser settings.
-
-## Error Code 5302
-**Cause:** Camera/microphone permission denied.
-**Solution:** Please check your browser settings to ensure camera and microphone access is allowed. If you have confirmed permission is granted, please visit the [Audio/Video Capability Detection Tool](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) to check if your device and environment are supported.

package/resource/doc/roomkit/vue/features/call-user-to-room.md

@@ -1,220 +0,0 @@
-The in-room call feature allows users within a meeting (inviter) to send real-time invitations to users outside the room (invitees). This feature is implemented based on `Atomicx State Hooks` and helps developers quickly build interactive scenarios with proactive invitation capabilities.
-
-## Use Cases
-- **Collaborative Office:** During remote meetings, if cross-departmental decisions are involved, you can invite external experts to join the meeting with one click, shortening communication paths.
-
-- **Live Teaching:** During the teaching process, if teachers find that some students are absent, they can directly invite them to join the class.
-
-- **Internet Medical Consultation:** During case analysis, the primary physician can invite senior doctors to enter the virtual consultation room for multi-party consultation through the call feature, or doctors can call patients in the waiting room for consultations.
-
-## Prerequisites
-
-Before integrating this feature, please ensure the following conditions are met:
-- **Inviter (User A):** The user has completed login authentication through `useLoginState`, refer to Integration Overview, and is already in a room as the room owner or member, refer to Room Lifecycle.
-
-- **Invitee (User B):** The user has completed login authentication through `useLoginState`, refer to Integration Overview, to receive signaling events.
-
-- **Environment Dependencies:** The project has correctly installed and imported `tuikit-atomicx-vue3`.
-
-## Implementing In-Room Call Feature
-
-The core process for implementing in-room calls is as follows:
-
-In-room call sequence diagram
-
-### Step 1: Initiate Call (Inviter)
-
-The inviter calls the [callUserToRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#callUserToRoom) interface to initiate an invitation. Please ensure the inviter is currently in the room (i.e., [currentRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentRoom) is not empty), otherwise the call cannot be initiated.
-``` typescript
-import { useRoomState } from 'tuikit-atomicx-vue3/room';
-
-const { currentRoom, callUserToRoom } = useRoomState();
-
-const inviteUser = async () => {
-  // In-room calls must be associated with an existing roomId, so check the current user's room status first
-  if (!currentRoom.value) {
-    console.warn('Please enter a room first before initiating an invitation');
-    return;
-  }
-
-  try {
-    const resultMap = await callUserToRoom({
-      roomId: currentRoom.value.roomId, // Room ID the invitee will join
-      userIdList: ['user1', 'user2'],    // Target user ID array, supports single or multiple users
-      timeout: 60,                        // Invitation validity period (seconds), both parties will trigger onCallTimeout after timeout
-      // extensionInfo can be used to pass business custom data, such as invitation type, additional messages, etc.
-      extensionInfo: JSON.stringify({ type: 'emergency', priority: 'high' })
-    });
-
-    // resultMap returns the status corresponding to each userId, such as Success, AlreadyInRoom (already in room) or AlreadyInCalling (in call)
-    console.log('Invitation sent successfully, detailed status map:', resultMap);
-  } catch (error) {
-    console.error('Failed to send call request, please check network or login status:', error);
-  }
-};
-```
-
-### Step 2: Listen for Call Events (Invitee)
-
-The invitee needs to listen for the `onCallReceived` event. It is recommended to implement this in long-lived components such as `App.vue` to ensure the user can respond regardless of which page they are on.
-``` typescript
-import { ref, onMounted, onUnmounted } from 'vue';
-import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
-
-const {
-  subscribeEvent,
-  unsubscribeEvent,
-  acceptCall,
-  rejectCall,
-  joinRoom,
-  currentRoom
-} = useRoomState();
-
-const showInviteDialog = ref(false); // Control UI dialog visibility
-const currentCallInfo = ref(null);   // Cache the received invitation context
-
-const handleCallReceived = async ({ roomInfo, call, extensionInfo }) => {
-  // Conflict handling: If the user is currently in a meeting, according to business policy, usually should directly reject new invitations to prevent interference
-  if (currentRoom.value?.roomId) {
-    await rejectCall({ roomId: roomInfo.roomId });
-    return;
-  }
-
-  // Record invitation details for displaying inviter name or business transparent data in UI
-  currentCallInfo.value = { roomInfo, call };
-  showInviteDialog.value = true;
-};
-
-// Accept invitation logic
-const onUserAccept = async () => {
-  if (!currentCallInfo.value) return;
-  const { roomId } = currentCallInfo.value.roomInfo;
-
-  try {
-    // Key process A: Respond to signaling. Inform the inviter that it has been accepted so they can update UI (e.g., display "Other party answered")
-    await acceptCall({ roomId });
-
-    // Key process B: Execute room entry. Only by calling joinRoom will the audio and video push-pull stream link be truly opened
-    await joinRoom({ roomId });
-  } catch (error) {
-    console.error('Room entry operation failed after accepting call:', error);
-  } finally {
-    closeDialog();
-  }
-};
-
-// Reject invitation logic
-const onUserReject = async () => {
-  if (currentCallInfo.value) {
-    // Inform the inviter that it has been rejected, the inviter will receive onCallRejected event
-    await rejectCall({ roomId: currentCallInfo.value.roomInfo.roomId });
-  }
-  closeDialog();
-};
-
-const closeDialog = () => {
-  showInviteDialog.value = false;
-  currentCallInfo.value = null;
-};
-
-// Event full lifecycle management: Ensure listening on component mount and removal on destroy to prevent event overflow
-onMounted(() => {
-  subscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
-
-  // Listen for various exceptions/sync events that cause invitation to end, ensuring UI dialog can close in time
-  subscribeEvent(RoomEvent.onCallCancelled, closeDialog); // Inviter cancelled the call
-  subscribeEvent(RoomEvent.onCallTimeout, closeDialog);   // Call timed out without response
-  subscribeEvent(RoomEvent.onCallHandledByOtherDevice, closeDialog); // User already handled the call on another device
-});
-
-onUnmounted(() => {
-  // Remove all listeners to avoid continuing to execute handleCallReceived after component destruction, causing memory leaks or errors
-  unsubscribeEvent(RoomEvent.onCallReceived, handleCallReceived);
-  unsubscribeEvent(RoomEvent.onCallCancelled, closeDialog);
-  unsubscribeEvent(RoomEvent.onCallTimeout, closeDialog);
-  unsubscribeEvent(RoomEvent.onCallHandledByOtherDevice, closeDialog);
-});
-```
-
-## Practical Tutorial: Improving Call Connection Rate
-
-To achieve higher call connection rates in business scenarios, in addition to implementing basic functions, it is recommended to refer to the following strategies to optimize user experience:
-
-### 1. Enhanced Call Awareness (Avoid Users Missing Calls)
-
-Due to Web characteristics, browser mute or page running in background state may cause users to miss calls.
-- **Visual Reminder**: Use [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API) to detect page visibility status. If the page is in the background, you can implement title bar flashing prompts by cyclically modifying `document.title` (e.g.: "【New Invitation】UserA invites you to the meeting...") to attract user attention.
-
-- **Audio Reminder**: Play high-priority alert ringtone when the `onCallReceived` event is triggered. Note: Must comply with browser's [Autoplay Policy](https://developer.mozilla.org/zh-CN/docs/Web/Media/Guides/Autoplay), most browsers will restrict audio autoplay in the absence of user interaction (such as clicks, touches, or key presses).
-
-### 2. Enrich Invitation Context (Improve Answering Willingness)
-
-Invitations lacking clear intent are easily rejected by users. It is recommended to fully utilize the `extensionInfo` field to pass key business information to improve users' willingness to answer.
-- **Pass Business Context**: Use `extensionInfo` to transparently pass business fields such as `reason` (e.g.: "Project emergency review"), `level` (e.g.: "P0 troubleshooting"), etc., to inform users of the urgency and importance of the call.
-
-### 3. Multi-Channel Reach Backup (Ensure Message Delivery)
-
-Limited by Web mechanisms, when the browser process ends, real-time signaling cannot be received. It is recommended to adopt the following alternative solutions to ensure reach:
-- **Browser System Notifications**: Guide users to authorize [Web Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notification). As long as the browser process is not closed (including minimized or in background tabs), OS-level pop-up notifications can be triggered to effectively remind users.
-
-- **Multi-Channel Reach**: It is recommended to combine backend business logic to send meeting links through **SMS**, **Email**, or **Enterprise WeChat** and other external channels when detecting that users are offline or timeout without response, achieving all-around reach.
-
-### 4. Intelligent Retry Mechanism (Solve "Room Entry Failed After Accepting Invitation")
-
-In weak network or other unstable environments, calling `joinRoom` after users click accept invitation may experience occasional failures.
-- **Automatic Retry**: It is recommended to introduce 2-3 automatic retry mechanisms (recommended combined with exponential backoff strategy) in the exception handling logic (`catch`) of `onUserAccept` to maximize ensuring users can successfully join the meeting after clicking "accept".
-
-## Development Notes
-1. **Accepting Invitation Does Not Equal Entering Room**
-
-   `acceptCall` is only a signaling layer reply (informing the other party that the call has been answered). Users must manually call `await joinRoom({ roomId })` immediately after calling `acceptCall` to truly enter the audio and video room.
-
-2. **Lifecycle Management**
-
-   Please be sure to call `unsubscribeEvent` in the component destruction cycle (`onUnmounted`). If listeners are not cleaned up, when users switch pages, listeners from old pages will remain in memory, causing one invitation to pop up multiple windows or logic to execute repeatedly.
-
-3. **Timeout Settings**
-
-   If the `timeout` parameter is not set, in some network exceptions or program crash situations, invitations may remain in a suspended state for a long time, making it impossible to initiate another call to that user. It is recommended to set it to 30-60 seconds.
-
-## Common Questions
-1. **How to pass custom parameters when calling (e.g., "Emergency meeting from XX")?**
-
-   Use the `extensionInfo` parameter of `callUserToRoom` to pass a JSON string. The invitee can parse the string to obtain business information in the `extensionInfo` field of the `onCallReceived` event.
-
-2. **If the invitee is not online, can they receive the invitation after coming online?**
-
-   No. The invitation event is an instantaneous signaling action, and the SDK currently does not resend call notifications received while offline.
-
-3. **Can issued invitations be cancelled?**
-
-   Yes. Call `cancelCall({ roomId, userIdList })` to cancel. At this time, the invitee will receive the `onCallCancelled` event, and you need to listen to this event to close the UI dialog on the invitee side.
-
-4. **What to do if room entry fails after accepting?**
-
-   Check if you have logged in to `TUIRoomEngine`, retry `joinRoom({ roomId })` and capture error prompts to the user; if necessary, provide a "retry" button on the UI.
-
-5. **How to prompt when the other party is busy or already in another room?**
-
-   If `AlreadyInRoom` / `AlreadyInCalling` appears in the return value `resultMap` of `callUserToRoom`, you should prompt on the inviter UI "The other party is busy/already in a meeting" and decide whether to retry later.
-
-6. **Dialog not closing after timeout/cancellation?**
-
-   Make sure to listen to `onCallTimeout`, `onCallCancelled`, `onCallHandledByOtherDevice`, and uniformly close the dialog and clear current invitation data in the callback.
-
-7. **How to handle simultaneous ringing on multiple devices?**
-
-   After accepting/rejecting on any device, other devices will receive `onCallHandledByOtherDevice`, and you need to close dialogs on other ends to avoid repeated processing.
-
-8. **How should extensionInfo be agreed upon?**
-
-   It is recommended to use a JSON string and agree on fields (e.g., `type`, `priority`, `from`), parse and display friendly text (e.g., "Emergency meeting from XX") in `handleCallReceived`.
-
-## **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
-| **State/Component** | **Feature Description** | **API Documentation** |
-| --- | --- | --- |
-| **useRoomState** | Room state management (create, join, schedule, etc.) | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-RoomState) |