• User👱‍♂️ : Oh right, that's you!
• Participant👱‍♀️ : And that's your friend!
• Multiple Participants 👨‍👦‍👦 : Wish to call your friends? No worries!
• Unique Room : Enjoy an individual room for you and your members!
• Mute/Unmute 🎤: : Want to have the flexibility to mute/unmute yourself? You're in the right place.
• Video ON/OFF 👀 : Do you want to keep your video-streaming ON? Or OFF? You'll not be disappointed!
• Surprise Element: Chat with your friends while in the meeting. All aboard! 🎇:
• Security: Ensures that your unique room is safe from intrusion.
• Leave Meeting 👩‍💻 : Leave the room at any given time you want!

• Product Description
• Methodology and Principles
• Languages and Technology used
• User Journey
• Notable Features
• Code Performance and Optimisation
• Frameworks used
• Future Improvements/Integrations
• External Questions
• References
• Support

The global workforce underwent a shocking and rapid switch to remote work during the COVID-19 pandemic. But that shift was never going to be temporary. The pandemic only accelerated a trend towards flex working that was well underway in 2019. The expected change posed a big question: How will workers collaborate when they're dispersed and constantly moving? Cut back to today, the answer is Microsoft Teams. A collaboration platform that unifies chat, voice, video and file sharing as part of the Microsoft Office 365. It is currently designed to be used by local, remote and distributed work groups - anyone in any company, really! 🌃

Img Source

Some of the notable features of Microsoft Teams that makes it stand out from other collaboration software 🌠:

• Teams and Channels
• Conversations within Channels and Teams
• A Chat Feature
• Document Storage in SharePoint
• Online video calling and screen sharing
• Audio Conferencing
• Full telephony

The entire workflow of the web application was deployed using the principles of agile methodology, where iterative development was followed for the implemented features and the requirements and solutions evolved with the growing feedback and usage. The entire duration of the development was divided by me into 3 primary sprints where each lasted for almost a week:

• Sprint-1 : The duration of this entire sprint lasted a week where I primarily worked on designing my Product Requirements Document (PRD) and the UI/UX of the web application for various interfaces.
• Sprint-2 : The duration of this sprint encompassed a week again where I started developing my minimal viable requirements (Connecting two participants via meeting) while tested and assimilated the code into my previously designed code segments.
• Sprint-3 : Finally, during the last week of the sprint, I worked on the additional features of my product encompassing the feedback from previous sprints and adopted a CI/CD and TDD Approach. With the developer feedback at every stage, I build the test and then developed functionality until the code passed the test. Each time, when I made a new addition to the code, its test was added to the suite of tests that are run when I built the integrated work. This ensured that new additions don’t break the functioning work that came before them.

Img Source

Web Application Framework - Express.js
Library used- PeerJS (WebRTC)
Frontend- HTML, CSS, JavaScript, EJS, Node.js, websockets, WebRTC, Material Design

• Figma Designs and Prototypes
• Video Demonstration of the Project
• Agile Scrum Methodology

He/she refers to the participant in the meeting invited via a URL. They can view video-streams of other participants, view the canvas, have the ability to mute/unmute themselves and participate in the chat messages. They can be converted into a controller by the administrator of the meeting.

He/she is the creator of the unique room and known as the administrator of that particular room. They have the general admin powers like muting/unmuting themselves as well as other users, granting control to other participants and ending the meeting.

The user flow journey designed on Figma, presents a clear navigation, understandable labelling, links and with well-labelled and consistent CTAs (Call-To-Action). It encompasses the complete flow starting from the landing page for the user till they are present in the meeting with other participants to chat, collaborate, etc.

When the user receives the link, he/she is directed to the main landing page either to join or start a meeting of their own. It caters to the idea of the application being free hence potentially leads to more user engagement and retention ratio. The UI/UX was designed keeping in mind the current colour palette of Microsoft Teams.

This particular protoype depicts the video conferencing interface between mutiple participants on the website application.The peculiar features that can be pointed out from the wireframe are: Mute button, Video On/Off Button, Screen Sharing feature, Add more participants button, In-built chat feature and Leave Meeting button.The one particular user who is speaking in a required moment will be displayed on the front interface of all the participants and the other participants present will be display in the grid below.

This particular protoype depicts the screen sharing interface between mutiple participants on the website application. The peculiar features that can be pointed out from the wireframe are: Mute button, Video On/Off Button, Screen Sharing feature, Add more participants button, In-built chat feature and Exit Meeting button.

This particular protoype depicts the video conferencing along with the in-built chat feature for the participants.The vital features that can be pointed out from the wireframe are: Mute button, Video On/Off Button, Screen Sharing feature, Add more participants button, In-built chat feature and Exit Meeting button with the Chat feature as ON. The in-built chat feature depicts the streamline of texts between different participants, the active participants, time at which a particular text is sent, etc.

Allows the flexibility to add as many participants as you like. All you have to do is share the unique URL!

Total flexbility to mute/unmute yourself within the meeting!

Want to join a meeting but keep the video OFF? I got you covered!

Now that you have successfully landed in the meeting, how do you communicate with your peers? Well, the chat feature is here to help you!

The performance of the video conferencing web-application is calculated and optimised using Google PageSpeed Insights

• The following metrics are obtained for the hosted applications and optimisation techniques are adopted post that.

The following processes were adopted to efficiently increase the code performance and delivery of the application:

• ✔️ Eliminate render blocking resources : Since some resources were blocking the first paint of my application, I assimilated delivering critical JS/CSS inline and deferring all non-critical JS/styles.
• ✔️ Uniform text : Leveraged the font-display CSS feature to ensure text is user-visible while webfonts are loading.
• ✔️ Chaining Requests : Considering the length of chains, I reduced the download size of resources, and deferred the download of unnecessary resources to improve page load.

WebRTC is an open framework for the web that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities without the need of either internal or external plugins. It enables all kinds of real time communications such as audio, video and text between users by utilizing the browsers. It is a free and provides high quality. The fundamental reason why I opted for WebRTC are:

• Ease of Use : Real Time communications are supported without the need for additional applications or plug-ins.
• Secutity : WebRTC enforces the usage of encryption for the media.

Bootstrap is a free and open-source front-end library for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications. It has been used mainly for creating and proper positioning of elements.

• Screen Sharing feature 💻
• Record meetings feature ⏺️
• User Registry / Authentication 👦
• Mobile compatibility 📱
• In-App Integrations (Spotify, Microsoft 365, etc) 🎵
• Integrated bot 🤖
• In-Built Calendar Feature 📆
• Bookmark Conversations 🔖

Can external participants join a meeting?

• Absolutely! In fact, you can share the same link with all meeting participants, making it easier to get everyone you need on the call.

Do I need to install or pay anything?

• Zero, zip, zilch, nada! The application is totally free and you don't need to install anything for it!

• Tutorial on WebRTC - I
• Tutorial on WebRTC - II
• Introduction to Node.js
• Client-Server Architecture for Chat Application
• Ngrok
• Frontend-I
• Frontend-II

For any queries or problems that might arise with regards to the project, the author can be contacted at [email protected]