Giter Club home page Giter Club logo

100mslive's Introduction

100ms 2.0 Sample React App

Documentation Discord Email

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 download 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.

image

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

image

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.