A simple and elegant web application for multi-users that brings you face-to-face 👩🏻🧑🏻 with the people who matter most and allows you to talk, text chat 💬 and share pictures both individually and in groups! The video application is based on React, Node Express and WebRTC and the chat application is based on Firebase and ChatEngine.io
The project is deployed at https://link-up.netlify.app/
- User's Choice Room Name and User Name 🕺: Wish to have a room name of your choice? No worries!😌
- One-on-One Call 👯♀: Connect with your close ones individually 😋
- Group Video Call👱🏻♀️👱🏻♂️👨👨👧👧: Meet your friend circle altogether or have your group discussions face-to-face 😄😍
- Text Group Chat 💬💬: Discuss or share something during meetings 🗣️🗣️
- Mute Video/Audio 🔇🔊🎦: Pause your video or audio when needed 👀🗣️
- Screen Sharing 👩💻: Have to take presentations or show demo? No worries, share your screen anytime!🤠
- Full Screen View of participant's video 🖥️: Tap at the video to view in full screen!
- Social Authentication 🔐: Sign in using Google or Facebook (with different emails)
- Create rooms for individual chats 👩🏻🦱💬💬🧑🏼: Want to talk to one person only? Add only one username in the chat!
- Create rooms for group chats 👩🏻🦱💬👱🏻♀️💬🧑: Talk to all your firends in one group or team
- Online 🟢 and Offline 🔴 Status: Know who all are online at any point of time!
- Read Status ✅ : Know who has read your message with their profile pic shown at the bottom of the message!
- Typing Status 📝 : Shows typing when the other participant is typing a message
- Message Formatting 🎨: Wish to highlight you messages? No worries, you may use bold, italics, underline or strike to format your messages!
- Share images 📸🖼️: Send or receive photogrphs
- Receive Mails when offline 📧: Worried that you might miss some important messages? No worries, you'll receive emails when offline📩
- People Section 🙎🏻♀️🙎🏻♂️: See all added persons in a particular team along with their online status
- Photos Section 🖼️: See all shared or received images in the photos section
- Delete/Add Group Members
- Profile Pic 🙎🏻♀️
Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools. This web app uses Node.js for server-side scripting — running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser.
React is a free and open-source front-end JavaScript library for building user interfaces or UI components. React makes it painless to create interactive UIs. Design simple views for each state in the application, and React will efficiently update and render just the right components when our data changes. It has been used for creating different components of the landing page, video call page and the chat app.
Express.js, or simply Express, is a back end web application framework for Node.js, released as free and open-source software under the MIT License. It is designed for building web applications and APIs. It has been called the de facto standard server framework for Node.js.
WebRTC (Web Real-Time Communication) is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via simple application programming interfaces (APIs). It has been used to allow audio and video communication to work inside web pages by allowing direct peer-to-peer communication, eliminating the need to install plugins or download native apps.
Simple one-to-one WebRTC video/voice and data channels.
- concise, node.js style API for WebRTC
- works in node and the browser!
- supports video/voice streams
- supports data channel
- text and binary data
- node.js duplex stream interface
Socket.IO is a JavaScript library for realtime web applications. It enables realtime, bi-directional communication between web clients and servers. It has two parts: a client-side library that runs in the browser, and a server-side library for Node.js. Both components have a nearly identical API. Like Node.js, it is event-driven.
Styled-components lets you write actual CSS code to style your components using tagged template literals (a recent addition to JavaScript) and the power of CSS,. It removes the mapping between components and styles – using components as a low-level styling construct could not be easier.
Chat Engine is an API which makes it easy to build chat services. Building a chat from scratch takes a lot of time, code, and is expensive. It's better to use a product instead of writing it from scratch. It has been used to provide a Rest API to host the chats, and NPM components to help with Chat UI. The UI of chat has been edited to make it in line with the other components of the web app.
Google Firebase is a Google-backed application development software that enables developers to develop iOS, Android and Web apps. Firebase provides tools for tracking analytics, reporting and fixing app crashes, creating marketing and product experiment. It has been used to provide social authentication using Google and Facebook!
- Connect Firebase auth with video call create room page so that the user doesn't need to put username again
- Add whiteboard
- Add emoticons reactions
- Video gets highlighted for the user who speaks
- Make the UI Accessible
- Switch Camera Options
