Merge branch 'feat/ISS-23388-mweb-stats-missing-fix' of https://githu…

…b.com/100mslive/web-sdks into feat/ISS-23388-mweb-stats-missing-fix

.github/CODEOWNERS

@@ -1,5 +1,4 @@
 @raviteja83
 @KaustubhKumar05
-@amar-1995
 @hdz-666
 @ygit

README.md

@@ -1,22 +1,30 @@
 # Web SDKs
 
+[![Lint, Test and Build](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml/badge.svg)](https://github.com/100mslive/web-sdks/actions/workflows/lint-test-build.yml)
+[![Activity](https://img.shields.io/github/commit-activity/m/100mslive/web-sdks.svg)](https://www.100ms.live/docs/javascript/v2/release-notes/release-notes)
+[![License](https://img.shields.io/npm/l/@100mslive/hms-video-store)](https://www.100ms.live/)
+[![Documentation](https://img.shields.io/badge/Read-Documentation-blue)](https://www.100ms.live/docs/javascript/v2/quickstart/javascript-quickstart)
+[![Register](https://img.shields.io/badge/Contact-Know%20More-blue)](https://dashboard.100ms.live/register)
+
 This monorepo contains all the packages required to integrate 100ms on the web.
 
 ## What is included?
 
 The packages folder contains all the SDK's of 100ms. Here is a brief overview of them:
+
 | Directory | Package | Description | Link |
 |--|--|--|--|
 | `hms-video-store` | `@100mslive/hms-video-store` | This package contains the core SDK and the reactive store parts. | [README](./packages/hms-video-store) |
-| `react-icons` | `@100mslive/react-icons` | This contains all the icons used in the 100ms prebuilt. | [README](./packages/react-icons) |
 | `react-sdk` | `@100mslive/react-sdk` | This contains the base React Hooks and some commonly used functionalities as React Hooks. | [README](./packages/react-sdk) |
 | `roomkit-react` | `@100mslive/roomkit-react`| This contains the React components used in the Prebuilt and the Prebuilt component itself. | [README](./packages/roomkit-react) |
-| `roomkit-web` | `@100mslive/roomkit-web` | This is a web component port of the `HMSPrebuilt` component from the `roomkit-react`. If you are not using React,this can be used as a web component. | [README](./packages/roomkit-web)|
+| `roomkit-web` | `@100mslive/roomkit-web` | This is a web component port of the `HMSPrebuilt` component from the `roomkit-react`. If you are not using React, this can be used as a web component. | [README](./packages/roomkit-web)|
+| `hls-player` | `@100mslive/hls-player` | This is a HLS player offered by 100ms that can be used to play live video streams. | [README](./packages/hls-player) |
+| `hms-whiteboard` | `@100mslive/hms-whiteboard` | This contains APIs for integrating Whiteboard collaboration into your conferencing sessions. | [README](./packages/hms-whiteboard) |
+| `hms-virtual-background` | `@100mslive/hms-virtual-background` | This contains the Virtual Background plugin provided by 100ms. | [README](./packages/hms-virtual-background) |
+| `react-icons` | `@100mslive/react-icons` | This contains all the icons used in the 100ms prebuilt. | [README](./packages/react-icons) |
 
 For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs)
 
-<br>
-
 ## How to integrate?
 
 The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences.
@@ -26,19 +34,17 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live
 1. ## Custom UI
    - 100ms SDKs are powerful and highly extensible to build and support all custom experiences and UI.
    - **Related packages include:** `@100mslive/react-sdk`, `@100mslive/hms-video-store` and `@100mslive/react-icons`.
-   - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration). <br>
+   - Get started with integrating the SDK using the [How to Guide](https://www.100ms.live/docs/javascript/v2/how-to-guides/install-the-sdk/integration).
 
 > Navigate to `react-sdk` for the base React Hooks and some commonly used functionalities by clicking [here](./packages/react-sdk).
 
 2.  ## 100ms Prebuilt
     - 100ms Prebuilt is a high-level abstraction with no-code customization that enables you to embed video conferencing and/or live streaming UI—with a few lines of code.
     - **Related packages include:** `roomkit-react` and `roomkit-web`.
-    - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart). <br>
+    - Get started with 100ms Prebuilt using the [Prebuilt Quickstart for Web](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart).
 
 > Navigate to `roomkit-react` for the React components used in Prebuilt and the Prebuilt component itself by clicking [here](./packages/roomkit-react).
 
-<hr>
-
 ![Banner](prebuilt-banner.png)
 
 ### 100ms Prebuilt Cross Platform Support
@@ -51,9 +57,6 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live
 | Flutter      | [100ms-flutter](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit)                    | [Link](https://www.100ms.live/docs/flutter/v2/quickstart/prebuilt)               | [hms_room_kit/example](https://github.com/100mslive/100ms-flutter/tree/main/packages/hms_room_kit/example)                        |
 | React Native | [100ms-react-native](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit) | [Link](https://www.100ms.live/docs/react-native/v2/quickstart/prebuilt)          | [react-native-room-kit/example](https://github.com/100mslive/100ms-react-native/tree/main/packages/react-native-room-kit/example) |
 
-<hr>
-<br>
-
 ## Setup
 
 ### Local Setup
@@ -62,7 +65,7 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live
 
 if you are using a different version in other projects, use [nvm](https://github.com/nvm-sh/nvm?tab=readme-ov-file#installing-and-updating) to manage node versions.
 
-```
+```bash
 git clone https://github.com/100mslive/web-sdks.git
 cd web-sdks
 yarn install
@@ -71,7 +74,7 @@ yarn build
 
 ### Running Sample Prebuilt
 
-```
+```bash
 cd examples/prebuilt-react-integration
 yarn dev
 ```
@@ -86,9 +89,7 @@ Run `yarn start` by navigating to the package you are making changes to, the cha
 
 For example, if you are making changes in roomkit-react(prebuilt), run `yarn start` in that package. The sample app should auto reload.
 
-> Note: Make sure `yarn build` is run atleast once before using `yarn start`
-
-<br>
+> Note: Make sure `yarn build` is run atleast once before using `yarn start`.
 
 ### Deploying Your Changes
 
@@ -104,17 +105,14 @@ For reference:
 
 ![Project Settings](./project-settings.png)
 
-<br />
 
 Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes
 
-<br>
-
 ### Maintaining A Forked Version
 
-Tthe following command will build the roomkit-react package and generate a .tgz file:
+The following command will build the roomkit-react package and generate a .tgz file:
 
-```
+```bash
 yarn && yarn build;
 cd packages/roomkit-react;
 yarn pack
@@ -142,8 +140,6 @@ import { HMSPrebuilt } from '@100mslive/roomkit-react';
 
 We welcome external contributors or anyone excited to help improve 100ms SDKs. If you'd like to get involved, check out our [contribution guide](./DEVELOPER.MD), and get started exploring the codebase.
 
-<br>
-
 ## Community & Support
 
 - [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs.