Hola - Let's Talk ✨

Microsoft Teams Clone developed for Microsoft Engage Mentorship Program 2021.

Hola is a web conferencing app that supports real-time sharing of audio and video. Hola lets you stay in touch with your friends and colleagues with its instant video calling feature.

🌟 Features

• Multiple participants video calling. 🌍
• An unique ID generation system for every individual user.
• Mute or unmute at any point 🎤
• Video on/off to stop sharing video at any point 🎥
• Adopt- Chat feature that lets the user chat before starting a video call, during the video call and after the call, once connected. 🗨
• Light/dark mode toggle button 🌞/🌜
• Screen Sharing 💻
• Collaborative Whiteboard 📋🖌️

📸 Video Demo

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

🌀 Agile Methodology

Agile is a chain of development in which specific set of tasks are achieved iteratively in accordance to their priorities.

How I incorporated Agile methodology?

• The entire timeline was divided into 4 sprints - each one of the sprint was a week long sprint followed by one-on-one mentor calls and feedbacks.
• I used an Agile Project Management Software - Taiga.io for smooth execution of the project .

🎉 Glimpses

1. A sharing ID is generated for individual user, which is used to connect to the other peer. Once the user gets connected, the peers can chat with each other.

2. On clicking the call button, the peers can share their audio and videos and simultaneously chat as well.

3. Light/Dark Mode: The toggle button at the top left corner lets user to switch to light/dark mode.

4. Screen Sharing

5. Collaborative Whiteboard: This feature allows users to collaborate virtually through a canvas board and brainstorm during the meeting.

⚙️ Run Locally

For Windows/Linux/Mac

Open cmd or terminal

1. Clone the github repository

git clone https://github.com/this-is-aishwarya/Hola.git 

2. Change the working directory

cd Hola

3. Install all libraries and dependencies

npm install
npm run build

4. Run the web app in the development mode

npm start

On a new terminal, start the Peer server

peerjs --port 443 --key peerjs --path /myapp   

Open http://localhost:8000/ to view the functioning on the browser.

📋 Instruction Manual

• To fully participate (and present) in a videoconference you need:
  • a webcam and headset, OR
  • a pair of headphones and a webcam with built-in microphone
• If you do not have a webcam and/or headset you can communicate via chat.
• To start a call, enter the sharing code of the other user and once connected, the audio and video sharing starts.
• Audio is turned off by default.
• The button on the top-left corner of the screen lets the user toggle between light and dark mode.
• The panel at the bottom consists of various controls described below (left to right)
  • Share Screen
  • Mute/Unmute
  • Call End
  • Video on/off
  • Chat
• The button on the top-right corner opens up the collaborative whiteboard.

🛠 Libraries & Frameworks

Frontend

• Node Package Manager
• React JS
• Socket-IO Client

Backend

• ExpressJS
• PeerJS
• Socket-io

🧑🏻‍💻 Technology Decisions

• IDE: Visual Studio Code
• Platform: WebRTC
• Version Control System: Github

📰 Major Resources

WebRTC connection using PeerJS
Backend Services for WebRTC