100ms 2.0 Sample React App

About

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

Not using React? Find the Javascript Quickstart here.

Prerequisites

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

Clone the repo

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 the token generation endpoint

Get your token endpoint from the Developer section of 100ms' Dashboard Update the REACT_APP_TOKEN_GENERATION_ENDPOINT in .env file with the above token endpoint value (eg. https://prod-in.100ms.live/hmsapi/example.app.100ms.live/)

Run the app

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 a room

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.

Join the room

Before running the app locally make sure you update the environment file (.env) with the respective REACT_APP_TOKEN_GENERATION_ENDPOINT and REACT_APP_POLICY_CONFIG to avoid parsing error

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

Use any name & Click on join.

Additional Flags(present in .env file)

Configure UI layout

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 is used in the app as:

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

Tile Aspect Ratio

REACT_APP_TILE_SHAPE can be used for this, the format is width-height e.g. 1-1 for square tiles, 4-3 for landscape tiles and 16-9 for wide tiles.

Env - REACT_APP_THEME

dark - for dark theme light - for light theme

Env - REACT_APP_COLOR

You can give a hex code the color will be used fo buttons, border audio level and such.

Playlist Tracks(Watch Party)

This is a way to play any music or any videos from a url for everyone in the room to see/vibe to together. The support is only for file formats which are supported by the native audio and video elements, but it's super cool.

REACT_APP_AUDIO_PLAYLIST - a list of audio tracks which can be played by a person in the room for everyone REACT_APP_VIDEO_PLAYLIST - a list of video tracks which can be played by a person in the room for everyone