Engage Meet

A cross-platform video calling software developed with react-typescript, material UI and express backend

Features

The Video app has the following features:

• Video conferencing with real-time video and audio
• Pre-join room for previewing audio/video configurations

Flexible Configuration

• Ability to change audio/video configuration in the meet

Chat

• Persistent chats which stay before & after the meet ends (part of the ADAPT feature)
• Emojis support and auto-links
• File-sharing with various media types

Accessibility

• Enable/disable camera
• Mute/unmute mic
• Keyboard shortcuts
• Screen sharing
• Pinning any participant

Cross-platform

• Compatible across all major browsers
• Works across Android, iOS, Windows

Real-time Indicators

• Dominant speaker indicator
• Remote participant volume indicator
• Network quality indicator

Some bonus features

• Screen recording
• QuickChat: disappearing messages
• File-sharing with various media types
• Background blur
• Custom virtual background of your choice

Demo

• Homescreen:

• Preview screen:

• Video Call:

• Virtual Background:

• Quick Chat:

• Flexible Configuration:

Application of Agile Methodology

Microsoft and the Acehacker team kept various sessions for us to learn more about the work culture at Microsoft. We also learned about new technologies that have been developed by Microsoft and about the Agile Methodology.

The Agile Scrum Methodology has heavily influenced my work in the past 1 month. Agile scrum methodology is a project management system that relies on incremental development. Each iteration consists of 2-4 sprints, where each sprint's goal is to build the most important features first and come out with a potentially deliverable product.
Microsoft assigned us three sprints of 1-2 weeks each: Design, Build, and Adopt.

In the first two weeks, I made a basic MVP with all the minimum functionalities running, including wireframing.

In the third and fourth week, I worked on adding additional features to my web app, with the feedback received from mentors. Also I learned about CI/CD and integrated Github Actions with my project.

In the last week, I ended up adding various additional features like virtual background and disappearing messages. Also had a hands-on experience on dockerizing my application and deploying it to production.

Prerequisites

You must have the following installed:

• Node.js v12+

Build Instructions

Running the Web App on your Local System

To run the web app in your local device, run the following commands in your terminal:-

Clone the GitHub repository into your local device by running the following command:

git clone https://github.com/aryaman-titan/engage-meet

cd engage-meet

In the project directory, you can run:

yarn start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
The app is ready to be deployed!

To run the app in Docker

This project comes Docker ready out of the box. Docker is a software container platform. A Docker image contains information on everything required to make an app run. This self-contained system makes it extremely easy to ensure that your app runs on any OS without worrying about the dependency compatibility.

Regardless of where it’s deployed, your app will always run the same as long as Docker is installed on the machine.

1. Install Docker: https://docs.docker.com/engine/installation/

2. Clone the repo and move into the directory (see above)

$ docker-compose up -d

Future Possible Functionalities

1. [WIP] Collaborative Whiteboard
2. [WIP] Captions