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 git@github.com: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 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/)

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

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

Use any name & Click on join.

Configure policy based UI

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 || "{}");

dariob/100ms-web