@tencent-rtc/mcp 1.3.9 → 1.4.0

package/resource/doc/roomkit/vue/faq.md

@@ -0,0 +1 @@
+

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

@@ -7,26 +7,21 @@ The in-room call feature allows users within a meeting (inviter) to send real-ti
 
 - **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](https://write.woa.com/document/197379797539790848), and is already in a room as the room owner or member, refer to [Room Lifecycle](https://write.woa.com/document/197379861957083136).
+- **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](https://write.woa.com/document/197379797539790848), to receive signaling events.
+- **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](https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100027160512/82ba8603dee611f0a4f35254007c27c5.png)
-
 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.
@@ -48,9 +43,9 @@ const inviteUser = async () => {
       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' }) 
+      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) {
@@ -66,13 +61,13 @@ The invitee needs to listen for the `onCallReceived` event. It is recommended to
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useRoomState, RoomEvent } from 'tuikit-atomicx-vue3/room';
 
-const { 
-  subscribeEvent, 
-  unsubscribeEvent, 
-  acceptCall, 
-  rejectCall, 
-  joinRoom, 
-  currentRoom 
+const {
+  subscribeEvent,
+  unsubscribeEvent,
+  acceptCall,
+  rejectCall,
+  joinRoom,
+  currentRoom
 } = useRoomState();
 
 const showInviteDialog = ref(false); // Control UI dialog visibility
@@ -98,9 +93,9 @@ const onUserAccept = async () => {
   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 }); 
