Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release - 0.12.25 #3387

Merged
merged 11 commits into from
Nov 28, 2024
1 change: 0 additions & 1 deletion .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
@raviteja83
@KaustubhKumar05
@amar-1995
@hdz-666
@ygit
42 changes: 19 additions & 23 deletions README.md
Original file line number Diff line number Diff line change
@@ -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.
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -71,7 +74,7 @@ yarn build

### Running Sample Prebuilt

```
```bash
cd examples/prebuilt-react-integration
yarn dev
```
Expand All @@ -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

Expand All @@ -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
Expand Down Expand Up @@ -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.
Expand Down
2 changes: 1 addition & 1 deletion examples/prebuilt-react-integration/package.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading