Environment Variables

100ms-web uses environment variables to customize the app. Below list contains all the environment variable and their meaning. Environment variables must be set in .env file in the project root. See Setting environment variables

---

⚠️ Note:

• if you change your environment variables, your webapp must be restarted using yarn start. Otherwise, the changes won't take effect. Similarly, you might want to redeploy your app when using services like Vercel for new/updated environment variables to take effect.

---

Table of contents

• Mandatory variables
  • REACT_APP_TOKEN_GENERATION_ENDPOINT
  • REACT_APP_ENV
• Configure UI layout
  • REACT_APP_SHOW_CHAT
  • REACT_APP_SHOW_SCREENSHARE
  • REACT_APP_VIDEO_AVATAR
  • REACT_APP_POLICY_CONFIG
• Tile Aspect Ratio
  • REACT_APP_TILE_SHAPE
• Appearance
  • REACT_APP_THEME
  • REACT_APP_COLOR
  • REACT_APP_FONT
• Watch party

Mandatory variables

REACT_APP_TOKEN_GENERATION_ENDPOINT

this is needed for getting app token. See Setting environment variable

REACT_APP_ENV

tells the webapp which endpoint to connect. (e.g) 'prod'.

Configure UI layout

REACT_APP_SHOW_CHAT

set to true if we want to enable chat

REACT_APP_SHOW_SCREENSHARE

set to true if we want to show "screenshare" button

REACT_APP_VIDEO_AVATAR

set to true if we want to show avatar on video tiles.

REACT_APP_POLICY_CONFIG

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

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.

Appearance

REACT_APP_THEME

• dark - for dark theme
• light - for light theme

REACT_APP_COLOR

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

REACT_APP_FONT

You can give a font name to be used within the app. The font must be imported in your styling for it to work.

Watch party

Playlist Tracks - REACT_APP_AUDIO_PLAYLIST, REACT_APP_VIDEO_PLAYLIST

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