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 index 771bd3f3b9..183db57ff3 100644 --- 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" + +**IMPORTANT**
+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: 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 index 8d29a11d3c..7455ca325e 100644 --- a/docs/flutter/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx +++ b/docs/flutter/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx @@ -21,7 +21,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 **support@100ms.live** or connect with us on [100ms Discord](https://discord.com/invite/kGdmszyzq2). + +**IMPORTANT**
+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) +
## Usage diff --git a/docs/flutter/v2/quickstart/token-endpoint.mdx b/docs/flutter/v2/quickstart/token-endpoint.mdx deleted file mode 100644 index 37dd3f21b6..0000000000 --- a/docs/flutter/v2/quickstart/token-endpoint.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Auth Token Endpoint Guide -nav: 2.4 ---- - -## Overview - -100ms provides an option to get `Auth Tokens` without setting up a token generation backend service to simplify your integration journey while testing the [sample app](https://github.com/100mslive/100ms-web) or building integration with 100ms. - -You can find the token endpoint from the [developer page](https://dashboard.100ms.live/developer) in your 100ms dashboard. - -![Token endpoint](/guides/token-endpoint-dashboard.png) - -We recommend you move to your token generation service before you transition your app to production, as our token endpoint service will not scale in production. - -The "Sample Apps" built using 100ms client SDKs require an `Auth Token` to join a room to initiate a video conferencing or live streaming session. Please check the [Authentication and Tokens guide](/flutter/v2/foundation/security-and-tokens) - -Please note that you cannot use the token endpoint to create a `Management Token` for server APIs. Refer to the [Management Token section](/flutter/v2/foundation/security-and-tokens#management-token) in Authentication and Tokens guide for more information. - -## Get an auth token using token endpoint - -You can use the token endpoint from your 100ms dashboard while building integration with 100ms. This acts as a tool enabling front-end developers to complete the integration without depending on the backend developers to set up a token generation backend service. - -**URL format:** `api/token` - -100ms token endpoint can generate an Auth token with the inputs passed, such as room_id, role, & user_id (optional - your internal user identifier as the peer's user_id). You can use [jwt.io](https://jwt.io/) to validate whether the Auth token contains the same input values. - - - - -```bash -curl --location --request POST 'https://prod-in2.100ms.live/hmsapi/johndoe.app.100ms.live/api/token' \ ---header 'Content-Type: application/json' \ ---data-raw '{ - "room_id":"633fcdd84208780bf665346a", - "role":"host", - "user_id":"1234" -}' -``` - - - - -```json -{ - "token": "eyJ0eXAiOiJKV1QiLCJhbGciOi***************************R3tT-Yk", - "msg": "token generated successfully", - "status": 200, - "success": true, - "api_version": "2.0.192" -} -``` - - - -### Example client-side implementation - -You can directly add this to your client-side implementation, check our [sample app](https://github.com/100mslive/100ms-flutter/blob/0d4c3b5409003932d80cb19f67027a63424169e7/example/lib/service/room_service.dart#L8) for reference. - -### Disable 100ms token endpoint - -Due to some security concerns, if you don't wish to use the token endpoint to generate Auth tokens, then you can disable it on the [Developers page](https://dashboard.100ms.live/developer) on your dashboard by disabling the option "Disable <room_id>/<role> link format." - -![Disable Token endpoint](/guides/disable-token-endpoint.png) - -#### Error Response - -Once you're disabled it on the dashboard, the requests to create an Auth token using the 100ms token endpoint will throw the below error: - -```json -{ - "success": false, - "msg": "Generating token using the room_id and role is disabled.", - "api_version": "2.0.192" -} -``` diff --git a/docs/get-started/v2/get-started/features/noise-cancellation.mdx b/docs/get-started/v2/get-started/features/noise-cancellation.mdx new file mode 100644 index 0000000000..565ab3f5a1 --- /dev/null +++ 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. + + + + + +### Getting Started +100ms Noise Cancellation is powered by [krisp.ai](https://krisp.ai/),ensuring clear communication by filtering out background noise. + + +**IMPORTANT**
+This is an add-on paid feature, for details check [100ms pricing page](https://www.100ms.live/pricing/) +
+ +### 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**’. + + + + +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. + + +#### 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'**. + + + +### 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. + + + +
+ +### 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). \ No newline at end of file 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 index 769c3105d2..504abea731 100644 --- 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` + +**IMPORTANT**
+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) +
+ ## 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/docs/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx b/docs/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx index 41c75ed6be..95d3743599 100644 --- a/docs/javascript/v2/how-to-guides/extend-capabilities/plugins/krisp-noise-cancellation.mdx +++ b/docs/javascript/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 + +**IMPORTANT**
+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) +
+ + **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 deleted file mode 100644 index 19a57a69b1..0000000000 --- a/docs/javascript/v2/quickstart/react-sample-app/build-and-deploy.mdx +++ /dev/null @@ -1,81 +0,0 @@ ---- -title: Build and Deploy -nav: 1.08 ---- - -## Overview - -Once you have customized the app as per your needs and tested it in your local development environment, you can build and deploy the app to one of your preferred platforms like Vercel, Netlify, AWS, Web server, Docker, etc. - -## Build the app - -[100ms-web](https://github.com/100mslive/100ms-web/) app is just like any react application. To build the app, just run - -```bash -yarn build or -npm build -``` - -If everything goes well, you should see something like this in the terminal. - -```bash -webpack 5.70.0 compiled successfully in 22546 ms -✨ Done in 30.72s. -``` - -All the files that got built in the above step will be in the `build/` directory. This is all we need to deploy. The files are just plain HTML/CSS/JS and could be deployed in many different ways. We discuss some popular ones below. - -## Deploy the code - -There are many ways to deploy 100ms-web. We discuss a few methods below. Please feel free to reach out to us if you don't find your preferred platform here. - -- [Netlify](#netlify) -- [Vercel](#vercel) - -### Netlify - -Deploying 100ms-web to [Netlify](https://www.netlify.com/) is straightforward and same as deploying any project to Netlify. There are two ways to deploy to Netlify: - -#### Deploy via Git (Recommended) - -If you had forked 100ms-web and have customized it, it is highly likely you are using git. If you did, You can directly deploy to Netlify. Netlify supports GitHub, GitLab and Bitbucket. Netlify has great documentation on how to do it. - -- [A Step-by-Step Guide: Deploying on Netlify - ](https://www.netlify.com/blog/2016/09/29/a-step-by-step-guide-deploying-on-netlify/) -- [Netlify Tutorial - Deploying from Git (Video)](https://youtu.be/4h8B080Mv4U) - -#### Deploy the files directly - -If you want to directly upload your files, Netlify provides a very easy drag & drop interface for it. - -- [Netlify Tutorial - Drag and drop deploys on Netlify (Video)](https://youtu.be/etZ9HSUoTPU) - -> We recommend using Git in general if you are planning to use this code for production. Only use the direct method if you want to quickly test something or do some proof-of-concept. - -If you are interested in Netlify's CI/CD or just want to learn more about deploying to Netlify, please check their docs [here](https://docs.netlify.com/site-deploys/create-deploys/) - -### Vercel - -Deploying to Vercel is pretty much straightforward similar to Netlify. - -- You can start with a [New Vercel app](https://vercel.com/new). In that page, import your repository from git, Click next - - ![vercel_wiki_0](/docs/v2/vercel_0.png) - -- In the next page, create a team first - - ![vercel_wiki_1](/docs/v2/vercel_1.png) - -- Then in **Configure Project** section, select **Framework preset** as **Create React App** and then add any extra build settings you want to add. Make sure to add the environment variables for the app below that. For more details See [Environment Variables](https://github.com/100mslive/100ms-web/wiki/Environment-Variables) - - ![vercel_wiki_2](/docs/v2/vercel_2.png) - - > You can change the environment variables any time later in the settings page of your project dashboard. Every time you change a variable, add/remove a variable, you have to rebuild and make a new deployment for the environment variables to take effect. This is a mandatory step and must be done. - -- Now click deploy. Wait for the project to be deployed. Once it's successful, you should see a screen like this - - ![vercel_wiki_3](/docs/v2/vercel_3.png) - -- Click **Go to dashboard**. In the dashboard page, you should be able to see the app by clicking "Visit" button on the deployment screen. Click it to see your app in action. - -That's it. You are all done. diff --git a/docs/javascript/v2/quickstart/react-sample-app/customize-the-app.mdx b/docs/javascript/v2/quickstart/react-sample-app/customize-the-app.mdx deleted file mode 100644 index 6117e79aad..0000000000 --- a/docs/javascript/v2/quickstart/react-sample-app/customize-the-app.mdx +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Customize Your App -nav: 1.07 ---- - -## Overview - -This [sample app](https://github.com/100mslive/100ms-web) allows UI customization like updating logo, tile aspect ratio, theme, etc. To make these customizations, you can use various environment variables in the env file. - -## Change logo - -You can use `REACT_APP_LOGO` variable to change your logo in the sample app to customize the UI as per your brand. - -**Example:** - -```bash -REACT_APP_LOGO='https://example.com/public/logo.svg' -``` - -## Change tile aspect ratio - -You can use the `REACT_APP_TILE_SHAPE` variable to customize the aspect ratio of video tiles; the format is `width-height`. - -**Examples:** - -- `REACT_APP_TILE_SHAPE='1-1'`: for square tiles -- `REACT_APP_TILE_SHAPE='4-3'`: for landscape tiles -- `REACT_APP_TILE_SHAPE='16-9'`: for wide tiles -- `REACT_APP_TILE_SHAPE='9-16'`: for mobile view - -## Change theme - -- Use the `REACT_APP_THEME` variable to switch the theme between dark and light mode - - **Examples:** - - `REACT_APP_THEME='dark'`: for dark theme - - `REACT_APP_THEME='light'`: for light theme - -## Change font - -You can use `REACT_APP_FONT` variable to update the font used in the app. The font must be imported in your styling for it to work. - -**Example:** - -```bash -REACT_APP_FONT='Roboto' -``` - -## Playlist tracks (watch party) - -- You can play music or videos from a URL for everyone in the room to watch together. The support is only for file formats that are supported by the native audio and video elements, but it's super cool. - -- You can configure the list of audio/video tracks that can be played by a person in the room for everyone as follows: - - - **Example: Audio playlist** - - ```json - REACT_APP_AUDIO_PLAYLIST=[ - { - "name": "Audio1", - "id": "audio1", - "metadata": { "description": "Artist1" }, - "url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/audio1.mp3", - "type": "audio" - }, - { -
- } - ] - ``` - - - **Example: Video playlist** - - ```json - REACT_APP_VIDEO_PLAYLIST=[ - { - "name": "Video2", - "id": "video2", - "url": "https://d2qi07yyjujoxr.cloudfront.net/webapp/playlist/video2.mp4", - "type": "video" - }, - { -
- } - ] - ``` diff --git a/docs/javascript/v2/quickstart/react-sample-app/quickstart.mdx b/docs/javascript/v2/quickstart/react-sample-app/quickstart.mdx deleted file mode 100644 index 29887e8754..0000000000 --- a/docs/javascript/v2/quickstart/react-sample-app/quickstart.mdx +++ /dev/null @@ -1,124 +0,0 @@ ---- -title: Quickstart Guide -nav: 1.06 ---- - -## Overview - -[100ms-web](https://github.com/100mslive/100ms-web) is a fully featured sample application built using React. This application gives you a ready-made starting point for writing your video apps or customizing the cloned app based on your needs. - -You can use this app to test: - -- **Basic functionalities**: Video calling, Recording, Interactive live streaming (HLS), External streaming (RTMP), Screenshare, and Picture-in-Picture (PiP). -- **Interactive features**: Chat (broadcast, direct, & group), Raise hand. -- **Plugins**: Virtual background, Collaborative whiteboard. - -The app also includes other features and capabilities like custom audio/video tracks, control remote peers, network quality and performance stats, adaptive bitrate (Simulcast), and more. - -The sample app is intended to accelerate development, provide a full reference of all the features and capabilities, and demonstrate implementation with easy-to-read code. - -If you are a developer trying to build an app from scratch, please check our [quickstart guide](/javascript/v2/get-started/react-quickstart). Quickstart provides a simple and quick way to build a reference app and familiarize yourself with the different capabilities of the platform with minimal code. - -## Local development - - - - - -### Set up the app repository - -- Clone the repository from [GitHub](https://github.com/100mslive/100ms-web). - - ```bash section=cloneRepo sectionIndex=1 - git clone git@github.com:100mslive/100ms-web.git - ``` - -- Change your working directory to `100ms-web`. - - ```bash section=cloneRepo sectionIndex=2 - cd 100ms-web - ``` - -- Install the dependencies using `npm` or `yarn`. - - ```bash section=cloneRepo sectionIndex=3 - npm install or - yarn install - ``` - -### Configure auth token endpoint - -- Set environment variables to configure token generation endpoint. Use the following command to copy the values from "example.env" to a new file called ".env". - - ```bash section=envVariable sectionIndex=1 - cp example.env .env - ``` - -- Update the 100ms token endpoint as an environment variable to handle auth token generation. You can get your token endpoint from the [Developer section of 100ms' Dashboard](https://dashboard.100ms.live/developer). - - ![token endpoint](https://user-images.githubusercontent.com/11087313/140727818-43cd8be4-b3bf-4b34-9921-a77f9a1b819d.png) - - **Example**: - - ```bash - REACT_APP_TOKEN_GENERATION_ENDPOINT = 'https://prod-in2.100ms.live/hmsapi/example.app.100ms.live/' - ``` - -### Start and test the app - -#### Start the app - -- Start the app with the below command. - - ```bash section=runApp sectionIndex=1 - npm start or - yarn start - ``` - -- The app should now be running at [http://localhost:3000/](http://localhost:3000/). You should see a welcome message saying, "Almost There!". - -#### Create and join a room - -- To test audio/video functionality, you need to connect to a 100ms room; please check following steps for the same: - - 1. Navigate to your [100ms Dashboard](https://dashboard.100ms.live/dashboard) or [create an account](https://dashboard.100ms.live/register) if you don't have one. - 2. To test this app quickly, use the "Video Conferencing Starter Kit" to create a room with a default template assigned to it. - 3. Go to [Rooms page](https://dashboard.100ms.live/rooms) in your Dashboard, copy the "Room Id" of the room and role created in the above step. - 4. Add the "Room Id" and role to the localhost URL to test the app. For example, `http://localhost:3000/633fcdd84208780bf665346a/host` - -
- -
- -
- -## Next steps - -#### [Customize the app](/javascript/v2/get-started/react-sample-app/customize-the-app) - -Customize your UI like updating logo, tile aspect ratio, theme, etc. as per your brand. - -#### [Build and deploy](/javascript/v2/get-started/react-sample-app/build-and-deploy) - -Building and deploying the 100ms sample app is simple and the same as any React project. You can deploy this to Vercel, Netlify, AWS, Web server, Docker, etc., as you prefer. - -#### [iframe integration](/javascript/v2/get-started/react-sample-app/embed-with-iframe) - -You can use the [deployed](/javascript/v2/get-started/react-sample-app/build-and-deploy) URL in an iframe to embed the whole sample app inside your UI. - -#### [Code structure](https://github.com/100mslive/100ms-web/wiki/code-structure) - -Check the overall project structure of the sample app to understand how the code is organized and understand various components of the app. - -#### [Simple quickstart](/javascript/v2/get-started/react-quickstart) - -Please check our quickstart guide if you're trying to get started with 100ms with a basic app. diff --git a/docs/prebuilt/v2/prebuilt/Appearance.mdx b/docs/prebuilt/v2/prebuilt/Appearance.mdx index 3ddde19cf7..2f44f93184 100644 --- a/docs/prebuilt/v2/prebuilt/Appearance.mdx +++ b/docs/prebuilt/v2/prebuilt/Appearance.mdx @@ -9,7 +9,7 @@ Head to [100ms dashboard](https://dashboard.100ms.live/dashboard), choose an exi ## Changing Logo -You can easily replace the default logo that appears on the Prebuilt interface with your own logo. To do this, click on "Logo" input field and provide the URL of your custom logo image. Ensure that the image meets your desired dimensions. The supported image format is .png. For best results, upload an image with a transparent background. +You can easily replace the default logo that appears on the Prebuilt interface with your own logo. To do this, click on "Logo" input field and upload your custom logo image. Ensure that the image meets your desired dimensions. The supported image format is .png. For best results, upload an image with a transparent background.
diff --git a/docs/prebuilt/v2/prebuilt/Screens-and-components.mdx b/docs/prebuilt/v2/prebuilt/Screens-and-components.mdx index e0eb2ea1ad..5d2fd0d450 100644 --- a/docs/prebuilt/v2/prebuilt/Screens-and-components.mdx +++ b/docs/prebuilt/v2/prebuilt/Screens-and-components.mdx @@ -22,13 +22,33 @@ By default, components are enabled based on the role associated with the use cas ### Preview Screen +The Prebuilt preview screen offers a set of components designed to enhance the initial set-up before joining a room. Choose a role to kickstart your customization journey. -#### Header +##### Header Set up a custom header for each roles using Title and Subtitle fields. -#### Join +##### Join Choose how peers join the room - - **Join Now** - Peers from this role will see "Join Now" and would be able join after entering their name. - - **Join and Start Streaming** - Peers from this role will see "Go Live" and would be able to join and start streaming when they join the room. Ensure that this role has the permission to "Start/Stop HLS streaming" as `enabled` under Role permissions on its template configuration. + - **Join Now** - Peers from this role will see 'Join Now' and would be able join after entering their name. + - **Join and Start Streaming** - Peers from this role will see 'Go Live' and would be able to join and start streaming when they join the room. Ensure that this role has the permission to 'Start/Stop HLS streaming' as `enabled` under Role permissions on its template configuration. + +##### Skip Preview + - Turn the toggle to enable or disable skipping the preview screen. + - **Enabled**: When this option is enabled, the preview screen is skipped, and the user is taken directly to the room screen. + + When skip preview is enabled, ensure that the username is passed in the prebuilt links or in the options in the prebuilt component. If not provided, the system will generate a random UUID as the peer's name. + + +##### Noise Cancellation State + - Turn the toggle to define the initial state for Noise Cancellation. + - **Enabled**: When this option is enabled, Noise Cancellation will be turned on by default in preview screen for all the peers of this role. + + Noise Cancellation should be enabled from 'Advanced Settings' under the Template to enable this setting. Learn more about enabling this feature from [here](/get-started/v2/get-started/features/noise-cancellation#enabling-the-noise-cancellation) + + +##### Virtual Background + - Turn the toggle to enable virtual background for this role. Click on 'Upload Image' to add your own image as backgrounds. + Head over [Virtual Background](/prebuilt/v2/prebuilt/virtual-background) for more details. + ### Room Screen The Prebuilt room screen offers a set of components designed to enhance interactivity within a room. Choose a role to kickstart your customization journey. @@ -36,68 +56,104 @@ The Prebuilt room screen offers a set of components designed to enhance interact #### Chat Toggle the chat functionality on or off for a specific role. When chat is disabled for a role, that role won't have access to the chat component within the room. If enabled, you can further fine-tune and customize the functionalities of the Prebuilt UI for chat. -##### Initial State -This setting determines whether the chat component is initially open or closed when a participant joins a session. Keeping the initial state as open can be particularly useful when using the chat overlay view on mobile devices. +##### Chat UI +Customize the prebuilt chat UI + +- ###### Chat Panel Name and Message Placeholder + This setting lets you rename the chat panel name and message placeholder as per your design + +- ###### Initial State + This setting determines whether the chat component is initially open or closed when a participant joins a session. Keeping the initial state as open can be particularly useful when using the chat overlay view on mobile devices. + +- ###### Enable Overlay View + In an overlay view, the chat component overlays on top of video tiles, delivering an immersive chat experience for mobile livestreaming scenarios. Please note that this chat view is exclusively available on mobile devices and is not supported on large-screen applications. + +##### Chat Controls +Customize the prebuilt chat controls -##### Enable Overlay View -In an overlay view, the chat component overlays on top of video tiles, delivering an immersive chat experience for mobile livestreaming scenarios. Please note that this chat view is exclusively available on mobile devices and is not supported on large-screen applications. +- ###### Allow Pinning messages + Enabling this feature allows the selected role to pin important chat messages on the chat component, making them visible to everyone. -##### Allow Pinning messages -Enabling this feature allows the selected role to pin important chat messages on the chat component, making them visible to everyone. +- ###### Allow hiding messages + Enabling this feature allows the selected role to hide the unwanted chat messages, making it invisible to everyone. +- ###### Allow blocking peers in chat + Enabling this feature allows the selected role to block the peer from sending any messages in the chat. -#### Participant List +- ###### Allow pausing chat + Enabling this feature allows the selected role to pause the chat messages during the session, once paused no peer can send any messages in the chat until it is resumed. + +- ###### Public chat + Enabling this feature allows the selected role to send the chat messages as public and everyone in the room can view these messages. + +- ###### Private chat + Enabling this feature allows the selected role to send the chat messages as private to everyone in the room which has the permission to send pricate messages. + +- ###### Role-specific chat + Enabling this feature allows the selected role to send the chat messages to another selected roles + + +##### Participant List Ensure participant list accessibility for roles that require visibility. In certain scenarios, such as large room viewers, there may be no need for them to view other participants, but Hosts or Broadcasters might find it essential to maintain oversight of the participant list. By default, the participant list is enabled for all roles across all templates. -#### Video Tile Layout +##### Video Tile Layout 100ms Prebuilt UI allows tweaks on its default grid layout and supports multiple video layouts. -##### Enable local tile inset -Enabling this makes the local peer's *(for the selected role)* tile in a smaller inset window as default, alternatively if it's disabled, the local tile will be part of the grid view. Join with at least two peers to preview this configuration in action. +- ###### Enable local tile inset + Enabling this makes the local peer's *(for the selected role)* tile in a smaller inset window as default, alternatively if it's disabled, the local tile will be part of the grid view. Join with at least two peers to preview this configuration in action. + +- ###### Prominent roles + Defining one or more roles as prominent gives them higher tile view prominence for the selected role. For example: + - For a 1:1 call, define Host as prominent tile for Guest and vice-versa. + - For a webinar, set Host as the prominent tile for all other roles. Every role would see Host as the primary tile in the room + - For a mobile-first livestreaming view, set Broadcaster as prominent tile for every other role, including Broadcaster themselves. -##### Prominent roles -Defining one or more roles as prominent gives them higher tile view prominence for the selected role. For example: -- For a 1:1 call, define Host as prominent tile for Guest and vice-versa. -- For a webinar, set Host as the prominent tile for all other roles. Every role would see Host as the primary tile in the room -- For a mobile-first livestreaming view, set Broadcaster as prominent tile for every other role, including Broadcaster themselves. +- ###### Can spotlight peer + Allow this config for roles who can spotlight others or themselves in the room. Spotlighting a tile reflects for everyone in the room. -##### Can spotlight peer -Allow this config for roles who can spotlight others or themselves in the room. Spotlighting a tile reflects for everyone in the room. + + Assigning a role as 'prominent' for either themselves or other roles establishes a fixed layout that remains unchanged for the entire session. This is particularly well-suited for scenarios where a specific role needs to maintain a constant presence, as seen in webinars and livestreaming. Conversely, spotlighting either their own tile or the tiles of others permits specific participant tiles to temporarily take center stage within the session, allowing for more adaptable layout adjustments as needed + - -Assigning a role as "prominent" for either themselves or other roles establishes a fixed layout that remains unchanged for the entire session. This is particularly well-suited for scenarios where a specific role needs to maintain a constant presence, as seen in webinars and livestreaming. Conversely, spotlighting either their own tile or the tiles of others permits specific participant tiles to temporarily take center stage within the session, allowing for more adaptable layout adjustments as needed. - +- ###### Tiles in view + Select the default number of video tiles that a peer will view in a room. For optimal performance it is recommended to keep it at 9. + + This setting is currently only supported on web. + -#### Be Right Back (BRB) +##### Be Right Back (BRB) Depending on your use case, allow roles to set themselves on BRB mode. If disabled, this component will not be visible to the selected role. -#### Emoji Reactions +##### Emoji Reactions Enabling this for a role allows its peers to send emoji reactions in the room. -#### Bring others on Stage +##### Hand Raise +Allows participants with this role to virtually raise their hand during a session, indicating their intention to: request attention or assistance, signal a question or comment, or request to join the stage (if 'Bring others on stage' is enabled). If 'Bring others on stage' is enabled, raising a hand will prompt the session host or moderator to consider changing the participant's role, allowing them to join the stage and actively participate. If 'Bring others on stage' is disabled, the hand raise will serve as a visual cue without any automatic role change. The session host or moderator can acknowledge the raised hand and address the participant's need accordingly. + +##### Bring others on Stage Stage is a virtual space within a room that enables participants to actively engage with their audio and video, and publish it with a much larger audience. With the 'Bring on Stage' feature enabled, viewers who are not on stage can easily interact with the participants on stage, once they have been granted access to the stage. Enable Bring on stage for roles that require the ability to allow or deny stage requests from off-stage participants. By default, this feature is enabled for Hosts, Broadcasters and Co-broadcasters, while viewers with non-publishing roles can use the hand-raise option to request stage access. This component can extend its support to conferencing, webinars and livestreaming scenarios. However, if your use case does not require this feature, you can simply disable it to ensure a seamless experience for all users. -##### Bring on Stage Label +- ###### Bring on Stage Label -Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Bring to stage". + Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Bring to stage". -##### Remove from Stage Label +- ###### Remove from Stage Label -Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Remove from stage". + Customize text label that Hosts and Broadcasters will see when they receive on stage requests. The default text is "Remove from stage". -##### On Stage and Off Stage Role -An off stage participant becomes an on stage participant once their stage access has been accepted. For instance, an off stage role, say Viewer requests a Broadcaster to go on stage. Once their request is accepted, the Viewer can transition to an on stage role, which could be a Viewer-on-stage, a Guest, or a Co-broadcaster. +- ###### On Stage and Off Stage Role + An off stage participant becomes an on stage participant once their stage access has been accepted. For instance, an off stage role, say Viewer requests a Broadcaster to go on stage. Once their request is accepted, the Viewer can transition to an on stage role, which could be a Viewer-on-stage, a Guest, or a Co-broadcaster. -Let's take a quick example to understand this better. + Let's take a quick example to understand this better. -Assume a livestreaming scenario with Bring on stage enabled for Broadcasters and Co-Broadcasters, where -- Off-stage participants have been assigned role: Viewer a role with no audio/video publish permissions -- On-stage participants have been assigned role : Guest, a role with audio/video publish permissions + Assume a livestreaming scenario with Bring on stage enabled for Broadcasters and Co-Broadcasters, where + - Off-stage participants have been assigned role: Viewer a role with no audio/video publish permissions + - On-stage participants have been assigned role : Guest, a role with audio/video publish permissions -Once the configuration is set under Bring on stage, join Prebuilt links or apps as these roles: Broadcaster, Co-Broadcaster and Viewer to try bring on stage feature like below: -1. Participants from Viewer role can choose to raise their hand during a session to request to go on stage and interact with Broadcaster(s) and Co-Broadcaster(s) -2. Broadcaster(s) and Co-Broadcaster(s) will receive stage access notification from these off-stage partcipants; where they can choose to accept or deny the stage request. Meanwhile, a Viewer can choose to lower their hand untill their request has been accepted or denied. Broadcaster(s) can also track all such requests under "Hand Raise" section under participant list. -3. When a Broadcaster accepts a stage request from a Viewer(an off-stage participant), the Viewer becomes a Guest (an on-stage participant) as per the configuration set -4. Broadcaster(s) can choose to mute/unmute audio/video for Guest or simply remove them from stage. + Once the configuration is set under Bring on stage, join Prebuilt links or apps as these roles: Broadcaster, Co-Broadcaster and Viewer to try bring on stage feature like below: + 1. Participants from Viewer role can choose to raise their hand during a session to request to go on stage and interact with Broadcaster(s) and Co-Broadcaster(s) + 2. Broadcaster(s) and Co-Broadcaster(s) will receive stage access notification from these off-stage partcipants; where they can choose to accept or deny the stage request. Meanwhile, a Viewer can choose to lower their hand untill their request has been accepted or denied. Broadcaster(s) can also track all such requests under "Hand Raise" section under participant list. + 3. When a Broadcaster accepts a stage request from a Viewer(an off-stage participant), the Viewer becomes a Guest (an on-stage participant) as per the configuration set + 4. Broadcaster(s) can choose to mute/unmute audio/video for Guest or simply remove them from stage. diff --git a/docs/react-native/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx b/docs/react-native/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx index 7ad0253911..d348acdbe1 100644 --- a/docs/react-native/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx +++ b/docs/react-native/v2/how-to-guides/extend-capabilities/noise-cancellation.mdx @@ -21,7 +21,11 @@ The Noise Cancellation feature employs a sophisticated AI model trained specific `@100mslive/react-native-hms` version 1.10.2 or later is required to utilize the Noise Cancellation feature in your React Native application. -Also, this feature has gated access currently. To enable Noise Cancellation in your rooms, reach out to **support@100ms.live** or connect with us on [100ms Discord](https://discord.com/invite/kGdmszyzq2). + +**IMPORTANT**
+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) +
+ ## Usage diff --git a/docs/react-native/v2/quickstart/token-endpoint.mdx b/docs/react-native/v2/quickstart/token-endpoint.mdx deleted file mode 100644 index 051b0b7bc9..0000000000 --- a/docs/react-native/v2/quickstart/token-endpoint.mdx +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Auth Token Endpoint Guide -nav: 2.5 ---- - -## Overview - -100ms provides an option to get `Auth Tokens` without setting up a token generation backend service to simplify your integration journey while testing the [sample app](https://github.com/100mslive/100ms-web) or building integration with 100ms. - -You can find the token endpoint from the [developer page](https://dashboard.100ms.live/developer) in your 100ms dashboard. - -![Token endpoint](/guides/token-endpoint-dashboard.png) - -We recommend you move to your token generation service before you transition your app to production, as our token endpoint service will not scale in production. - -The "Sample Apps" built using 100ms client SDKs require an `Auth Token` to join a room to initiate a video conferencing or live streaming session. Please check the [Authentication and Tokens guide](/react-native/v2/foundation/security-and-tokens) - -Please note that you cannot use the token endpoint to create a `Management Token` for server APIs. Refer to the [Management Token section](/react-native/v2/foundation/security-and-tokens#management-token) in Authentication and Tokens guide for more information. - -## Get an auth token using token endpoint - -You can use the token endpoint from your 100ms dashboard while building integration with 100ms. This acts as a tool enabling front-end developers to complete the integration without depending on the backend developers to set up a token generation backend service. - -**URL format:** `api/token` - -100ms token endpoint can generate an Auth token with the inputs passed, such as room_id, role, & user_id (optional - your internal user identifier as the peer's user_id). You can use [jwt.io](https://jwt.io/) to validate whether the Auth token contains the same input values. - - - - -```bash -curl --location --request POST 'https://prod-in2.100ms.live/hmsapi/johndoe.app.100ms.live/api/token' \ ---header 'Content-Type: application/json' \ ---data-raw '{ - "room_id":"633fcdd84208780bf665346a", - "role":"host", - "user_id":"1234" -}' -``` - - - - -```json -{ - "token": "eyJ0eXAiOiJKV1QiLCJhbGciOi***************************R3tT-Yk", - "msg": "token generated successfully", - "status": 200, - "success": true, - "api_version": "2.0.192" -} -``` - - - -### Example client-side implementation - -You can directly add this to your client-side implementation, check our [sample app](https://github.com/100mslive/react-native-hms/blob/7bd6420ea49d520acd881de9ac5d76b36498bb67/example/src/services/index.ts#L3) for reference. - -### Disable 100ms token endpoint - -Due to some security concerns, if you don't wish to use the token endpoint to generate Auth tokens, then you can disable it on the [Developers page](https://dashboard.100ms.live/developer) on your dashboard by disabling the option "Disable <room_id>/<role> link format." - -![Disable Token endpoint](/guides/disable-token-endpoint.png) - -#### Error Response - -Once you're disabled it on the dashboard, the requests to create an Auth token using the 100ms token endpoint will throw the below error: - -```json -{ - "success": false, - "msg": "Generating token using the room_id and role is disabled.", - "api_version": "2.0.192" -} -``` diff --git a/public/docs/v2/noise-cancellation/enable-nc-preview.mp4 b/public/docs/v2/noise-cancellation/enable-nc-preview.mp4 new file mode 100644 index 0000000000..44e8314512 Binary files /dev/null and b/public/docs/v2/noise-cancellation/enable-nc-preview.mp4 differ diff --git a/public/docs/v2/noise-cancellation/enable-nc.mp4 b/public/docs/v2/noise-cancellation/enable-nc.mp4 new file mode 100644 index 0000000000..9d596fa8ce Binary files /dev/null and b/public/docs/v2/noise-cancellation/enable-nc.mp4 differ diff --git a/public/docs/v2/noise-cancellation/experience-nc.mp4 b/public/docs/v2/noise-cancellation/experience-nc.mp4 new file mode 100644 index 0000000000..6b45e52437 Binary files /dev/null and b/public/docs/v2/noise-cancellation/experience-nc.mp4 differ diff --git a/releases.js b/releases.js index 58f241bf44..2833f85d4d 100644 --- a/releases.js +++ b/releases.js @@ -1 +1 @@ -exports.releases = releases = {"Android":{"version":"v2.9.3","date":"February 17, 2024"},"iOS":{"version":"1.6.0","date":"February 27, 2024"},"React Native":{"version":"1.9.12","date":"February 26, 2024"},"Web":{"version":"2024-02-23","date":"February 23, 2024"},"Flutter":{"version":"1.9.11","date":"February 26, 2024"},"Server-side":{"version":"2024-02-27","date":"February 27, 2024"}} \ No newline at end of file +exports.releases = releases = {"Android":{"version":"v2.9.65","date":"August 13, 2024"},"iOS":{"version":"1.16.0","date":"August 13, 2024"},"React Native":{"version":"1.10.9","date":"July 31, 2024"},"Web":{"version":"2024-08-16","date":"August 16, 2024"},"Flutter":{"version":"1.10.5","date":"July 25, 2024"},"Server-side":{"version":"2024-02-28","date":"February 28, 2024"}} \ No newline at end of file