Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ishan-002/cheems
An MS Teams clone made during Microsoft Engage 2021
https://github.com/ishan-002/cheems
mern onedark videoconferencing webrtc
Last synced: about 1 month ago
JSON representation
An MS Teams clone made during Microsoft Engage 2021
- Host: GitHub
- URL: https://github.com/ishan-002/cheems
- Owner: Ishan-002
- Created: 2021-06-13T15:38:51.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T05:15:43.000Z (almost 2 years ago)
- Last Synced: 2023-03-06T18:45:10.698Z (almost 2 years ago)
- Topics: mern, onedark, videoconferencing, webrtc
- Language: JavaScript
- Homepage:
- Size: 2.45 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cheems
Cheems is an MS Teams clone made during Microsoft Engage 2021. It works on most
of the latest browsers and supports features like video conferencing,
group chats, and team formation.
Cheems was built, keeping the agile methodology of
software development in mind. The work was done in series of sprints
## Features
- Multiple user video conferencing using WebRTC with selective forwarding unit &
media server.
- Support for screen sharing, muting participants and chats in the meetings
- Multiple group formations to organise your meetings with in-built chat feature
to discuss and retain important stuff.
- Stateless user authentication using JWT tokens.
- Chats, because you don't need a video call everytime :)
## How Cheems works
### Video calling
Video calling in Cheems is powered by the OpenVidu media server. OpenVidu is a
high-level, open source, SFU media server based on Kurento. It uess WebRTC
framework to achieve multimedia features.
Each user connects to the SFU through a WebRTC connection, and all the video stream data exchange takes place through OpenVidu.
Individual users send their streams to the server and in return get other users streams from it.
The structure of the frontend components of the video call can be seen in the following diagrams.
### Chats
Chats in the application happen through simple websockets connections. The same procedure is followed for group chats too.
### Authentication
User authentication in cheems is done through JSON Web Tokens which enable the server to have a stateless method of authentication
## Setup Instructions
**Note:** You need to have an openvidu instance deployed on the cloud for
accessing its API. For more details on its deployment, go to:
https://docs.openvidu.io/en/2.18.0/deployment/
1. After cloning the repository, run `npm install` at the root of the project to
install all the dependencies. The project directory structure has been made
in such a way that a single `package.json` exists for both the frontend and
backend. This makes it easier to setup the application.
2. Create an environment file named `.env` and paste these lines in it. You may
replace the variable values with their corresponding expected values to load
them into the environment.
```
JWT_SECRET=
SERVER_URL=
SERVER_SECRET=
REACT_APP_SERVER_URL=
REACT_APP_SERVER_SECRET=
```
3. Run `npm run dev` to start the development servers for Express and React.
4. Go to http://localhost:3000/ to see the home page of the website.
## Design System
Cheems is based on the One Dark design system. The color palette used for the website is:
The exact color codes used in for the design is as follows:
```
+---------------------------------------------+
" | Color Name | RGB | Hex |
" |--------------+--------------------+---------|
" | Black | rgb(40, 44, 52) | #282c34 |
" |--------------+--------------------+---------|
" | White | rgb(171, 178, 191) | #abb2bf |
" |--------------+--------------------+---------|
" | Light Red | rgb(224, 108, 117) | #e06c75 |
" |--------------+--------------------+---------|
" | Dark Red | rgb(190, 80, 70) | #be5046 |
" |--------------+--------------------+---------|
" | Green | rgb(152, 195, 121) | #98c379 |
" |--------------+--------------------+---------|
" | Light Yellow | rgb(229, 192, 123) | #e5c07b |
" |--------------+--------------------+---------|
" | Dark Yellow | rgb(209, 154, 102) | #d19a66 |
" |--------------+--------------------+---------|
" | Blue | rgb(97, 175, 239) | #61afef |
" |--------------+--------------------+---------|
" | Magenta | rgb(198, 120, 221) | #c678dd |
" |--------------+--------------------+---------|
" | Cyan | rgb(86, 182, 194) | #56b6c2 |
" |--------------+--------------------+---------|
" | Gutter Grey | rgb(76, 82, 99) | #4b5263 |
" |--------------+--------------------+---------|
" | Comment Grey | rgb(92, 99, 112) | #5c6370 |
" +---------------------------------------------+
```
## Future plans/scopes
1. Material UI is being used as the design library for Cheems right now. It can
be replaced with
[Microsoft Fluent Design](https://www.microsoft.com/design/fluent/#/) to
achieve better design consistency across the website and re-use design
components.
2. File upload can be supported in teams, which would also enable recordings to
be done on meetings.
3. A custom user profile page.
## Name Credits
Ketan Kumar Dongre ([@ketandongre](https://github.com/ketandongre))