@tencent-rtc/mcp 1.4.7 → 1.6.0

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

@@ -1,460 +0,0 @@
-This document guides you on how to use Atomicx components and the `useDeviceState` Hook to manage audio/video device (camera, microphone, speaker) state in meetings, and how to obtain local network quality information.
-
-## Feature Introduction
-- **Device Enumeration & Switching:** Supports real-time retrieval of available system device lists and seamless switching.
-
-- **Fine-grained State Control:** Provides capabilities for enabling/disabling, muting capture, volume adjustment, and real-time volume monitoring.
-
-- **Error Diagnosis:** Real-time feedback on hardware conflicts, missing system permissions, and other abnormal states.
-
-- **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.
-
-- If integrating within an `iframe`, permissions must be declared in the tag.
-
-   ``` typescript
-   <iframe allow="microphone; camera;"></iframe>
-   ```
-
-## Implementing Camera Management
-
-You can control local camera on/off, switch devices, and monitor capture status and errors through [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState).
-
-### Step 1: Enable/Disable Camera
-
-Control camera on/off by calling [openLocalCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#openLocalCamera) and [closeLocalCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#closeLocalCamera) methods.
-``` typescript
-import { useDeviceState, DeviceStatus } from 'tuikit-atomicx-vue3/room';
-const { cameraStatus, openLocalCamera, closeLocalCamera } = useDeviceState();
-const toggleCamera = async () => {
-  if (cameraStatus.value === DeviceStatus.On) {
-    await closeLocalCamera();
-  } else {
-    await openLocalCamera();
-  }
-};
-```
-
-### Step 2: Get/Switch Camera Device
-
-#### Desktop Camera Get and Switch Example
-
-You can get all available camera devices through [cameraList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraList), and use [setCurrentCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCurrentCamera) method to switch the currently used camera.
-``` typescript
-import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { cameraList, currentCamera, getCameraList, setCurrentCamera } = useDeviceState();
-
-// Get camera list
-await getCameraList();
-
-// Iterate and display available cameras
-cameraList.value.forEach((camera) => {
-  console.log(`Camera: ${camera.deviceName} (${camera.deviceId})`);
-});
-
-// Switch to specified camera
-const switchCamera = async (deviceId: string) => {
-  try {
-    // Switch device (if camera is already on, will automatically re-capture using new device)
-    await setCurrentCamera({ deviceId });
-    console.log('Camera switched successfully');
-  } catch (error) {
-    console.error('Camera switch failed:', error);
-    // On switch failure, will continue using original device
-  }
-};
-
-// Monitor current camera changes
-watch(currentCamera, (camera) => {
-  if (camera) {
-    console.log('Currently using camera:', camera.deviceName);
-  }
-});
-```
-
-> **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
-
-Mobile devices use [switchCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#switchCamera) to switch between front and rear cameras.
-``` typescript
-import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { isFrontCamera, switchCamera } = useDeviceState();
-
-// Determine if mobile device
-const isMobile = /Android|webOS|iPhone|iPad|iPod/i.test(navigator.userAgent);
-
-// Switch front/rear camera (only supported on mobile)
-const toggleCamera = async () => {
-  if (!isMobile) {
-    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`);
-};
-```
-
-### Step 3: Handle Camera Capture Errors
-
-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';
-const { cameraLastError } = useDeviceState();
-
-// Monitor camera errors
-watch(cameraLastError, (error) => {
-  switch (error) {
-    case DeviceError.NoSystemPermission:
-      console.error('Camera permission denied, please enable camera permission in system settings');
-      break;
-    case DeviceError.NoDeviceDetected:
-      console.error('No camera device detected');
-      break;
-    case DeviceError.OccupiedError:
-      console.error('Camera is occupied by another application');
-      break;
-    case DeviceError.NotSupportCapture:
-      console.error('Current browser does not support camera capture');
-      break;
-    default:
-      break;
-  }
-});
-```
-
-## Implementing Microphone Management
-
-You can control local microphone on/off, mute, volume adjustment, and real-time volume display through [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState), and monitor capture status and errors.
-
-### Step 1: Enable/Disable Microphone
-``` typescript
-import { useDeviceState, DeviceStatus } from 'tuikit-atomicx-vue3/room';
-const { microphoneStatus, openLocalMicrophone, closeLocalMicrophone } = useDeviceState();
-const toggleMicrophone = async () => {
-  if (microphoneStatus.value === DeviceStatus.On) {
-    await closeLocalMicrophone();
-  } else {
-    await openLocalMicrophone();
-  }
-};
-```
-
-### Step 2: Get/Switch Microphone Device
-
-#### Desktop Browser Get/Switch Microphone Example
-
-You can get all available microphone devices through [microphoneList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#microphoneList), and use [setCurrentMicrophone](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCurrentMicrophone) method to switch the currently used microphone.
-``` typescript
-import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-
-const {
-  microphoneList,
-  currentMicrophone,
-  getMicrophoneList,
-  setCurrentMicrophone
-} = useDeviceState();
-
-// Get microphone list
-await getMicrophoneList();
-
-// Iterate and display available microphones
-microphoneList.value.forEach((mic) => {
-  console.log(`Microphone: ${mic.deviceName} (${mic.deviceId})`);
-});
-
-// Switch to specified microphone
-const switchMicrophone = async (deviceId: string) => {
-  await setCurrentMicrophone({ deviceId });
-};
-
-// Monitor current microphone changes
-watch(currentMicrophone, (mic) => {
-  if (mic) {
-    console.log('Currently using microphone:', mic.deviceName);
-  }
-});
-```
-
-### Step 3: Set Capture Volume
-
-You can use the [setCaptureVolume](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setCaptureVolume) method to adjust the local microphone capture volume.
-``` typescript
-import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { captureVolume, setCaptureVolume } = useDeviceState();
-
-// Set capture volume to 50%
-await setCaptureVolume(50);
-
-// Monitor capture volume changes
-watch(captureVolume, (volume) => {
-  console.log('Current capture volume:', volume);
-});
-```
-
-### Step 4: Display Real-time Volume
-
-The [currentMicVolume](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#currentMicVolume) property updates the local microphone capture volume in real-time, and can be used for dynamic volume bar display.
-``` typescript
-<template>
-  <div class="mic-volume">
-    <label>Microphone Volume</label>
-    <div class="volume-bar-container">
-      <div
-        class="volume-bar"
-        :style="{ width: `${currentMicVolume}%` }"
-      />
-    </div>
-    <span>{{ currentMicVolume }}</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { currentMicVolume } = useDeviceState();
-</script>
-
-<style scoped>
-.volume-bar-container {
-  width: 200px;
-  height: 8px;
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.volume-bar {
-  height: 100%;
-  background-color: #4caf50;
-  transition: width 0.1s ease;
-}
-</style>
-```
-
-### Step 5: Handle Microphone Capture Errors
-
-When microphone capture errors occur, you can get error information through [microphoneLastError](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#microphoneLastError) data.
-``` typescript
-import { useDeviceState, DeviceError } from 'tuikit-atomicx-vue3/room';
-const { microphoneLastError } = useDeviceState();
-
-// Monitor microphone errors
-watch(microphoneLastError, (error) => {
-  switch (error) {
-    case DeviceError.NoSystemPermission:
-      console.error('Microphone permission denied, please enable microphone permission in system settings');
-      break;
-    case DeviceError.NoDeviceDetected:
-      console.error('No microphone device detected');
-      break;
-    case DeviceError.OccupiedError:
-      console.error('Microphone is occupied by another application');
-      break;
-    case DeviceError.NotSupportCapture:
-      console.error('Current browser does not support microphone capture');
-      break;
-    default:
-      break;
-  }
-});
-```
-
-## Implementing Speaker Management
-
-Speaker (playback device) mainly involves switching devices and setting playback volume.
-
-### Step 1: Get/Switch Speaker Device
-
-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
-} = useDeviceState();
-
-// Get speaker list
-await getSpeakerList();
-
-// Iterate and display available speakers
-speakerList.value.forEach((speaker) => {
-  console.log(`Speaker: ${speaker.deviceName} (${speaker.deviceId})`);
-});
-
-// Switch to specified speaker
-const switchSpeaker = async (deviceId: string) => {
-  await setCurrentSpeaker({ deviceId });
-};
-
-// Monitor current speaker changes
-watch(currentSpeaker, (speaker) => {
-  if (speaker) {
-    console.log('Currently using speaker:', speaker.deviceName);
-  }
-});
-```
-
-### Step 2: Set Playback Volume
-
-You can use the [setOutputVolume](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setOutputVolume) method to adjust speaker playback volume.
-``` typescript
-import { useDeviceState } from 'tuikit-atomicx-vue3/room';
-const { outputVolume, setOutputVolume } = useDeviceState();
-
-// Set playback volume to 60%
-await setOutputVolume(60);
-
-// Monitor playback volume changes
-watch(outputVolume, (volume) => {
-  console.log('Current playback volume:', volume);
-});
-```
-
-## Implementing Network Quality Monitoring
-
-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>
-  <div class="network-indicator" @click="showDetails = !showDetails">
-    <TUIIcon v-if="networkIcon" :icon="networkIcon" />
-    <span class="network-text">{{ networkText }}</span>
-    <div v-if="showDetails" class="network-details">
-      <div>Latency: {{ networkInfo?.delay }}ms</div>
-      <div>Uplink Loss: {{ networkInfo?.upLoss }}%</div>
-      <div>Downlink Loss: {{ networkInfo?.downLoss }}%</div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import {
-  IconNetworkStability,
-  IconNetworkFluctuation,
-  IconNetworkLag,
-  IconNetworkDisconnected,
-  IconArrowStrokeUp,
-} from '@tencentcloud/uikit-base-component-vue3';
-import { useDeviceState, NetworkQuality } from 'tuikit-atomicx-vue3/room';
-
-const { networkInfo } = useDeviceState();
-const showDetails = ref(false);
-
-// Network quality icon
-const networkIcon = computed(() => {
-  if (!networkInfo.value) return '';
-  switch (networkInfo.value.quality) {
-    case NetworkQuality.Excellent:
-    case NetworkQuality.Good:
-      return IconNetworkStability;
-    case NetworkQuality.Poor:
-      return IconNetworkFluctuation;
-    case NetworkQuality.Bad:
-    case NetworkQuality.VeryBad:
-      return IconNetworkLag;
-    case NetworkQuality.Down:
-      return IconNetworkDisconnected;
-    default:
-      return '';
-  }
-});
-
-// Network quality text
-const networkText = computed(() => {
-  if (!networkInfo.value) return 'Unknown';
-  switch (networkInfo.value.quality) {
-    case NetworkQuality.Excellent:
-      return 'Excellent';
-    case NetworkQuality.Good:
-      return 'Good';
-    case NetworkQuality.Poor:
-      return 'Fair';
-    case NetworkQuality.Bad:
-      return 'Poor';
-    case NetworkQuality.VeryBad:
-      return 'Very Poor';
-    case NetworkQuality.Down:
-      return 'Disconnected';
-    default:
-      return 'Unknown';
-  }
-});
-</script>
-
-<style scoped>
-
-.network-indicator {
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.network-details {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  margin-top: 4px;
-  padding: 8px;
-  background: white;
-  border-radius: 4px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
-  font-size: 12px;
-  white-space: nowrap;
-  z-index: 2;
-}
-</style>
-```
-
-## API Documentation
-| **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
-
-### Can users enter an audio/video room if their computer has no microphone or speaker devices?
-
-Yes, they can enter the room. Users can still successfully call the `joinRoom` interface to enter an audio/video room even without a microphone, speaker, or camera. However, in this state, users will face the following interaction exceptions.
-
-**Feature Limitations:**
-- **Cannot enable media capture:** Since the system cannot drive the relevant hardware, calling [openLocalMicrophone](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#openLocalMicrophone) or [openLocalCamera](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#openLocalCamera) interfaces will trigger asynchronous errors. At this time, the [microphoneLastError](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#microphoneLastError) or [cameraLastError](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraLastError) property will return `DeviceError.NoDeviceDetected` (no device detected).
-
-- **Capture limitations:** Cannot capture and transmit audio (requires microphone) or video (requires camera) through local devices.
-
-- **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.

package/resource/doc/roomkit/vue/features/free-beauty-panel.md

@@ -1,215 +0,0 @@
-The basic beauty feature allows users to apply skin smoothing, whitening, and ruddiness adjustments to portraits during video calls or live streaming.
-
-## Use Cases
-- **Video Conferencing:** Minimize skin blemishes, brighten skin tone, making participants look more professional and energetic.
-
-- **Online Live Streaming:** Hosts use beauty features to enhance visual appeal and attract more viewers.
-
-- **Online Education:** Teachers and students maintain a clean and natural appearance, creating a good classroom atmosphere.
-
-## Prerequisites
-- **User Status:** The user has completed login authentication through useLoginState, refer to Integration Overview, and is in **logged in** status.
-
-- **Environment Dependencies:** The project has imported `tuikit-atomicx-vue3`.
-
-- **Device Requirements:** A working camera device is required, and the user has authorized camera access. If the user denies authorization, the virtual background feature will not be available.
-
-## Implementing Basic Beauty 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 beauty panel component ([FreeBeautyPanel](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/FreeBeautyPanel)) provided by `tuikit-atomicx-vue3`, embed it into your application dialog, with the lowest development cost.
-
-- **Solution 2 (Advanced):** Custom integration using underlying API. Based on atomicx-core SDK API [useFreeBeautyState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) state hook to implement UI and interaction logic yourself, with the highest flexibility.
-
-## Solution 1: Quick Integration Using UI Components
-
-`tuikit-atomicx-vue3` provides a core beauty settings panel component:
-- [**FreeBeautyPanel**](https://github.com/Tencent-RTC/TUIKit_Vue3/tree/main/packages/tuikit-atomicx-vue3/src/components/FreeBeautyPanel)**:** Basic beauty configuration panel, including parameter adjustment functions for skin smoothing, whitening, and ruddiness.
-
-### Step 1: Import Component
-``` typescript
-import { FreeBeautyPanel } from 'tuikit-atomicx-vue3/room';
-```
-
-### Step 2: Use Component
-
-It is generally recommended to place `FreeBeautyPanel` in a dialog or modal, triggered by button click.
-
-**The following example shows how to implement a complete interaction for clicking a button to open beauty settings:**
-
-> **Note:**
->
-
-> All TUIKit components must be wrapped inside UIKitProvider, otherwise they will not be able to obtain context dependencies, causing style anomalies.
->
-
-``` typescript
-<template>
-  <UIKitProvider theme="light" language="zh-CN">
-    <div class="toolbar-container">
-      <!-- 1. Trigger button -->
-      <button @click="openBeautySettings">Beauty Settings</button>
-
-      <!-- 2. Settings dialog -->
-      <div v-if="showSettings" class="modal-mask">
-        <div class="modal-content">
-          <div class="modal-header">
-            <span>Basic Beauty</span>
-            <button @click="showSettings = false">Close</button>
-          </div>
-
-          <div class="modal-body">
-            <!-- 3. Import panel component -->
-            <!-- @close event: Triggered when user clicks the close button (if any) inside the panel -->
-            <FreeBeautyPanel @close="showSettings = false" />
-          </div>
-        </div>
-      </div>
-    </div>
-  </UIKitProvider>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';
-import { FreeBeautyPanel, useDeviceState } from 'tuikit-atomicx-vue3/room';
-
-const showSettings = ref(false);
-const { cameraList } = useDeviceState();
-
-const openBeautySettings = () => {
-  // 1. Check if there is an available camera
-  if (cameraList.value.length === 0) {
-    alert('No camera detected, cannot set beauty effects');
-    return;
-  }
-
-  // 2. Open settings panel
-  showSettings.value = true;
-};
-</script>
-
-<style scoped>
-.modal-mask {
-  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-  background: rgba(0,0,0,0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;
-}
-.modal-content { background: white; width: 600px; border-radius: 8px; overflow: hidden; }
-.modal-header { padding: 16px; display: flex; justify-content: space-between; border-bottom: 1px solid #eee; }
-.modal-body { padding: 16px; }
-</style>
-```
-
-The internal logic of this component is as follows:
-- **Display Panel:** After users click the button, a dialog containing `FreeBeautyPanel` pops up.
-
-- **Adjust Parameters:** Users drag sliders inside the panel to adjust skin smoothing, whitening, and ruddiness parameters.
-
-- **Real-time Preview:** During adjustment, the preview interface is called in real-time to preview beauty effects.
-
-- **Save and Apply:** When closing the panel (triggering `@close` event), the current settings are automatically saved to take effect for remote users.
-
-## Solution 2: Custom Integration Using Underlying API
-
-This section mainly introduces how to implement basic beauty through atomicx-core SDK API [useFreeBeautyState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) interface.
-
-### Step 1: Set Preview
-
-When users adjust beauty parameters (e.g., dragging sliders), use [setFreeBeauty](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#setFreeBeauty) for real-time preview. At this time, the effect is only visible locally and will not be transmitted to remote users.
-
-> **Note:**
->
-
-> Parameter values range from 0-100.
->
-
-``` typescript
-import { useFreeBeautyState } from 'tuikit-atomicx-vue3/room';
-
-const { setFreeBeauty, beautyConfig } = useFreeBeautyState();
-
-// Example: Adjust beauty parameters
-const updatePreview = async (beauty: number, white: number, ruddy: number) => {
-  // The values in beautyConfig will update automatically, here's how to manually set preview
-  await setFreeBeauty({
-    beautyLevel: beauty,      // Skin smoothing (0-100)
-    whitenessLevel: white,    // Whitening (0-100)
-    ruddinessLevel: ruddy     // Ruddiness (0-100)
-  });
-};
-```
-
-### Step 2: Save and Apply
-
-After users confirm the preview effect is satisfactory, call [saveBeautySetting](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#saveBeautySetting) to apply the current configuration to the video stream. At this time, remote users can see the beauty effect.
-
-> **Note:**
->
-
-> The virtual background feature depends on camera devices. You can use [useDeviceState](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-DeviceState) to check device status.
->
-> - [cameraList](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#cameraList): List of currently available camera devices. If the list is empty, it means no camera was detected or camera permission was denied.
-
-``` typescript
-import { useFreeBeautyState } from 'tuikit-atomicx-vue3/room';
-
-const { saveBeautySetting } = useFreeBeautyState();
-
-const applyBeauty = async () => {
-  // Save the currently previewed settings to take effect for remote users
-  await saveBeautySetting();
-  console.log('Beauty effects applied');
-};
-```
-
-### Step 3: Disable Beauty Effects
-
-To disable beauty, simply set all parameters to 0 and save.
-``` typescript
-const closeBeauty = async () => {
-  // 1. Set all parameters to 0 and preview
-  await setFreeBeauty({
-    beautyLevel: 0,
-    whitenessLevel: 0,
-    ruddinessLevel: 0
-  });
-
-  // 2. Save to apply
-  await saveBeautySetting();
-};
-```
-
-## Development Notes
-- **Parameter Range:**`setFreeBeauty` accepts parameters (`beautyLevel`, `whitenessLevel`, `ruddinessLevel`) all ranging from 0-100.
-
-- **Preview and Apply:** To provide better user experience, beauty adjustment is divided into **"preview"** and **"apply"** stages. `setFreeBeauty` is only used for local preview, and you must call `saveBeautySetting` to formally apply by calling `trtcCloud.setBeautyStyle` to the stream.
-
-- **Device Dependencies:** Beauty features depend on video streams, so effects can only be seen when the camera is enabled. If no camera is detected, it is recommended to disable the beauty entry point.
-
-- **Performance Consumption:** Enabling beauty will increase CPU and GPU load. It is recommended to guide users to use moderately on low-end devices.
-
-## Common Questions
-
-### **Why can't remote users see the effect after adjusting beauty?**
-
-Please confirm if `saveBeautySetting()` was called. `setFreeBeauty()` is only used for local preview, and effects will only be applied to the streaming video after saving.
-
-### **Can beauty be set without a camera?**
-
-No. Beauty features process video streams. If no video is captured, beauty cannot take effect. It is recommended to hide or disable the beauty entry point when there is no camera.
-
-### **Do I need to manually reset beauty after leaving the room or turning off the camera?**
-
-No. `useFreeBeautyState` has internally implemented automatic state management:
-- Camera switch: Beauty pauses when camera is turned off, and automatically restores the last saved settings when reopened.
-
-- Entering/exiting rooms: All beauty parameters are automatically reset when exiting a room, no need for developers to clean up manually.
-
-## **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** |
-| --- | --- | --- |
-| **useFreeBeautyState** | Free beauty feature management | [API Documentation](https://web.sdk.qcloud.com/trtc/live/web/doc/zh/index.html#module-FreeBeautyState) |