{"_id":"100ms_edtech_template","_rev":"1-d8c5fa33c178670c20bce9fc804f3e7b","name":"100ms_edtech_template","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.4":{"name":"100ms_edtech_template","version":"0.1.4","private":false,"main":"dist/index.cjs.js","module":"dist/index.js","dependencies":{"@100mslive/hms-noise-suppression":"0.1.9","@100mslive/hms-virtual-background":"1.3.8","@100mslive/react-icons":"0.0.11","@100mslive/react-sdk":"0.0.11","@100mslive/react-ui":"0.0.11","@testing-library/jest-dom":"^5.11.4","@testing-library/react":"^11.1.0","@testing-library/user-event":"^12.1.10","@tldraw/tldraw":"^1.5.0","hls.js":"^1.1.1","js-confetti":"^0.10.2","logrocket":"^2.2.0","logrocket-react":"^5.0.1","mobx":"^6.3.12","pusher-js":"^7.0.3","react":"^17.0.2","react-dom":"^17.0.2","react-router-dom":"^5.2.0","react-use":"^17.3.2","recordrtc":"^5.6.2","screenfull":"^5.1.0","uuid":"^8.3.2","web-vitals":"^1.0.1","worker-timers":"^7.0.40"},"scripts":{"prebuild":"rm -rf build","build":"NODE_ENV=production webpack","start":"webpack serve","esbuild":"node ../../scripts/build-webapp","dev":"node ../../scripts/dev-webapp","format":"prettier -w src"},"browserslist":{"production":[">0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/eslint-parser":"^7.17.0","autoprefixer":"^10.4.2","copy-webpack-plugin":"^10.2.1","css-loader":"^6.5.1","cssnano":"^5.0.15","dotenv":"^14.2.0","esbuild-loader":"^2.18.0","esbuild-plugin-postcss2":"0.1.1","eslint":"^8.9.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-webpack-plugin":"^3.1.1","html-webpack-plugin":"^5.5.0","mini-css-extract-plugin":"^2.5.2","postcss":"^8.4.5","postcss-loader":"^6.2.1","prettier":"^2.5.1","tailwindcss":"^3.0.15","webpack":"^5.69.1","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4","webpack-manifest-plugin":"^4.1.1"},"description":"

0.2%","not dead","not op_mini all"],"development":["last 1 chrome version","last 1 firefox version","last 1 safari version"]},"devDependencies":{"@babel/eslint-parser":"^7.17.0","autoprefixer":"^10.4.2","copy-webpack-plugin":"^10.2.1","css-loader":"^6.5.1","cssnano":"^5.0.15","dotenv":"^14.2.0","esbuild-loader":"^2.18.0","esbuild-plugin-postcss2":"0.1.1","eslint":"^8.9.0","eslint-config-react-app":"^7.0.0","eslint-plugin-import":"^2.25.4","eslint-plugin-prettier":"^4.0.0","eslint-webpack-plugin":"^3.1.1","html-webpack-plugin":"^5.5.0","mini-css-extract-plugin":"^2.5.2","postcss":"^8.4.5","postcss-loader":"^6.2.1","prettier":"^2.5.1","tailwindcss":"^3.0.15","webpack":"^5.69.1","webpack-cli":"^4.9.2","webpack-dev-server":"^4.7.4","webpack-manifest-plugin":"^4.1.1"},"description":"

\n \n \n \n

\n\n\n# 100ms 2.0 Sample React App\n\n[![Documentation](https://img.shields.io/badge/Read-Documentation-blue)](https://docs.100ms.live/javascript/v2/foundation/basics)\n[![Discord](https://img.shields.io/badge/Community-Join%20on%20Discord-blue)](https://discord.gg/F8cNgbjSaQ)\n[![Email](https://img.shields.io/badge/Contact-Know%20More-blue)](mailto:founders@100ms.live)\n\n## About\n\nThis is an example React app to demo [100ms' React SDK](https://www.npmjs.com/package/@100mslive/hms-video-react).\n\nNot using React? Find the [Javascript Quickstart here](https://docs.100ms.live/javascript/v2/guides/javascript-quickstart).\n\n## Prerequisites\n\nYou will need [Node.js](https://nodejs.org) version v12.13.0 or greater installed on your system.\n\n## Clone the repo\n\nGet the code by cloning this repo using git.\n\n```bash\ngit clone git@github.com:100mslive/100ms-web-v2.git\n```\n\nOnce cloned, open the terminal in the project directory, and install dependencies with:\n\n```bash\ncd 100ms-web-v2\nyarn install\n```\n\nCreate a new file `.env` and copy the values from `example.env`\n\n```bash\ncp example.env .env\n```\n\n### Get the token generation endpoint\n\nGet your token endpoint from the [Developer section of 100ms' Dashboard](https://dashboard.100ms.live/developer)\n![download](https://user-images.githubusercontent.com/11087313/140727818-43cd8be4-b3bf-4b34-9921-a77f9a1b819d.png)\nUpdate 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/`)\n\n### Run the app\nThen start the app with:\n\n```bash\nyarn start\n```\n\nThe 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)\n\n### Create a room\n\nCreate 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.\n\n![image](https://prod-apps-public.s3.ap-south-1.amazonaws.com/Screenshot+2021-06-26+at+5.52.50+PM.png)\n\n### Join the room\n\n*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*\n\nVisit the URL : https://localhost:3000/meeting//< role > to join the room\n\n![image](https://user-images.githubusercontent.com/5078656/119534649-c60da000-bda4-11eb-9847-f283e2daa06f.png)\n\nUse any name & Click on join.\n\n## Additional Flags(present in .env file)\n\n### Configure UI layout\n\nDepending 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.\n\nThe value of REACT_APP_POLICY_CONFIG should be a JSON stringified object of the structure:\n\n```ts\ntype HMSRoleName = string;\n\n/**\n * undefined means none\n * empty array [] for all roles\n */\ninterface RoleConfig {\n center?: HMSRoleName[];\n sidepane?: HMSRoleName[];\n selfRoleChangeTo?: HMSRoleName[];\n remoteRoleChangeFor?: HMSRoleName[];\n}\n\ninterface PolicyConfig {\n [role: string]: RoleConfig;\n}\n```\n\nExample: `REACT_APP_POLICY_CONFIG = \"{\"trainer\":{\"center\": [\"student\"],\"sidepane\":[\"trainer\"]}}\"`\n\nIt is used in the app as:\n\n```js\nconst envPolicyConfig = JSON.parse(process.env.REACT_APP_POLICY_CONFIG || \"{}\");\n```\n\n### Tile Aspect Ratio\n\nREACT_APP_TILE_SHAPE can be used for this, the format is `width-height` e.g.\n`1-1` for square tiles, `4-3` for landscape tiles and `16-9` for wide tiles.\n\n### Env - REACT_APP_THEME\n`dark` - for dark theme\n`light` - for light theme\n\n### Env - REACT_APP_COLOR\nYou can give a hex code the color will be used fo buttons, border audio level and such.\n\n### Playlist Tracks(Watch Party)\n\nThis 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\nis only for file formats which are supported by the native audio and video elements, but it's super cool.\n\n`REACT_APP_AUDIO_PLAYLIST` - a list of audio tracks which can be played by a person in the room for everyone\n`REACT_APP_VIDEO_PLAYLIST` - a list of video tracks which can be played by a person in the room for everyone\n","readmeFilename":"README.md"}