diff --git a/README.md b/README.md index c7c247dcd9..07fd77dc2a 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,16 @@ - # Web SDKs -This monorepo contains all the packages required to integrate 100ms on the web. +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) | +| `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-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)| For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs) @@ -18,21 +18,22 @@ For full documentation, visit [100ms.live/docs](https://www.100ms.live/docs)
## How to integrate? -The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences. + +The 100ms SDK gives you everything you need to build scalable, high-quality live video and audio experiences. **There are two ways you can add 100ms to your apps:** 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).
+ - 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).
> 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).
+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).
> Navigate to `roomkit-react` for the React components used in Prebuilt and the Prebuilt component itself by clicking [here](./packages/roomkit-react). @@ -40,16 +41,15 @@ The 100ms SDK gives you everything you need to build scalable, high-quality live ![Banner](prebuilt-banner.png) +### 100ms Prebuilt Cross Platform Support -### 100ms Prebuilt Cross Platform Support -| Client | Repository | Docs | Example | -|--|--|--|--| -| Web | [web-sdks](https://github.com/100mslive/web-sdks/tree/main/packages/roomkit-react) | [Link](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) | [prebuilt-react-integration](https://github.com/100mslive/web-sdks/tree/main/examples/prebuilt-react-integration) -| Android | [100ms-android](https://github.com/100mslive/100ms-android/tree/release-v2/room-kit) | [Link](https://www.100ms.live/docs/android/v2/quickstart/prebuilt-android) | [AndroidPrebuiltDemo](https://github.com/100mslive/AndroidPrebuiltDemo) -| iOS | [100ms-roomkit-ios](https://github.com/100mslive/100ms-roomkit-ios) | [Link](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt) | [100ms-roomkit-example](https://github.com/100mslive/100ms-roomkit-example) -| 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) - +| Client | Repository | Docs | Example | +| ------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | +| Web | [web-sdks](https://github.com/100mslive/web-sdks/tree/main/packages/roomkit-react) | [Link](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart) | [prebuilt-react-integration](https://github.com/100mslive/web-sdks/tree/main/examples/prebuilt-react-integration) | +| Android | [100ms-android](https://github.com/100mslive/100ms-android/tree/release-v2/room-kit) | [Link](https://www.100ms.live/docs/android/v2/quickstart/prebuilt-android) | [AndroidPrebuiltDemo](https://github.com/100mslive/AndroidPrebuiltDemo) | +| iOS | [100ms-roomkit-ios](https://github.com/100mslive/100ms-roomkit-ios) | [Link](https://www.100ms.live/docs/ios/v2/quickstart/prebuilt) | [100ms-roomkit-example](https://github.com/100mslive/100ms-roomkit-example) | +| 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) |

