Video calling-chat web application

• Hi everyone!
• I created this video calling-chat web application for MS ENGAGE Program 2021. The website is fully functional and useable in real life. This is easy to use. This lets a group of people to talk, chat and share any information together. This is functioned such that no two different meeting will clash by same name. Every time a unique ID will be created to enter room for video call and chat. I used agile methodaology for this project as mentioned as part of this program. I divided my whole task into 4 weeks. I started completing my tasks as sprint wise that helped in smooth learing and building the product.

Link of website:

video-calling-chat-app.herokuapp.com

Deep design of website with features:

---

Features created for getting into room for video call:

Authentication :

• Provides sign-in and sign-up feature, provides security login and logout.
• Used Auth0 SDK

Create Meeting Button :

• Creates Unique ID for every meeting by clicking on copy ID button that also copies it to clipboard.
• The person who created meeting link will join by join button near copy button.

Join Meeting Button :

• Having an input bar that is filled by the meeting link by other friend users and after it, join room by joining button next to it.

---

[After Entering room, actual features that help in making video conversation more user friendly are:]

---

Features in video calling room :

1:1 Video calling, (as mendatory task for MS Engage):

• This is possible to make 1:1 video calling easily on this website with more functions, that will be described as below features.

Group Video Calling:

• This feature allows upto 6 people to easily connect with video calls in a paricular room.

Mute/Unmute Audio Button:

• This feature allows one person to have control on muting or unmuting the video during video call.

Stop/Play Video Button:

• This feature allows one person to have control on stopping or playing the video during video call.

Live Chat feature during the meet:

• This feature provides functionality of doing chat through chat box, and messages in chat function are shown below every user's name, so that every message is idenical with respect to the user.

---

Tech Stack used for project:

BackEnd :

• -- Node.js with Xpress.js Framework

Peer to Peer Connection :

• -- webRTC and Socket.io

FrontEnd :

• -- Html, Css, JavaScript, Bootstrap

Authentication :

• -- Auth0 SDK

---

Layout of website from PC:

---

Layout of website from Smart Phone:

---

Sprint sheet of day to day task by using Aglie methodology:

• AGILE METHODOLOGY:- In this methodology, I divided my whole task into 4 week sprint program, and proceeded step by step from learning , building and deploying the project. Whatever I learned, explored, researched during this program is fully detailed in tables below:

https://docs.google.com/spreadsheets/d/1Z6EWc6gf-vFaYvO6Fkzhe3O8OhwqvQwr_W18C_bTQCw/edit?usp=sharing

Video link of project with full explanation :

https://www.youtube.com/watch?v=pTYCWWZt7iY