@tencent-rtc/mcp 1.3.8 → 1.4.0

package/resource/doc/rtcengine/faq/web/web.md

@@ -17,9 +17,6 @@ By default, when autoplay fails, the SDK will pop up to guide the user to intera
 
 The popup window provided by the SDK is adapted to desktop and mobile browser, and the style is as follows:
 
-![Desktop autoplay dialog](./assets/autoplay-dialog-pc-en.png)
-![Mobile autoplay dialog](./assets/autoplay-dialog-en.png)
-
 - The SDK will switch the Chinese and English popup prompts according to the value of [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language).
 - When the user clicks "OK", the SDK automatically calls the relevant interface to resume playback.
 - In order to ensure that the popup window is displayed on the top layer as much as possible, its z-index value is 1500.
@@ -85,7 +82,6 @@ The default autoplay policy in Android and iOS Webview may be different to the b
 
 ---
 
-
 # Handle Firewall Restriction
 
 ## Function Description
@@ -131,12 +127,8 @@ trtc.on(TRTC.EVENT.ERROR, error => {
 | A | Users can access a specific external proxy server on the network | The proxy server is deployed on the external network, and the internal network firewall needs to open a whitelist to allow internal network users to access the external proxy server. |
 | B | Users can only access an internal proxy server on the network | The proxy server is deployed on the internal network, and the internal network firewall needs to open a whitelist to allow the internal proxy server to access the external network. |
 
-![Example of Solution 2-A](./assets/proxy-1.png)
-
 *Example of Solution 2-A*
 
-![Example of Solution 2-B](./assets/proxy-2.png)
-
 *Example of Solution 2-B*
 
 ### Setting up a proxy server
@@ -144,7 +136,7 @@ trtc.on(TRTC.EVENT.ERROR, error => {
 After you have set up Nginx and Turn server, you can refer to the following example to set up a proxy server.
 
 ```javascript
-const trtc = TRTC.create(); 
+const trtc = TRTC.create();
 await trtc.enterRoom({
   ...,
   proxy: {
@@ -153,7 +145,7 @@ await trtc.enterRoom({
     // Set up a turn server to relay media data packets between the SDK and the TRTC backend. 14.3.3.3:3478 is the IP address and port of the turn server.
     turnServer: { url: '14.3.3.3:3478', username: 'turn', credential: 'turn', credentialType: 'password' },
     // By default, the SDK will connect to trtc server directly, if connection failed, then SDK will try to connect the TURN server to relay the media data. You can set 'relay' to force the connection through the TURN server.
-    iceTransportPolicy: 'all', 
+    iceTransportPolicy: 'all',
     // By default, the SDK reports logs to the yun.tim.qq.com domain name. If this domain name cannot be accessed in your internal network, you need to whitelist the domain name or configure the following log proxy.
     // Set up a log reporting proxy. Logs are key data for troubleshooting, so be sure to set up this proxy.
     loggerProxy: 'https://proxy.example.com/logger/',
@@ -172,29 +164,29 @@ await trtc.enterRoom({
 2. **Configure Nginx server**
 
    ```sh
-   vi /etc/nginx/nginx.conf 
+   vi /etc/nginx/nginx.conf
    ```
 
    ```nginx
    http {
-     server { 
+     server {
        # The access domain name of the Nginx server
-       server_name proxy.example.com; 
+       server_name proxy.example.com;
        # The access port of the Nginx server
-       listen 443; 
-       ssl on; 
+       listen 443;
+       ssl on;
        location /ws/ { # Corresponding to the websocketProxy parameter in setProxyServer
          proxy_pass https://signaling.rtc.qq.com/; # TRTC server
-         proxy_http_version 1.1; 
-         proxy_set_header Upgrade $http_upgrade; 
-         proxy_set_header Connection "upgrade"; 
+         proxy_http_version 1.1;
+         proxy_set_header Upgrade $http_upgrade;
+         proxy_set_header Connection "upgrade";
        }
        location /logger/ { # Corresponding to the loggerProxy parameter in setProxyServer
          proxy_pass https://yun.tim.qq.com/;
        }
        # SSL certificate corresponding to the domain name, used for HTTPS, users need to apply for it themselves
-       ssl_certificate ./crt/1_proxy.trtcapi.com_bundle.crt; 
-       ssl_certificate_key ./crt/2_proxy.trtcapi.com.key; 
+       ssl_certificate ./crt/1_proxy.trtcapi.com_bundle.crt;
+       ssl_certificate_key ./crt/2_proxy.trtcapi.com.key;
      }
    }
    ```
@@ -277,7 +269,7 @@ You can search for turn server setup tutorials on the Internet for setup, or you
    # Check if turn is started successfully
    ps aux | grep coturn
    # If you want to restart the service, execute
-   service coturn restart 
+   service coturn restart
    ```
 
 5. **Configure the firewall for the turn server, open inbound port 3478 (TCP & UDP), and outbound ports (UDP) between min and max ports in the configuration above.**
@@ -288,8 +280,6 @@ You can search for turn server setup tutorials on the Internet for setup, or you
 
    Use this [test page](https://webrtc.github.io/samples/src/content/peerconnection/trickle-ice/) to test whether the turn server is accessible. If the result shows "done" as shown in the screenshot below, the turn server is working properly.
 
-   ![turn-test](./assets/turn-test.png)
-
 ### Solution 2-B
 
 Solution B builds the Nginx proxy in the same way as Scenario A. There are two main differences:
@@ -306,4 +296,4 @@ Solution B builds the Nginx proxy in the same way as Scenario A. There are two m
 2. Firewall configuration:
 
    - For the Nginx server, the domain name whitelist needs to be configured in the company's intranet firewall to allow the Nginx server to access TRTC's related domain names. Refer to: [TRTC Web SDK domain and port whitelist](https://trtc.io/document/59667?platform=web&product=rtcengine&menulabel=coresdk)
-   - For the Turn Server, allow the Turn Server to access the external network.
+   - For the Turn Server, allow the Turn Server to access the external network.

package/resource/doc/rtcengine/web/api.md

@@ -14,8 +14,6 @@ The TRTC object is created using [TRTC.create()](#create) and provides core real
 
 The TRTC lifecycle is shown in the following figure:
 
-![TRTC Lifecycle](./assets/client-life-cycle.png)
-
 ## Methods
 
 ### create()
@@ -2422,4 +2420,4 @@ Default 'smooth' first for camera, 'default' clear first for screen sharing
 
 When the network is weak, the video encoding strategy takes 'clear' first, i.e., the priority is to preserve resolution.
 
-Default 'smooth' first for camera, 'default' clear first for screen sharing
+Default 'smooth' first for camera, 'default' clear first for screen sharing

package/resource/doc/rtcengine/web/how_to_integrated_web_sdk.md

@@ -59,7 +59,6 @@ When you use the TRTC Web SDK, you will encounter the following concepts:
    - In the event callback function, call the [trtc.startRemoteVideo()](TRTC.html#startRemoteVideo) method to play the remote video.
 
 The following figure shows the basic API call process for implementing audio and video communication:
-![TRTC SDK Call Sequence](assets/trtc-sdk-call-sequence-en.png "Right-click to open the image to view the full-size image")
 
 ## Creating a TRTC object
 
@@ -137,7 +136,7 @@ trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
 Call the [trtc.exitRoom()](TRTC.html#exitRoom) method to exit the room and end the audio and video call.
 
 ```javascript
-await trtc.exitRoom(); 
+await trtc.exitRoom();
 // After the exit is successful, if you do not need to use the trtc instance later, you can call the trtc.destroy method to destroy the instance and release related resources in a timely manner. The destroyed trtc instance cannot be used again and a new instance needs to be created.
 trtc.destroy();
 ```
@@ -266,8 +265,6 @@ await trtcA.startScreenShare({ option: { systemAudio: true }});
 
 Check `Share audio` in the pop-up dialog box, and the system audio will be mixed with the local microphone and published. Other users in the room will receive the TRTC.EVENT.REMOTE_AUDIO_AVALIABLE event.
 
-![Screen Sharing Audio Dialog](https://web.sdk.qcloud.com/trtc/webrtc/doc/en/assets/screen-sharing-audio-en.png)
-
 ### 5. Stop Screen Sharing
 
 ```javascript
@@ -282,8 +279,6 @@ trtcB.on(TRTC.EVENT.REMOTE_VIDEO_UNAVAILABLE, ({ userId, streamType }) => {
 
 In addition, users may also stop screen sharing through the browser's own button, so the screen sharing stream needs to listen for the screen sharing stop event and respond accordingly.
 
-![Screen Sharing Stop Button](https://web.sdk.qcloud.com/trtc/webrtc/doc/en/assets/screen-sharing-stop-en.png)
-
 ```javascript
 // Listen for screen sharing stop event
 trtcA.on(TRTC.EVENT.SCREEN_SHARE_STOPPED, () => {
@@ -386,7 +381,7 @@ Reference: [webkit issue](https://bugs.webkit.org/show_bug.cgi?id=198040).
 async function onClick() {
   // It is recommended to execute the collection logic first when onClick is executed
   await trtcA.startScreenShare();
-  await trtcA.enterRoom({ 
+  await trtcA.enterRoom({
     roomId: 123123,
     sdkAppId: 140000000, // Fill in your sdkAppId
     userId: 'userA', // Fill in your userId
@@ -395,7 +390,7 @@ async function onClick() {
 }
 // bad
 async function onClick() {
-  await trtcA.enterRoom({ 
+  await trtcA.enterRoom({
     roomId: 123123,
     sdkAppId: 140000000, // Fill in your sdkAppId
     userId: 'userA', // Fill in your userId
@@ -488,5 +483,3 @@ await trtc.updateLocalVideo({
 | 4K | 3840 x 2160 | 30 | 9000 | |
 
 - Due to device and browser limitations, the video resolution may not match exactly. In this case, the browser will automatically adjust the resolution to be close to the resolution corresponding to the Profile.
-
-

package/resource/doc/rtcengine/web/how_to_run_web_sdk_demo.md

@@ -16,8 +16,6 @@ Please visit the [TRTC console](https://console.trtc.io/) and create an RTC Engi
 
 After your application created, you can get your **SDKAppID** and **SDKSecretKey** in Basic information , which are used to run demo.
 
-![Console information](https://qcloudimg.tencent-cloud.cn/raw/21dfdacea923b78ea4f22bb4f6b47b84.png)
-
 ## Step 3: Run the Demo
 
 1. **Run demo online**
@@ -44,8 +42,6 @@ After your application created, you can get your **SDKAppID** and **SDKSecretKey
 
    (2) Fill in the SDKAppId and SDKSecretKey obtained in [Step 2](#Step-2.-Get-your-SDKAppId-and-SDKSecretKey) on the page opened in the browser.
 
-   ![Demo interface](https://qcloudimg.tencent-cloud.cn/raw/220c9cf29087471302898415e5075254.png)
-
    (3) Functional experience
 
    - Click the [Enter Room] button to enter the room.
@@ -60,4 +56,4 @@ After your application created, you can get your **SDKAppID** and **SDKSecretKey
 >
 > - To deploy to the public network for experience, you need to access it through HTTPS protocol, that is, `https://domain/xxx`. For the reason, please refer to the document [Page Access Protocol Restriction Description](./tutorial-05-info-browser.html#h2-3).
 > - Currently, the desktop Chrome browser supports TRTC Web SDK's related features more completely, so it is recommended to use Chrome browser for experience, please refer to the document [Browser Compatibility Information](./tutorial-05-info-browser.html#h2-2).
-> - The correct way to generate UserSig is to integrate the UserSig calculation code into your server and provide an interface for the App. When you need UserSig, your App sends a request to the business server to obtain a dynamic UserSig. For more details, please refer to [Generating UserSig on the Server](https://trtc.io/document/35166?platform=web&product=rtcengine&menulabel=coresdk).
+> - The correct way to generate UserSig is to integrate the UserSig calculation code into your server and provide an interface for the App. When you need UserSig, your App sends a request to the business server to obtain a dynamic UserSig. For more details, please refer to [Generating UserSig on the Server](https://trtc.io/document/35166?platform=web&product=rtcengine&menulabel=coresdk).

package/resource/doc/rtcengine/web/plugin/20-advanced-customized-capture-rendering.md

@@ -62,7 +62,6 @@ const videoTrack = stream.getVideoTracks()[0];
 trtc.startLocalVideo({ option:{ videoTrack } });
 ```
 
-
 ## Custom Rendering
 
 By default, when calling {@link TRTC#startLocalVideo startLocalVideo()} or {@link TRTC#startRemoteVideo startRemoteVideo()}, you need to pass in the view parameter. The SDK will create a `video` tag under the specified element tag to play the video.
@@ -81,7 +80,7 @@ If you need to customize the rendering, and do not need the SDK to play the vide
 trtc.on(TRTC.EVENT.TRACK, event => {
   const isLocal = event.userId === ''; // userId === '' means event.track is a local track, otherwise it's a remote track
   const isSubStream = event.streamType === TRTC.TYPE.STREAM_TYPE_SUB; // Usually the sub stream is a screen-sharing video stream.
-  const mediaStreamTrack = event.track; 
+  const mediaStreamTrack = event.track;
   const kind = event.track.kind; // audio or video
 })
 ```

package/resource/doc/rtcengine/web/plugin/21-advanced-auto-play-policy.md

@@ -17,10 +17,8 @@ By default, when autoplay fails, the SDK will pop up to guide the user to intera
 The popup window provided by the SDK is adapted to desktop and mobile browser, and the style is as follows:
 
 <div style="display:flex;align-items:center;">
-  <img src="./assets/autoplay-dialog-pc-en.png" style="width:40%;max-width:450px;margin-right:16px;" />
-  <img src="./assets/autoplay-dialog-en.png" style="width:30%;max-width:300px;" />
-</div>
 
+</div>
 
 - The SDK will switch the Chinese and English popup prompts according to the value of [navigator.language](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/language).
 
@@ -84,4 +82,4 @@ function showCustomDialog(event) {
 The default autoplay policy in Android and iOS Webview may be different to the browser. You can refer to the following document to turn off autoplay restrictions in your App.
 
 - Android Webview: Call [setMediaPlaybackRequiresUserGesture(false)](https://developer.android.com/reference/android/webkit/WebSettings#setMediaPlaybackRequiresUserGesture(boolean)).
-- iOS Webview: Set [mediaTypesRequiringUserActionForPlayback](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1851524-mediatypesrequiringuseractionfor) to WKAudiovisualMediaTypeNone.
+- iOS Webview: Set [mediaTypesRequiringUserActionForPlayback](https://developer.apple.com/documentation/webkit/wkwebviewconfiguration/1851524-mediatypesrequiringuseractionfor) to WKAudiovisualMediaTypeNone.

package/resource/doc/rtcengine/web/plugin/23-advanced-support-detection.md

@@ -23,7 +23,7 @@ TRTC.isSupported().then(checkResult => {
 
 ### Option 1: Use Device Detector Plugin (including default UI)
 
-The device detector plugin is used to test the user's media device(camera, microphone, speaker) and network which is recommended to be used before the user enters the room. 
+The device detector plugin is used to test the user's media device(camera, microphone, speaker) and network which is recommended to be used before the user enters the room.
 
 > - Support TRTC Web SDK version >= v5.8.0
 > - The plugin includes a default UI. If the UI does not meet your product design requirements, you can refer to Option 2 for a custom UI implementation.
@@ -38,7 +38,7 @@ const trtc = TRTC.create({ plugins: [DeviceDetector] });
 const result = await trtc.startPlugin('DeviceDetector');
 
 // 2. Test Media Device & Network Quality
-const options = { 
+const options = {
     networkDetect: { sdkAppId, userId, userSig }
 }
 const resultWithNetwork = await trtc.startPlugin('DeviceDetector', options);
@@ -57,7 +57,6 @@ const resultWithNetwork = await trtc.startPlugin('DeviceDetector', options);
 | cameraDetect    | object  | Optional        | Optional. Camera detection options, see cameraDetect options below|
 | networkDetect   | object  | Optional        | Optional. Network detection options, see networkDetect options below|
 
-
 ###### options.mirror(optional)
 
 Enable the mirror checkbox during camera detection
@@ -126,7 +125,7 @@ The device connection checks if the user's device has a camera, microphone, and
 
   ```javascript
   import TRTC from 'trtc-sdk-v5';
-  
+
   const cameraList = await TRTC.getCameraList();
   const micList = await TRTC.getMicrophoneList();
   const hasCameraDevice = cameraList.some(camera => camera.deviceId !== '');
@@ -218,4 +217,3 @@ Reference: [Network Quality Detection before enterRoom](./tutorial-24-advanced-n
 ## TRTC Capability Detection Page
 
 You can use the [TRTC Detection Page](https://web.sdk.qcloud.com/trtc/webrtc/demo/detect/index.html) where you are currently using the TRTC SDK to detect the current environment. You can also click the "Generate Report" button to get a report of the current environment for environment detection or troubleshooting.
-

package/resource/doc/rtcengine/web/plugin/24-advanced-network-quality.md

@@ -31,8 +31,6 @@ trtc.on(TRTC.EVENT.NETWORK_QUALITY, event => {
 
 ### API call sequence
 
-![network-quality-call-sequence](./assets/network-quality-call-sequence.png)
-
 ### Code example
 
 ```js
@@ -70,8 +68,6 @@ async function testUplinkNetworkQuality() {
   uplinkTRTC.startLocalVideo();
 }
 
-
-
 // 2. Detect downlink network quality
 async function testDownlinkNetworkQuality() {
   downlinkTRTC = TRTC.create();
@@ -111,7 +107,7 @@ setTimeout(() => {
       validDownlinkNetworkQualitiesList.reduce((value, current) => value + current, 0) / validDownlinkNetworkQualitiesList.length
     );
   }
-    
+
   // Detection is over, clean up related states.
   uplinkTRTC.exitRoom();
   downlinkTRTC.exitRoom();
@@ -136,5 +132,3 @@ After the above steps, you can get the average uplink network quality and the av
 > You can also reduce bandwidth consumption through the following strategies:
 > - If the uplink network quality is greater than 3, you can reduce the bitrate through the [TRTC.updateLocalVideo()](./TRTC.html#updateLocalVideo) interface or close the video through the [TRTC.stopLocalVideo()](./TRTC.html#stopLocalVideo) method to reduce uplink bandwidth consumption.
 > - If the downlink network quality is greater than 3, you can reduce the downlink bandwidth consumption by subscribing to a small stream (refer to: [Enable Small Stream Transmission](./tutorial-27-advanced-small-stream.html)) or only subscribing to audio.
-
-

package/resource/doc/rtcengine/web/plugin/25-advanced-device-change.md

@@ -9,7 +9,6 @@ This article mainly introduces how to detect the behavior of users inserting, un
 > 2. If the camera/microphone is unplugged and there are no available media devices, the SDK will detect the device insertion behavior. If a new available media device is inserted, the SDK will try to use the newly inserted media device to restore the collection and push the stream.
 > 3. If the recovery fails, an error [TRTC.ERROR_CODE.DEVICE_ERROR](./module-ERROR_CODE.html#.DEVICE_ERROR) will be thrown, and the extraCode will be 5308 and 5309.
 
-
 ## Implementation Process
 
 ### Detect device insertion, removal, and startup
@@ -96,4 +95,3 @@ trtc.on(TRTC.EVENT.ERROR, error => {
   }
 })
 ```
-

package/resource/doc/rtcengine/web/plugin/26-advanced-publish-cdn-stream.md

@@ -9,9 +9,9 @@ This document describes how to use the CDNStreaming plugin to implement cloud-ba
 3. In the [TRTC Console - Advanced Features](https://console.trtc.io/features), click "Relay to CDN", and enable the "Enable relay to CDN" switch.
    - When the "Global auto relay" switch is enabled, all upstream audio and video streams in TRTC will be automatically relayed to Tencent Cloud CDN ("Global Auto relay" mode).
    - When the "Global auto relay" switch is disabled, you can use this plugin or the server REST API to relay specific audio and video streams to the CDN and specify the playback address ("Designated Stream relay" mode).
-  
+
   <div align="center">
-    <img src="assets/en-cdn-relay-switch.png" style="max-width: 1000px;" />
+
   </div>
 
 ## Getting Started
@@ -133,16 +133,12 @@ This plugin sends a command to Tencent Cloud's transcoding server to mix multipl
 - `encoding`: Output stream quality (resolution, bitrate, framerate)
 - `mix`: Layout configuration for mixed streams
 
-<img src="https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/fb99be746bf211efbd54525400f69702.png" style="width: 1000px">
-
 ### Example Workflow
 
 1. Call `startPlugin`, the mixing layout is as shown in Figure A
 2. Call `updatePlugin` to add screen sharing, the mixing layout is as shown in Figure B
 3. Call `stopPlugin` when mixing is no longer needed
 
-<img src="https://write-document-release-1258344699.cos.ap-guangzhou.tencentcos.cn/100025252093/8f489b66a80411f0bf2352540044a08e.png" style="width: 600px">
-
 ### Configuration Guide
 
 1. Set `target.publishMode` to `PublishMode.PublishMixStreamToCDN`
@@ -151,7 +147,7 @@ This plugin sends a command to Tencent Cloud's transcoding server to mix multipl
 
 3. Configure `mix.backgroundColor` and `mix.backgroundImage` for background
    > Background images need to be uploaded in [TRTC Console - Advanced Features](https://console.trtc.io/features) > Material management. Use the "Image ID" as string for backgroundImage (e.g., "63").
-   > <img src="assets/en-cdn-console-image.png" style="width: 600px">
+   >
 
 4. Configure `mix.audioMixUserList` for audio mixing (empty = mix all users)
 
@@ -279,7 +275,7 @@ In [TRTC Console - Advanced Features](https://console.trtc.io/features), find yo
 - Use your SDKAppId as `appId`
 
 <div align="center">
-  <img src="assets/en-cdn-stream-manager.png" style="width: 600px">
+
 </div>
 
 ### Step 3: Start Publishing

package/resource/doc/rtcengine/web/plugin/27-advanced-small-stream.md

@@ -39,10 +39,10 @@ When calling [startRemoteVideo](./TRTC.html#startRemoteVideo), set the small par
 
 ```js
 trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
-  trtc.startRemoteVideo({ 
+  trtc.startRemoteVideo({
     view: '', // Pass in the elementId or element instance object of the video container.
-    userId, 
-    streamType, 
+    userId,
+    streamType,
     option: { small: true }
   });
 })
@@ -52,17 +52,17 @@ Switch to the specified userId's small stream when filling in the small paramete
 
 ```js
 // Switch to "big view" playback when the user clicks the "small view".
-await trtc.updateRemoteVideo({ 
+await trtc.updateRemoteVideo({
   view: '', // Pass in the elementId or element instance object of the "big view" video container.
   userId: '', // Pass in the userId of the remote user.
-  streamType: TRTC.TYPE.STREAM_TYPE_MAIN, 
+  streamType: TRTC.TYPE.STREAM_TYPE_MAIN,
   option: { small: false }
 })
 // Switch to "small view" playback when the user clicks the "big view".
-await trtc.updateRemoteVideo({ 
+await trtc.updateRemoteVideo({
   view: '', // Pass in the elementId or element instance object of the "small view" video container.
   userId: '', // Pass in the userId of the remote user.
-  streamType: TRTC.TYPE.STREAM_TYPE_MAIN, 
+  streamType: TRTC.TYPE.STREAM_TYPE_MAIN,
   option: { small: true }})
 ```
 
@@ -98,11 +98,11 @@ Assuming your DOM structure for playing videos is as follows:
 
 ```js
 trtc.on(TRTC.EVENT.REMOTE_VIDEO_AVAILABLE, ({ userId, streamType }) => {
-  trtc.startRemoteVideo({ 
+  trtc.startRemoteVideo({
     view: 'view1_main',
-    userId, 
-    streamType, 
-    option: { 
+    userId,
+    streamType,
+    option: {
       small: true,
       receiveWhenViewVisible: true, // Enable "only subscribe video streams from the visible area"
       viewRoot:  document.getElementById('view-list') // Pass in the first-level parent element of all view list, which is used to calculate the reference relationship between view and viewRoot and check whether the view is visible. The default value is document.body.

package/resource/doc/rtcengine/web/plugin/28-advanced-beauty.md

@@ -8,94 +8,18 @@ This document primarily describes how to use the beauty plugin.
 - [TRTC SDK](https://www.npmjs.com/package/trtc-sdk-v5) version must be >= 5.5.0
 - System and configuration requirements for various platforms are as follows:
 
-<table>
-<tr>
-<td rowspan="1" colspan="1">Platform</td>
-
-<td rowspan="1" colspan="1">Operating System</td>
-
-<td rowspan="1" colspan="1">Browser Version</td>
-
-<td rowspan="1" colspan="1">FPS</td>
-
-<td rowspan="1" colspan="1">Recommended Configuration</td>
-
-<td rowspan="1" colspan="1">Remarks</td>
-</tr>
-
-<tr>
-<td rowspan="8" colspan="1">Web</td>
-
-<td rowspan="2" colspan="1">Windows</td>
-
-<td rowspan="2" colspan="1">Chrome 90+<br>Firefox 90+<br>Edge 97+</td>
-
-<td rowspan="1" colspan="1">30</td>
-
-<td rowspan="1" colspan="1">Memory: 16GB<br>CPU: i5-10500<br>GPU: Dedicated 2GB</td>
-
-<td rowspan="3" colspan="1">It is recommended to use the latest version of Chrome browser<br> <b> (Enable hardware acceleration in the browser)</b></td>
-</tr>
-
-<tr>
-<td rowspan="1" colspan="1">15</td>
-
-<td rowspan="1" colspan="1">Memory: 8GB<br>CPU: i3-8300<br>GPU: Integrated Intel 1GB</td>
-</tr>
-
-<tr>
-<td rowspan="1" colspan="1">Mac</td>
-
-<td rowspan="1" colspan="1">Chrome 98+<br>Firefox 96+<br>Safari 14+</td>
-
-<td rowspan="1" colspan="1">30</td>
-
-<td rowspan="1" colspan="1">2019 MacBook<br>Memory: 16GB (2667MHz)<br>CPU: i7 (6-core 2.60GHz)<br>GPU: AMD Radeon 5300M</td>
-</tr>
-
-<tr>
-<td rowspan="3" colspan="1">Android</td>
-
-<td rowspan="3" colspan="1">Chrome<br>Firefox Browser
-
-<td rowspan="1" colspan="1">30</td>
-
-<td rowspan="1" colspan="1">High-end devices (e.g., Qualcomm Snapdragon 8 Gen1)</td>
-
-<td rowspan="3" colspan="1">It is recommended to use Chrome, or Firefox browsers and other mainstream browsers<br>
-</tr>
-
-<tr>
-<td rowspan="1" colspan="1">20</td>
-
-<td rowspan="1" colspan="1">Mid-range devices (e.g., MediaTek Dimensity 8000-MAX)</td>
-</tr>
-
-<tr>
-<td rowspan="1" colspan="1">10</td>
-
-<td rowspan="1" colspan="1">Low-end devices (e.g., Qualcomm Snapdragon 660)</td>
-</tr>
-
-<tr>
-<td rowspan="2" colspan="1">iOS</td>
-
-<td rowspan="2" colspan="1">Chrome<br>Safari<br>Firefox</td>
-
-<td rowspan="1" colspan="1">30</td>
-
-<td rowspan="1" colspan="1">iPhone 13</td>
-
-<td rowspan="2" colspan="1">- Requires iOS 14.4 or above<br>- It is recommended to use Chrome or Safari browsers<br></td>
-</tr>
-
-<tr>
-<td rowspan="1" colspan="1">20</td>
-
-<td rowspan="1" colspan="1">iPhone XR</td>
-</tr>
-
-</table>
+| Platform | Operating System | Browser Version | FPS | Recommended Configuration | Remarks |
+| --- | --- | --- | --- | --- | --- |
+| Web | Windows | Chrome 90+<br>Firefox 90+<br>Edge 97+ | 30 | Memory: 16GB<br>CPU: i5-10500<br>GPU: Dedicated 2GB | It is recommended to use the latest version of Chrome browser<br><b> (Enable hardware acceleration in the browser)</b> |
+| 15 | Memory: 8GB<br>CPU: i3-8300<br>GPU: Integrated Intel 1GB |  |  |  |  |
+| Mac | Chrome 98+<br>Firefox 96+<br>Safari 14+ | 30 | 2019 MacBook<br>Memory: 16GB (2667MHz)<br>CPU: i7 (6-core 2.60GHz)<br>GPU: AMD Radeon 5300M |  |  |
+| Android | Chrome<br>Firefox Browser
+
+<td rowspan="1" colspan="1">30 | High-end devices (e.g., Qualcomm Snapdragon 8 Gen1) |  |  |  |
+| 20 | Mid-range devices (e.g., MediaTek Dimensity 8000-MAX) |  |  |  |  |
+| 10 | Low-end devices (e.g., Qualcomm Snapdragon 660) |  |  |  |  |
+| iOS | Chrome<br>Safari<br>Firefox | 30 | iPhone 13 | - Requires iOS 14.4 or above<br>- It is recommended to use Chrome or Safari browsers |  |
+| 20 | iPhone XR |  |  |  |  |
 
 ## Implementation Steps
 

package/resource/doc/rtcengine/web/plugin/31-advanced-plugins-overview.md

@@ -63,7 +63,7 @@ import TRTC from 'trtc-sdk-v5';
 import { VirtualBackground } from 'trtc-sdk-v5/plugins/video-effect/virtual-background';
 import { AIDenoiser } from 'trtc-sdk-v5/plugins/ai-denoiser';
 
-const trtc = TRTC.create({ 
+const trtc = TRTC.create({
   plugins: [VirtualBackground, AIDenoiser],
   assetsPath: 'https://your-cdn/assets' // If plugins require static assets
 });
@@ -166,8 +166,8 @@ await trtc.updatePlugin('VideoMixer', {
 });
 
 // Publish mixed track
-await trtc.startLocalVideo({ 
-  option: { 
+await trtc.startLocalVideo({
+  option: {
     videoTrack: track,
     profile: { width: 1920, height: 1080, bitrate: 2000 }
   }
@@ -187,7 +187,7 @@ TRTCVideoDecoder automatically starts fallback logic on decode failure after reg
 ```javascript
 import TRTCVideoDecoder from 'trtc-sdk-v5/plugins/video-decoder';
 
-const trtc = TRTC.create({ 
+const trtc = TRTC.create({
   plugins: [TRTCVideoDecoder],
   assetsPath: 'https://your-cdn/assets'
 });
@@ -311,7 +311,7 @@ cp -r node_modules/trtc-sdk-v5/assets ./public/assets
 Pass the asset path when creating TRTC instance:
 
 ```javascript
-const trtc = TRTC.create({ 
+const trtc = TRTC.create({
   plugins: [VirtualBackground, AIDenoiser],
   assetsPath: 'https://your-cdn.com/assets'
 });