AgoraIO · atovpeko · Jul 26, 2024 · Jul 25, 2024 · Jul 25, 2024 · Jul 25, 2024
diff --git a/assets/images/extensions-marketplace/beauty-effect.png b/assets/images/extensions-marketplace/beauty-effect.png
diff --git a/assets/images/extensions-marketplace/video-compositor-tech.png b/assets/images/extensions-marketplace/video-compositor-tech.png
diff --git a/assets/images/extensions-marketplace/video-compositor-usecase.png b/assets/images/extensions-marketplace/video-compositor-usecase.png
diff --git a/.../extensions-marketplace/super-clarity.svg → ...nsions-marketplace/web-extension-tech.svg b/.../extensions-marketplace/super-clarity.svg → ...nsions-marketplace/web-extension-tech.svg
diff --git a/broadcast-streaming/advanced-features/beauty-effect.mdx b/broadcast-streaming/advanced-features/beauty-effect.mdx
@@ -0,0 +1,14 @@
+---
+title: "Beauty effect (Beta)"
+sidebar_position: 14.2
+type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
+description: >
+    Integrate the beauty effect extension to achieve a natural beauty effect
+---
+
+import BeautyEffect from '@docs/shared/extensions-marketplace/_beauty-effect.mdx';
+
+export const toc = [{}];
+
+<BeautyEffect />
diff --git a/broadcast-streaming/advanced-features/image-enhancement.mdx b/broadcast-streaming/advanced-features/image-enhancement.mdx
diff --git a/broadcast-streaming/advanced-features/super-clarity.mdx b/broadcast-streaming/advanced-features/super-clarity.mdx
@@ -0,0 +1,14 @@
+---
+title: "Super clarity (Beta)"
+sidebar_position: 14.7
+type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
+description: >
+    Improve image quality with the Super Clarity extension
+---
+
+import ImageQuality from '@docs/shared/extensions-marketplace/_super-clarity.mdx';
+
+export const toc = [{}];
+
+<ImageQuality />
diff --git a/broadcast-streaming/advanced-features/video-compositor.mdx b/broadcast-streaming/advanced-features/video-compositor.mdx
@@ -1,13 +1,14 @@
 ---
-title: 'Video Compositor (beta)'
-sidebar_position: 17
+title: "Video compositor (Beta)"
+sidebar_position: 14.5
 type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
 description: >
-    Gives you granular control over the degree of image enhancement, such as skin lightening, skin smoothing, and red saturation.
+    Integrate the Video Compositor extension to combine multiple local video streams
 ---
 
-import VideoCompositor from '@docs/shared/video-sdk/develop/_video-compositor.mdx';
+import CombineImages from '@docs/shared/extensions-marketplace/_video-compositor.mdx';
 
 export const toc = [{}];
 
-<VideoCompositor />
+<CombineImages />
diff --git a/broadcast-streaming/advanced-features/virtual-background.mdx b/broadcast-streaming/advanced-features/virtual-background.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Virtual Background'
-sidebar_position: 17
+title: 'Virtual background'
+sidebar_position: 15
 type: docs
 excluded_platforms: ["blueprint"]
 description: >
@@ -11,5 +11,5 @@ import VirtualBackground from '@docs/shared/extensions-marketplace/virtual-backg
 
 export const toc = [{}];
 
-<VirtualBackground />
+<VirtualBackground PRODUCT="Broadcast Streaming" COMPANY="Agora" PATH="broadcast-streaming" CLIENT="app" />
 
diff --git a/extensions-marketplace/develop/integrate/activefence.mdx b/extensions-marketplace/develop/integrate/activefence.mdx
@@ -2,6 +2,7 @@
 title: "ActiveFence Video Content Moderation"
 sidebar_position: 1
 type: docs
+excluded_platforms: ["macos", "windows"]
 description: >
     Integrate and use the ActiveFence content extension in your app.
 ---

diff --git a/extensions-marketplace/develop/integrate/banuba.mdx b/extensions-marketplace/develop/integrate/banuba.mdx
@@ -2,6 +2,7 @@
 title: "Banuba AR Face Filter"
 sidebar_position: 3
 type: docs
+excluded_platforms: ["web", "macos", "windows", "flutter", "react-native"]
 description: >
     Enable augmented reality features in video calls such as face filters, face touch up filters and virtual backgrounds.
 ---

diff --git a/extensions-marketplace/develop/integrate/byteplus.mdx b/extensions-marketplace/develop/integrate/byteplus.mdx
@@ -2,6 +2,7 @@
 title: "BytePlus Effects"
 sidebar_position: 4
 type: docs
+excluded_platforms: ["web", "macos", "windows", "flutter", "react-native"]
 description: >
     BytePlus Effects extension encapsulates the core APIs of the BytePlus Effects SDK.
 ---

diff --git a/extensions-marketplace/develop/integrate/deepar.mdx b/extensions-marketplace/develop/integrate/deepar.mdx
@@ -2,6 +2,7 @@
 title: "DeepAR"
 sidebar_position: 6
 type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native"]
 description: >
     Enable augmented reality features in video calls such as face filters, face touch up filters and virtual backgrounds.
 ---

diff --git a/extensions-marketplace/develop/integrate/dubbing-voice-changer.mdx b/extensions-marketplace/develop/integrate/dubbing-voice-changer.mdx
@@ -2,6 +2,7 @@
 title: "Dubbing AI Voice Changer"
 sidebar_position: 7
 type: docs
+excluded_platforms: ["web", "macos", "windows", "flutter", "react-native"]
 description: >
     Dubbing AI Voice Changer extension is an encapsulation of the core API of real-time AI voice conversion.
 ---

diff --git a/extensions-marketplace/develop/integrate/faceunity.mdx b/extensions-marketplace/develop/integrate/faceunity.mdx
@@ -2,6 +2,7 @@
 title: "FaceUnity AR Filter"
 sidebar_position: 8
 type: docs
+excluded_platforms: ["web", "macos", "windows", "react-native"]
 description: >
     Integrate and use the FaceUnity AR Filter extension in your  Android or iOS app.
 ---

diff --git a/extensions-marketplace/develop/integrate/ht_3d_avatar.mdx b/extensions-marketplace/develop/integrate/ht_3d_avatar.mdx
@@ -2,6 +2,7 @@
 title: "HTEffect 3D Avatar"
 sidebar_position: 9
 type: docs
+excluded_platforms: ["web", "macos", "windows", "flutter", "react-native"]
 description: >
      Integrate and use HT Portrait 3D special effects.
 ---

diff --git a/extensions-marketplace/develop/integrate/livedata-conversation-intelligence.mdx b/extensions-marketplace/develop/integrate/livedata-conversation-intelligence.mdx
@@ -2,6 +2,7 @@
 title: "LiveData Conversation Intelligence"
 sidebar_position: 10
 type: docs
+excluded_platforms: ["web", "macos", "windows", "flutter", "react-native"]
 description: >
     Integrate and use the LiveData Conversation Intelligence extension in your app.
 ---

diff --git a/extensions-marketplace/develop/integrate/super-clarity.mdx b/extensions-marketplace/develop/integrate/super-clarity.mdx
@@ -0,0 +1,14 @@
+---
+title: "Super clarity (Beta)"
+sidebar_position: 7
+type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
+description: >
+    Improve image quality with the Super Clarity extension
+---
+
+import ImageQuality from '@docs/shared/extensions-marketplace/_super-clarity.mdx';
+
+export const toc = [{}];
+
+<ImageQuality />
diff --git a/extensions-marketplace/develop/integrate/superclarity.mdx b/extensions-marketplace/develop/integrate/superclarity.mdx
diff --git a/extensions-marketplace/develop/integrate/symbl_ai.mdx b/extensions-marketplace/develop/integrate/symbl_ai.mdx
@@ -2,6 +2,7 @@
 title: "Symbl Conversation Intelligence"
 sidebar_position: 12
 type: docs
+excluded_platforms: ["ios", "web", "macos", "windows", "flutter", "react-native"]
 description: >
     Enable augmented reality features in video calls such as face filters, face touch up filters and virtual backgrounds.
 ---

diff --git a/extensions-marketplace/develop/integrate/synervoz.mdx b/extensions-marketplace/develop/integrate/synervoz.mdx
@@ -2,6 +2,7 @@
 title: "Synervoz Voice FX"
 sidebar_position: 13
 type: docs
+excluded_platforms: ["web", "macos", "windows", "flutter", "react-native"]
 description: >
     Provides the following voice filters to users: echo, reverb, flanger and pitch shift.
 ---

diff --git a/interactive-live-streaming/advanced-features/beauty-effect.mdx b/interactive-live-streaming/advanced-features/beauty-effect.mdx
@@ -0,0 +1,14 @@
+---
+title: "Beauty effect (Beta)"
+sidebar_position: 14.2
+type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
+description: >
+    Integrate the Beauty Effect extension to achieve natural beautification
+---
+
+import BeautyEffect from '@docs/shared/extensions-marketplace/_beauty-effect.mdx';
+
+export const toc = [{}];
+
+<BeautyEffect />
diff --git a/interactive-live-streaming/advanced-features/super-clarity.mdx b/interactive-live-streaming/advanced-features/super-clarity.mdx
@@ -0,0 +1,14 @@
+---
+title: "Super clarity (Beta)"
+sidebar_position: 14.7
+type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
+description: >
+    Improve image quality with the Super Clarity extension
+---
+
+import ImageQuality from '@docs/shared/extensions-marketplace/_super-clarity.mdx';
+
+export const toc = [{}];
+
+<ImageQuality />
diff --git a/interactive-live-streaming/advanced-features/video-compositor.mdx b/interactive-live-streaming/advanced-features/video-compositor.mdx
@@ -0,0 +1,14 @@
+---
+title: "Video compositor (Beta)"
+sidebar_position: 14.5
+type: docs
+excluded_platforms: ["android", "ios", "macos", "windows", "flutter", "react-native", "electron", "react-js", "unity", "unreal", "blueprint"]
+description: >
+    Integrate the Video Compositor extension to combine multiple local video streams
+---
+
+import CombineImages from '@docs/shared/extensions-marketplace/_video-compositor.mdx';
+
+export const toc = [{}];
+
+<CombineImages />
diff --git a/interactive-live-streaming/advanced-features/virtual-background.mdx b/interactive-live-streaming/advanced-features/virtual-background.mdx
@@ -1,6 +1,6 @@
 ---
-title: 'Virtual Background'
-sidebar_position: 17
+title: 'Virtual background'
+sidebar_position: 15
 type: docs
 excluded_platforms: ["blueprint"]
 description: >
@@ -11,5 +11,5 @@ import VirtualBackground from '@docs/shared/extensions-marketplace/virtual-backg
 
 export const toc = [{}];
 
-<VirtualBackground />
+<VirtualBackground PRODUCT="Interactive Live Streaming" COMPANY="Agora" PATH="interactive-live-streaming" CLIENT="app" />
 
diff --git a/shared/extensions-marketplace/_beauty-effect.mdx b/shared/extensions-marketplace/_beauty-effect.mdx
@@ -0,0 +1,42 @@
+import ProjectImplement from '@docs/shared/extensions-marketplace/beauty-effect/project-implementation/index.mdx';
+import Reference from '@docs/shared/extensions-marketplace/beauty-effect/reference/index.mdx'; 
+import NotSupported from '@docs/shared/extensions-marketplace/not-supported.mdx'
+
+<PlatformWrapper platform="web">
+
+The <Vg k="RTEE_BEAUTY" /> extension enables your users to apply beauty effects to their videos. They can adjust settings for whitening, skin smoothing, acne removal, and redness to achieve a natural beauty effect.
+
+![Beauty effect extension](/images/extensions-marketplace/beauty-effect.png)
+
+Try out the [online demo](https://webdemo.agora.io/beauty-extension/index.html).
+
+<Admonition>
+For integrating the <Vg k="RTEE_BEAUTY" /> extension, <Vg k="COMPANY" /> recommends upgrading to version 4.12.0 or later of the Web SDK.
+</Admonition>
+
+## Understand the tech
+
+The media transmission pipeline of the Agora Web SDK consists of capture, pre-processing, encoding, transmission, decoding, post-processing, and playback stages. In the pre-processing stage, the <Vg k="RTEE_BEAUTY" /> extension processes video data to apply the desired effects.
+
+![Beauty effect tech](/images/extensions-marketplace/web-extension-tech.svg)
+
+## Prerequisites
+
+Ensure that you have implemented the [SDK quickstart](/video-calling/get-started/get-started-sdk) in your project using the Web SDK version 4.12.0 or later.
+
+## Implement beauty effects
+
+This section shows you how to integrate <Vg k="RTEE_BEAUTY" /> extension into your project and apply beauty effects.
+
+<ProjectImplement />
+
+## Reference
+
+This section contains content that completes the information in this page, or points you to documentation that explains other aspects to this product. 
+
+<Reference />
+
+</PlatformWrapper>
+<PlatformWrapper notAllowed="web">
+<NotSupported />
+</PlatformWrapper>
diff --git a/shared/extensions-marketplace/_super-clarity.mdx b/shared/extensions-marketplace/_super-clarity.mdx
@@ -0,0 +1,33 @@
+import ProjectImplement from '@docs/shared/extensions-marketplace/super-clarity/project-implementation/index.mdx';
+import Reference from '@docs/shared/extensions-marketplace/super-clarity/reference/index.mdx';
+import NotSupported from '@docs/shared/extensions-marketplace/not-supported.mdx'
+
+<PlatformWrapper platform="web">
+The <Vg k="RTEE_CLARITY" /> extension leverages Agora's AI quality enhancement algorithm, which intelligently improves video quality without altering the resolution, thereby optimizing the viewing experience at the receiving end. The AI enhancement algorithm supports over 95% of mobile devices and ensures high-quality video rendering on low-end devices.
+
+## Understand the tech
+
+The media transmission pipeline of the Agora Web SDK consists of capture, pre-processing, encoding, transmission, decoding, post-processing, and playback stages. The <Vg k="RTEE_CLARITY" /> extension processes video data in the post-processing stage to apply the AI enhancement effect.
+
+![Super clarity tech](/images/extensions-marketplace/web-extension-tech.svg)
+
+## Prerequisites
+
+Ensure that you have implemented the [SDK quickstart](/video-calling/get-started/get-started-sdk) in your project.
+
+## Implement the logic  
+
+This section shows you how to integrate the <Vg k="RTEE_CLARITY" /> extension into your <Vpl k="CLIENT" />.
+
+<ProjectImplement />
+
+## Reference
+
+This section completes the information on this page, or points you to documentation that explains other aspects about this product.
+
+<Reference/>
+</PlatformWrapper>
+
+<PlatformWrapper notAllowed="web">
+<NotSupported />
+</PlatformWrapper>