@@ -62,7 +62,6 @@ 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. - ``` git clone https://github.com/100mslive/web-sdks.git cd web-sdks @@ -81,16 +80,14 @@ yarn dev Once you run `yarn dev`, the localhost link with the port will be generated automatically. Just get the roomCode from [100ms dashboard](https://dashboard.100ms.live) and append at the end - ### Testing Changes Locally + Run `yarn start` by navigating to the package you are making changes to, the changes should reflect in the above sample app. 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` - -
### Deploying Your Changes @@ -100,8 +97,8 @@ Once you have forked the repository and tested your changes on the local build, - Import the fork repository - Set `examples/prebuilt-react-integration` as the root directory - Use the Create React App preset and update the build and install commands `Project Settings` to use the root level scripts - - install: `cd ../../ && yarn install` - - build: `cd ../../ && yarn build` + - install: `cd ../../ && yarn install` + - build: `cd ../../ && yarn build` For reference: @@ -109,7 +106,7 @@ For reference:
-Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes +Once the app has been deployed, you can append the room code at the end of the deployment URL to preview your changes
@@ -142,14 +139,12 @@ import { HMSPrebuilt } from '@100mslive/roomkit-react'; ``` ## Contributing -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. -Please join us [on Discord](https://discord.com/invite/kGdmszyzq2) to discuss any new ideas and/or PRs. +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.
## Community & Support -- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. -- [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team. -- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. +- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. +- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. diff --git a/examples/prebuilt-react-integration/README.md b/examples/prebuilt-react-integration/README.md index c0ba926c6d..244c6693f5 100644 --- a/examples/prebuilt-react-integration/README.md +++ b/examples/prebuilt-react-integration/README.md @@ -6,6 +6,3 @@ - Run `yarn && yarn build` at the root level of the repo (./web-sdks) - Then, navigate to this folder and run `yarn dev` - -### Facing a problem? -Join us on the [100ms Discord](https://discord.com/invite/kGdmszyzq2) to ask questions and get help from the 100ms team. diff --git a/packages/hms-whiteboard/src/ErrorFallback.tsx b/packages/hms-whiteboard/src/ErrorFallback.tsx index e4d97fa381..2e62d0aec8 100644 --- a/packages/hms-whiteboard/src/ErrorFallback.tsx +++ b/packages/hms-whiteboard/src/ErrorFallback.tsx @@ -3,7 +3,7 @@ import { useValue } from '@tldraw/state'; import { Editor, hardResetEditor } from '@tldraw/tldraw'; import classNames from 'classnames'; -const DISCORD_URL = 'https://discord.gg/pTge2BwDBq'; +const DASHBOARD_URL = 'https://dashboard.100ms.live/dashboard'; export type TLErrorFallbackComponent = ComponentType<{ error: unknown; @@ -141,7 +141,7 @@ export const ErrorFallback: TLErrorFallbackComponent = ({ error, editor, refresh

Something's gone wrong.

Sorry, we encountered an error. Please refresh the page to continue. If you keep seeing this error, you - can ask for help on Discord. + can ask for help on Dashboard.

{shouldShowError && (
diff --git a/packages/roomkit-react/README.md b/packages/roomkit-react/README.md index 92bff98b9c..b4a8f1f1ae 100644 --- a/packages/roomkit-react/README.md +++ b/packages/roomkit-react/README.md @@ -1,7 +1,6 @@ - ![Banner](https://github.com/100mslive/web-sdks/blob/06c65259912db6ccd8617f2ecb6fef51429251ec/prebuilt-banner.png) -# Room Kit React Library +# Room Kit React Library 100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps. @@ -44,6 +43,7 @@ export default App() { For additional props, refer the [docs](https://www.100ms.live/docs/javascript/v2/quickstart/prebuilt-quickstart#props-for-hmsprebuilt) ## Customisation + While we offer [a no-code way to customize Prebuilt](https://www.100ms.live/docs/get-started/v2/get-started/prebuilt/overview#customize-prebuilt), you can fork your copy of the Prebuilt component and make changes to the code to allow for more fine-tuning. Prebuilt customisations are available on [100ms Dashboard](https://dashboard.100ms.live). @@ -56,15 +56,14 @@ The `Prebuilt` folder contains the full Prebuilt implementation. ### Major Components in Prebuilt -| Component | Description | -|--|--| -| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](https://dashboard.100ms.live/). Whatever changes are made in the dashboard customiser are available the next time you join.| -|[AppStateContext](src/Prebuilt/AppStateContext.tsx) | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). | -| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input.| -| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content.| -| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) |This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | -| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) |This is the screen that is shown when you leave the meeting | - +| Component | Description | +| ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| [RoomLayoutProvider](src/Prebuilt/provider/roomLayoutProvider/index.tsx) | This is a context that contains the configuration from the dashboard [customiser](https://dashboard.100ms.live/). Whatever changes are made in the dashboard customiser are available the next time you join. | +| [AppStateContext](src/Prebuilt/AppStateContext.tsx) | Contains the logic to switch between different screens, for example, Preview to Meeting, Meeting to Leave. These transitions are based on the roomState that is available from the reactive store (`useHMSStore(selectHMSRoomState)`). | +| [PreviewScreen](src/Prebuilt/components/Preview/PreviewScreen.tsx) | Contains the Preview implementation. Contains the Video tile, video, audio toggles and Virtual background and settings along with the name input. | +| [ConferenceScreen](src/Prebuilt/components/ConferenceScreen.tsx) | This contains the screen once you finish Preview and enter the meeting. This contains the header and footer and the main content. | +| [VideoStreamingSection](src/Prebuilt/layouts/VideoStreamingSection.tsx) | This is the component that contains the main video rendering components and a sidebar (Interactive features like Chat and Polls are displayed here) | +| [LeaveScreen](src/Prebuilt/components/LeaveScreen.tsx) | This is the screen that is shown when you leave the meeting | ### Customising the Styles @@ -74,14 +73,13 @@ When [`HMSThemeProvider`](./src/Theme/ThemeProvider.tsx) is used at the top leve For components created using the base components like `Box`, `Flex`, `Button` etc, css Prop is available to modify the styles. Within the css prop, you can access the variables from the [base config](./src/Theme/base.config.ts). - ## Contributing - Make sure whatever new Component/file you create is in `Typescript`. - Don't forget to add data-testid for actionables like buttons, menus etc. -- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. +- Setup proper tooling ([ESLint](https://eslint.org/) and [Prettier](https://prettier.io/)) in your editor. - `yarn lint` will be run before you push the changes, so whenever a push fails, check if there are any lint errors. @@ -89,6 +87,6 @@ Read this [doc](../../DEVELOPER.MD) for the coding guidelines. ## Community & Support -- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. -- [Discord](https://discord.com/invite/kGdmszyzq2) - Hang out with the community members, share your projects or ask questions to get help from the 100ms team. -- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. +- [GitHub Issues](https://github.com/100mslive/web-sdks/issues) - Submit any bugs or errors you encounter using the Web SDKs. +- [Dashboard](https://dashboard.100ms.live/dashboard) - ask questions to get help from the 100ms team. +- [Contact](https://www.100ms.live/contact) - Reach out to 100ms team to get pricing information, understand how we can help you go live, or to learn more about the platform. diff --git a/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx b/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx index ed83c3a51b..7546be7dc2 100644 --- a/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx +++ b/packages/roomkit-react/src/Prebuilt/components/AuthToken.tsx @@ -107,8 +107,8 @@ const AuthToken = React.memo<{ const convertError = (error: HMSException) => { console.error('[error]', { error }); console.warn( - 'If you think this is a mistake on our side, please reach out to us over Discord:', - 'https://discord.com/invite/kGdmszyzq2', + 'If you think this is a mistake on our side, please reach out to us on Dashboard:', + 'https://dashboard.100ms.live/dashboard', ); return match([error.action, error.code]) .with(['GET_TOKEN', 403], () => ({ diff --git a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx index 8ae2dcdc49..a245758b59 100644 --- a/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx +++ b/packages/roomkit-react/src/Prebuilt/components/ErrorBoundary.jsx @@ -49,8 +49,8 @@ export class ErrorBoundary extends Component { Message: ${this.state.error}
Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on - - Discord + + Dashboard