Noise cancellation and prebuilt (#2384)

* Prebuilt and tke * noise cancellation changes * remove v1 app * Adding Noise Cancellation doc * fixes * Noise cancellation doc
100mslive · Sep 20, 2024 · 3f84697 · 3f84697
1 parent 66be181
commit 3f84697
Show file tree

Hide file tree

Showing 17 changed files with 223 additions and 492 deletions.
diff --git a/docs/android/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx b/docs/android/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx
@@ -14,8 +14,10 @@ implementation "live.100ms:hms-noise-cancellation-android:$hmsVersion"
 ```
 2. Toggle noise cancellation on in your application with `hmsSDK.setNoiseCancellationEnabled(true)` in your `onJoin` callback.
 
-> Note: Prebuilt also supports noise cancellation, to enable it add the import as above and ensure it's enabled from your prebuilt dashboard. From the [dashboard](https://dashboard.100ms.live/), select the template, go to "Customize Prebuilt" -> "Screens and Components" -> "Noise Cancellation State".
-> You will also need to toggle it in the [dashboard's](https://dashboard.100ms.live/)"Template" -> "Advanced Settings" -> "Noise Cancellation"
+<Note type='warning'>
+**IMPORTANT** <br/>
+Enable Noise Cancellation in the template configuration. Learn more about enabling this feature from [here](/get-started/v2/get-started/features/noise-cancellation#enabling-the-noise-cancellation)
+</Note>
 
 > Note: Adding the library for noise cancellation will increase app size by 5.6 Mb.  
 Noise cancellation is turned off by default for all calls.

diff --git a/docs/flutter/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx b/docs/flutter/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx
@@ -23,7 +23,10 @@ The Noise Cancellation feature employs a sophisticated AI model trained specific
 
 `hmssdk_flutter` version 1.10.0 or higher is required to utilize the Noise Cancellation feature in your Flutter application.
 
-Also, this feature has gated access currently. To enable Noise Cancellation in your Rooms, reach out to **[email protected]** or connect with us on [100ms Discord](https://discord.com/invite/kGdmszyzq2).
+<Note type='warning'>
+**IMPORTANT** <br/>
+Enable Noise Cancellation in the template configuration. Learn more about enabling this feature from [here](/get-started/v2/get-started/features/noise-cancellation#enabling-the-noise-cancellation)
+</Note>
 
 ## Usage
 

diff --git a/docs/flutter/v2/quickstart/token-endpoint.mdx b/docs/flutter/v2/quickstart/token-endpoint.mdx
diff --git a/docs/get-started/v2/get-started/features/noise-cancellation.mdx b/docs/get-started/v2/get-started/features/noise-cancellation.mdx
@@ -0,0 +1,98 @@
+---
+title: Noise Cancellation
+nav: 3.9
+---
+
+The Noise Cancellation feature is an invaluable tool designed to enhance the audio quality in scenarios such as conferences, live streams, and recordings where unwanted background noise can degrade the listening experience.
+
+## Key Benefits
+
+- **Enhanced Audio Quality**: Eliminates unwanted noise, including background chatter, clicks, claps, barking, and other sudden audio disturbances, resulting in a more pleasant listening experience for your audience.
+
+- **Improved Clarity**: Ensures that the primary audio content remains prominent and intelligible by reducing distractions caused by ambient noise.
+
+- **Optimized Communication**: Facilitates seamless communication in conferences and live streams by minimizing disruptions caused by environmental factors, thereby enhancing the overall professionalism of the presentation.
+
+This is a guide to enabling and using the Noise Cancellation on 100ms.
+
+<StepsToc
+    parentId="noise-cancellation"
+    descriptions={[
+        "General information on 100ms Noise Cancellation.",
+        "Enabling the Noise Cancellation for your room(s).",
+        "Exploring platforms and methods of integration.",
+        "Activating and managing Noise Cancellation."
+    ]}
+/>
+
+<StepsContainer id="noise-cancellation">
+
+### Getting Started
+100ms Noise Cancellation is powered by [krisp.ai](https://krisp.ai/),ensuring clear communication by filtering out background noise.
+
+<Note type='warning'>
+**IMPORTANT** <br/>
+This is an add-on paid feature, for details check [100ms pricing page](https://www.100ms.live/pricing/) 
+</Note>
+
+### Enabling Noise Cancellation
+
+Noise Cancellation can be configured from the 100ms dashboard.
+
+#### Enabling Noise Cancellation at template level
+
+1. Navigate to a specific Template where you wish to enable the Noise Cancellation.
+2. Click on **‘Advanced Settings’** tab in the Template configuration.
+3. Enable ‘**Noise Cancellation**’.
+
+<video loop="true" autoplay="autoPlay" controls="false" id="vid" muted>
+    <source src="/docs/docs/v2/noise-cancellation/enable-nc.mp4" type="video/mp4" />
+</video>
+
+<Note>
+By default, noise cancellation is enabled for all peers and roles for all the new templates. For existing templates, to enable Noise Cancellation by default for all the peers and roles check below section.
+</Note>
+
+#### Enabling Noise Cancellation by default in preview
+
+For certain roles, you would like to enable Noise Cancellation by default from preview state. First enable the Noise Cancellation on Template as mentioned above.
+
+1. Navigate to a specific template where you wish to enable the Noise Cancellation.
+2. Click on **'Customise Prebuilt'** on top right in the Template.
+3. Click on **'Screens and Components'** and select the role where you wish to enable the Noise Cancellation by default
+4. Enable **'Noise Cancellation State'**.
+
+<video loop="true" autoplay="autoPlay" controls="false" id="vid" muted>
+    <source src="/docs/docs/v2/noise-cancellation/enable-nc-preview.mp4" type="video/mp4" />
+</video>
+
+### Integrating the Noise Cancellation
+Noise Cancellation is available across all platforms (iOS, Android, Flutter, React Native and Web). Refer to the following platform SDK specific guides:
+- [iOS](/ios/v2/how-to-guides/extend-capabilities/plugins/noise-cancellation)
+- [Android](/android/v2/how-to-guides/extend-capabilities/noise-cancellation)
+- [React Native](/react-native/v2/how-to-guides/extend-capabilities/noise-cancellation)
+- [Flutter](/flutter/v2/how-to-guides/extend-capabilities/noise-cancellation)
+- [Web](/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation)
+
+### Using Noise Cancellation
+Once Noise Cancellation is enabled and saved from the template configuration, the Noise Cancellation can be used across devices. Noise Cancellation can be activated or deactivated in the room or during the preview screen.
+
+<video loop="true" autoplay="autoPlay" controls="false" id="vid" muted>
+    <source src="/docs/docs/v2/noise-cancellation/experience-nc.mp4" type="video/mp4" />
+</video> 
+
+</StepsContainer>
+
+### Frequently Asked Questions (FAQ)
+
+1. **Is Noise Cancellation a chargeable feature?**
+
+    Yes, 100ms Noise Cancellation is charged based on per peer usage minutes. This means that for every peer that is enabling Noise Cancellation during session, their individual usage minutes will be aggregated. For more information, kindly check [100ms pricing page](https://www.100ms.live/pricing/).
+
+2. **Is Noise Cancellation available in prebuilt?**
+
+    Yes, 100ms Prebuilt supports Noise Cancellation out of the box. Enable the Noise Cancellation as mentioned above.
+
+3. **How to track Noise Cancellation usage?**
+
+    The usage can be tracked from the Usage Overview section on the [100ms Dashboard](https://dashboard.100ms.live/dashboard).
diff --git a/docs/ios/v2/how-to-guides/extend-capabilities/plugins/noise-cancellation.mdx b/docs/ios/v2/how-to-guides/extend-capabilities/plugins/noise-cancellation.mdx
@@ -29,6 +29,11 @@ let pathForNCModel = HMSNoiseCancellationModels.path(for: .smallFullBand)
 ## Minimum Requirements
 -   Minimum 100ms SDK version required is `1.7.0`
 
+<Note type='warning'>
+**IMPORTANT** <br/>
+Enable Noise Cancellation in the template configuration. Learn more about enabling this feature from [here](/get-started/v2/get-started/features/noise-cancellation#enabling-the-noise-cancellation)
+</Note>
+
 ## How to enable noise cancellation in your app
 
 To enable noise cancellation, you need HMSNoiseCancellationPlugin. Initialise HMSNoiseCancellationPlugin using this path to the AI model. You also pass the initial state of noise cancellation plugin as well.
@@ -148,8 +153,7 @@ roomModel.isNoiseCancellationEnabled
 
 ## How to check if noise cancellation is enabled in the room
 
-To make noise cancellation work your room needs to have noise cancellation feature enabled. You can check if noise cancellation is enabled using roomModel.isNoiseCancellationAvailable. To enable noise canellation in your rooms, reach out to support@100ms.live or 100ms discord.
-
+To make noise cancellation work your room needs to have noise cancellation feature enabled. You can check if it is enabled using roomModel.isNoiseCancellationAvailable. 
 ```swift
 roomModel.isNoiseCancellationAvailable
 ```

diff --git a/...cript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx b/...cript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx
@@ -14,6 +14,12 @@ This guide provides an overview of usage of the noise suppression plugin of 100m
 
 Minimum version requirement for `hms-video-store` - 0.11.7
 
+<Note type='warning'>
+**IMPORTANT** <br/>
+Enable Noise Cancellation in the template configuration. Learn more about enabling this feature from [here](/get-started/v2/get-started/features/noise-cancellation#enabling-the-noise-cancellation)
+</Note>
+
+
 **Get the 100ms noise cancellation Package**
 
 ```bash section=GetHMSNoiseCancellationPackage sectionIndex=1

diff --git a/docs/javascript/v2/quickstart/react-sample-app/build-and-deploy.mdx b/docs/javascript/v2/quickstart/react-sample-app/build-and-deploy.mdx