This project aims to build a video conferencing website that is easy to use, provides good video quality and latency, and contains all the necessary features for an engaging and complete video call experience.
Best works with: Chrome, Edge.
Check out the demo at: https://teams-clone-engage2k21.herokuapp.com/
- An unlimited number of conference rooms without any call time limitations.
- Support for multiple participants in each room.
- Screen sharing to present documents, slides, and more.
- Share photos and chat with your friends.
- Continue your conversation before or after the meeting in the chatroom.
- Persistent chats so you won’t have to worry about losing them.
- Simple collaborative whiteboard for teaching and sharing new ideas.
- Raise your hand in the meeting to ask a question.
- Support for Toast notifications.
- Record your screen, audio, and video.
- Activity center so you won’t miss any notifications.
- Emojis that allow you to express yourself.
- Full-screen mode for Video elements.
- Option to mute audio of each participant.
- Customize username, adjust audio and video before joining the meeting.
- Copy and share Room URLs easily.
- Sound notifications for better user experience.
- Direct peer-to-peer connections ensure low latency thanks to WebRTC.
- To start a meeting, visit https://teams-clone-engage2k21.herokuapp.com/, then click on “Create a new Room” to create a new room or enter an existing room URL to join that room.
- After the room is created, set up your username and click on the “Join Room” button.
- In the chatroom,
- Chat with the room participants using the Meeting Chat.
- Share photos by dragging and dropping them on the "Enter your message" panel.
- Copy the chat room URL using the “Copy Invite Link” button.
- Check out the recent activities by clicking on the “Activity” button on the sidebar.
- Start an instant meeting by using the “Create a meeting” button.
- Before joining,
- Allow the permissions for using your camera and microphone.
- Adjust your audio and video before joining the meeting.
- In the meeting,
- Toggle your audio and video, or end the call using the buttons on the top right, just below your stream.
- Copy the room URL using the “Copy Invite Link” button.
- Switch between the streams of different participants by clicking on it from the bottom panel.
- Mute or unmute the participants by clicking on the button with three dots on their stream and then clicking mute.
- Share your screen, go fullscreen, start recording, raise your hand or open a collaborative whiteboard using their respective buttons on the top.
- Use “Go back to room” if you want to go back to the chatroom.
Scrum is an agile development methodology used in the development of Software, based on an iterative and incremental processes. Scrum is adaptable, fast, flexible and effective agile framework that is designed to deliver value to the customer throughout the development of the project. You can checkout my scrumboard on the Project section of this repository.
CI/CD is a method to frequently deliver apps to customers by introducing automation into the stages of app development. The main concepts attributed to CI/CD are continuous integration, continuous delivery, and continuous deployment. To automate the process and monitor my app, I set up two workflows using Github Actions. One of them runs the project on a couple of test cases that I designed for this app and checks whether it is building successfully or not.
And the other uses lighthouse to give me a performance metric of the app, including details like accessibility, server response time, and much more.
And finally, Heroku auto deploys the app after every commit once the Continuous Integration services have passed.
Tech stack used primarily includes:
- Socket.IO
- React
- Node.js
- Express.js
- React-toastify
- RecordRTC
- Screenfull
- Compression
- Material-UI
- Jest and React-testing libraries
Prerequisites: Node.js. Clone the repository. Then run the following commands in the project root folder.
npm installnpm run buildnode server.js
An excellent series on WebRTC by Amir Eshaq
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent