This is an example React app to demo 100ms' React SDK.

Not using React? Find the Javascript Quickstart here.

You will need Node.js version v12.13.0 or greater installed on your system.

Get the code by cloning this repo using git.

git clone [email protected]:100mslive/100ms-web-v2.git

Once cloned, open the terminal in the project directory, and install dependencies with:

cd 100ms-web-v2
yarn install

Create a new file .env and copy the values from example.env

cp example.env .env

Get your token generation endpoint from the Developer section of 100ms' Dashboard

Update the REACT_APP_TOKEN_GENERATION_ENDPOINT in .env file with your token generation service endpoint (eg. https://prod-in.100ms.live/hmsapi/example.app.100ms.live/)

Then start the app with:

yarn start

The app now should be running at https://localhost:3000/. (Please ignore the 404 message, you need to join the right URL of the room. Next sections describe how to create a room and form the correct URL)

Create room from 100ms Dashboard & get the room_id & role of the created room. Room details page after creating the room gives you room_id and roles allowed in the room.

Visit the URL : https://localhost:3000/meeting/<room_id>/< role > to join the room

Use any name & Click on join.

Depending on the value of REACT_APP_POLICY_CONFIG in .env, you can customize which roles should be displayed in center stage and which roles should be display in side pane.

The value of REACT_APP_POLICY_CONFIG should be a JSON stringified object of the structure:

type HMSRoleName = string;

/**
 * undefined means none
 * empty array [] for all roles
 */
interface RoleConfig {
  center?: HMSRoleName[];
  sidepane?: HMSRoleName[];
  selfRoleChangeTo?: HMSRoleName[];
  remoteRoleChangeFor?: HMSRoleName[];
}

interface PolicyConfig {
  [role: string]: RoleConfig;
}

Example: REACT_APP_POLICY_CONFIG = "{"trainer":{"center": ["student"],"sidepane":["trainer"]}"

It will be used in the app as:

const envPolicyConfig = JSON.parse(process.env.REACT_APP_POLICY_CONFIG || "{}");