https://github.com/theakshaymore/eavesdrop
https://github.com/theakshaymore/eavesdrop
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/theakshaymore/eavesdrop
- Owner: theakshaymore
- License: mit
- Created: 2021-10-06T21:11:18.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2021-10-06T21:11:21.000Z (over 3 years ago)
- Last Synced: 2025-02-01T03:31:56.575Z (4 months ago)
- Language: JavaScript
- Size: 6.14 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: CODEOWNERS
Awesome Lists containing this project
README
# 100ms 2.0 Sample React App
[](https://docs.100ms.live/javascript/v2/foundation/basics)
[](https://discord.gg/F8cNgbjSaQ)
[](mailto:[email protected])
## About
This is an example React app to demo [100ms' React SDK](https://www.npmjs.com/package/@100mslive/hms-video-react).
Not using React? Find the [Javascript Quickstart here](https://docs.100ms.live/javascript/v2/guides/javascript-quickstart).
## Prerequisites
You will need [Node.js](https://nodejs.org) version v12.13.0 or greater installed on your system.
## Clone the repo
Get the code by cloning this repo using git.
```bash
git clone [email protected]:100mslive/100ms-web-v2.git
```
Once cloned, open the terminal in the project directory, and install dependencies with:
```bash
cd 100ms-web-v2
yarn install
```
Create a new file `.env` and copy the values from `example.env`
```bash
cp example.env .env
```
### Get the token generation endpoint
Get your [token generation](https://docs.100ms.live/javascript/v2/guides/token) endpoint from the [Developer section of 100ms' Dashboard](https://dashboard.100ms.live/developer)
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:
```bash
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](https://dashboard.100ms.live/create-room) & 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.
### 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:
```ts
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:
```js
const envPolicyConfig = JSON.parse(process.env.REACT_APP_POLICY_CONFIG || "{}");
```
### 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//< role > to join the room
Use any name & Click on join.