This monorepo contains all the packages required to integrate 100ms on the web.

The packages folder contains all the SDK's of 100ms. Here is a brief overview of them:

For full documentation, visit 100ms.live/docs

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.

Navigate to react-sdk for the base React Hooks and some commonly used functionalities by clicking here.

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.

Navigate to roomkit-react for the React components used in Prebuilt and the Prebuilt component itself by clicking here.

Node version 18.0.0 or later

if you are using a different version in other projects, use nvm to manage node versions.

git clone https://github.com/100mslive/web-sdks.git
cd web-sdks
yarn install
yarn build

cd examples/prebuilt-react-integration
yarn dev

http://locahost:<port>/<room-code>

Once you run yarn dev, the localhost link with the port will be generated automatically. Just get the roomCode from 100ms dashboard and append at the end

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.

Once you have forked the repository and tested your changes on the local build, you can follow the steps below to deploy to Vercel as an example:

• 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

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

The following command will build the roomkit-react package and generate a .tgz file:

yarn && yarn build;
cd packages/roomkit-react;
yarn pack

Push your changes and the .tgz file to the forked repository and in the package.json of the app you are building, use the following link for the roomkit-react package:

"@100mslive/roomkit-react":"https://github.com/<user_name>/web-sdks/raw/main/packages/roomkit-react/<tgz_file_name>.tgz",

Re-install the dependencies after updating the package.json and build using the following command:

yarn && yarn build

You can now import the HMSPrebuilt component in the same way as before:

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, and get started exploring the codebase.

• GitHub Issues - Submit any bugs or errors you encounter using the Web SDKs.
• 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.