+    await joinRoom({ roomId });
   } catch (error) {
     console.error('Room entry operation failed after accepting call:', error);
   } finally {
@@ -125,7 +120,7 @@ const closeDialog = () => {
 // 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
@@ -152,13 +147,11 @@ Due to Web characteristics, browser mute or page running in background state may
 
 - **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:
@@ -166,91 +159,62 @@ Limited by Web mechanisms, when the browser process ends, real-time signaling ca
 
 - **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
-<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>
+| **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) |

package/resource/doc/roomkit/vue/features/device-detection.md

@@ -9,10 +9,8 @@ Device preview is an important part of ensuring the smooth operation of audio/vi
 
 - **Speaker Calibration**: Confirm output device and volume settings by playing test audio.
 
-
 ## 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).
-
+- 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.
 
 ## Implementing Device Detection Features
 
@@ -36,13 +34,13 @@ Use the [startCameraTest](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.
     <!-- Camera selection -->
     <div class="camera-selector">
       <label>Select Camera</label>
-      <select 
-        :value="currentCamera?.deviceId" 
+      <select
+        :value="currentCamera?.deviceId"
         @change="handleCameraChange"
         :disabled="isCameraTestLoading"
       >
-        <option 
-          v-for="camera in cameraList" 
+        <option
+          v-for="camera in cameraList"
           :key="camera.deviceId"
           :value="camera.deviceId"
         >
@@ -54,7 +52,7 @@ Use the [startCameraTest](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.
     <!-- Control buttons -->
     <div class="control-buttons">
       <button @click="getCameraList">Get Camera List</button>
-      <button 
+      <button
         @click="toggleCameraTest"
         :disabled="isCameraTestLoading"
       >
@@ -67,14 +65,14 @@ Use the [startCameraTest](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
 import { IconWarning } from '@tencentcloud/uikit-base-component-vue3';
-import { 
+import {
   useLoginState,
-  useDeviceState, 
+  useDeviceState,
   DeviceStatus,
   DeviceError,
 } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   isCameraTesting,
   isCameraTestLoading,
   cameraList,
@@ -129,8 +127,8 @@ Start microphone testing through [startMicrophoneTest](https://web.sdk.qcloud.co
     <div class="volume-display">
       <div class="volume-label">Microphone Volume</div>
       <div class="volume-bar-container">
-        <div 
-          class="volume-bar" 
+        <div
+          class="volume-bar"
           :style="{ width: `${testingMicVolume}%` }"
           :class="volumeClass"
         />
@@ -141,13 +139,13 @@ Start microphone testing through [startMicrophoneTest](https://web.sdk.qcloud.co
     <!-- Microphone selection -->
     <div class="microphone-selector">
       <label>Select Microphone</label>
-      <select 
-        :value="currentMicrophone?.deviceId" 
+      <select
+        :value="currentMicrophone?.deviceId"
         @change="handleMicrophoneChange"
         :disabled="isMicrophoneTesting"
       >
-        <option 
-          v-for="mic in microphoneList" 
+        <option
+          v-for="mic in microphoneList"
           :key="mic.deviceId"
           :value="mic.deviceId"
         >
@@ -158,12 +156,12 @@ Start microphone testing through [startMicrophoneTest](https://web.sdk.qcloud.co
 
     <!-- Control buttons -->
     <div class="control-buttons">
-      <button 
+      <button
         @click="getMicrophoneList"
       >
         Get Devices
       </button>
-      <button 
+      <button
         @click="toggleMicrophoneTest"
       >
         {{ isMicrophoneTesting ? 'Stop Test' : 'Start Test' }}
@@ -179,12 +177,12 @@ Start microphone testing through [startMicrophoneTest](https://web.sdk.qcloud.co
 
 <script setup lang="ts">
 import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
-import { 
-  useDeviceState, 
+import {
+  useDeviceState,
   DeviceError,
 } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   isMicrophoneTesting,
   testingMicVolume,
   microphoneList,
@@ -251,13 +249,13 @@ Use the [startSpeakerTest](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index
     <!-- Speaker selection -->
     <div class="speaker-selector">
       <label>Select Speaker</label>
-      <select 
-        :value="currentSpeaker?.deviceId" 
+      <select
+        :value="currentSpeaker?.deviceId"
         @change="handleSpeakerChange"
         :disabled="isSpeakerTesting"
       >
-        <option 
-          v-for="speaker in speakerList" 
+        <option
+          v-for="speaker in speakerList"
           :key="speaker.deviceId"
           :value="speaker.deviceId"
         >
@@ -269,13 +267,13 @@ Use the [startSpeakerTest](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index
     <!-- Control buttons -->
     <div class="control-buttons">
       <button @click="getSpeakerList">Get Speaker List</button>
-      <button 
+      <button
         @click="toggleSpeakerTest"
         :disabled="isSpeakerTesting"
       >
         {{ isSpeakerTesting ? 'Playing...' : 'Play Test Audio' }}
       </button>
-      <button 
+      <button
         v-if="isSpeakerTesting"
         @click="stopSpeakerTest"
       >
@@ -294,7 +292,7 @@ Use the [startSpeakerTest](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index
 import { ref, onMounted, onUnmounted } from 'vue';
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 
-const { 
+const {
   isSpeakerTesting,
   speakerList,
   currentSpeaker,
@@ -345,24 +343,9 @@ const handleSpeakerChange = async (event: Event) => {
 ```
 
 ## 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>
-</table>
-
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useDeviceState** | Contains audio/video device status, audio/video device list and operation interfaces. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) |
 
 ## FAQ
 
@@ -377,7 +360,6 @@ Possible reasons include:
 
 - **Browser not supported:** Use modern browsers such as Chrome, Edge, etc.
 
-
 ### Microphone test volume is always 0?
 
 Possible reasons include:

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

@@ -9,9 +9,8 @@ This document guides you on how to use Atomicx components and the `useDeviceStat
 
 - **Network Quality Monitoring:** Provides multi-dimensional network information including latency and packet loss rate.
 
-
 ## 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).
+- 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.
 
 - If integrating within an `iframe`, permissions must be declared in the tag.
 
@@ -76,11 +75,10 @@ watch(currentCamera, (camera) => {
 ```
 
 > **Note:**
-> 
+>
 
 > When calling [setCurrentCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCurrentCamera) to switch devices, if the camera is already on, Atomicx will automatically stop capturing from the current device and restart capture using the new device, with seamless video stream switching. If switching fails, it will continue using the original device.
-> 
-
+>
 
 #### Mobile Camera Switch Example
 
@@ -98,7 +96,7 @@ const toggleCamera = async () => {
     console.warn('Front/rear camera switching is only supported on mobile devices');
     return;
   }
-  
+
   // Switch to opposite camera
   await switchCamera({ isFrontCamera: !isFrontCamera.value });
   console.log(`Switched to ${isFrontCamera.value ? 'front' : 'rear'} camera`);
@@ -110,10 +108,10 @@ const toggleCamera = async () => {
 When camera capture errors occur, you can get error information through the [cameraLastError](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraLastError) property.
 
 > Note:
-> 
+>
 
 > Common camera errors include `NoSystemPermission` (no system permission) and `OccupiedError` (device occupied). You should display clear error messages to users based on this property.
-> 
+>
 
 ``` typescript
 import { useDeviceState, DeviceError } from 'tuikit-atomicx-vue3/room';
@@ -165,11 +163,11 @@ You can get all available microphone devices through [microphoneList](https://we
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
 
-const { 
-  microphoneList, 
-  currentMicrophone, 
-  getMicrophoneList, 
-  setCurrentMicrophone 
+const {
+  microphoneList,
+  currentMicrophone,
+  getMicrophoneList,
+  setCurrentMicrophone
 } = useDeviceState();
 
 // Get microphone list
@@ -217,9 +215,9 @@ The [currentMicVolume](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.htm
   <div class="mic-volume">
     <label>Microphone Volume</label>
     <div class="volume-bar-container">
-      <div 
-        class="volume-bar" 
-        :style="{ width: `${currentMicVolume}%` }" 
+      <div
+        class="volume-bar"
+        :style="{ width: `${currentMicVolume}%` }"
       />
     </div>
     <span>{{ currentMicVolume }}</span>
@@ -285,11 +283,11 @@ Speaker (playback device) mainly involves switching devices and setting playback
 You can get all available speaker devices through [speakerList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#speakerList), and use [setCurrentSpeaker](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCurrentSpeaker) method to switch the currently used speaker.
 ``` typescript
 import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { 
-  speakerList, 
-  currentSpeaker, 
-  getSpeakerList, 
-  setCurrentSpeaker 
+const {
+  speakerList,
+  currentSpeaker,
+  getSpeakerList,
+  setCurrentSpeaker
 } = useDeviceState();
 
 // Get speaker list
@@ -334,10 +332,10 @@ watch(outputVolume, (volume) => {
 Using the [networkInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#networkInfo) data in [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState), you can monitor the local user's network quality in real-time.
 
 > **Note:**
-> 
+>
 
 > Valid data can only be obtained in [networkInfo](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#networkInfo) when the local user has joined the room through [joinRoom](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#joinRoom) and turned on the microphone or camera.
-> 
+>
 
 ``` typescript
 <template>
@@ -436,24 +434,9 @@ const networkText = computed(() => {
 ```
 
 ## 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>
-</table>
-
+| **State/Component** | **Feature Description** | **API Documentation** |
+| --- | --- | --- |
+| **useDeviceState** | Contains audio/video device status, audio/video device list and operation interfaces. | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) |
 
 ## FAQ
 
@@ -468,13 +451,10 @@ Yes, they can enter the room. Users can still successfully call the `joinRoom` i
 
 - **Playback limitations:** Due to lack of speaker devices, users will not be able to hear audio from other participants in the room.
 
-
    **Functions that can still be used:**
 
-
    View-only mode: Users can still watch video streams or screen sharing from remote participants.
 
-
 ### How to implement device hot-plug detection?
 
 Atomicx has built-in device hot-plug detection. When media devices are plugged in or unplugged, the device list and current device data will be automatically updated.