Meet - Video conference app

💬 Project overview

This project is a real-time video and audio communication application that allows multiple users to join a call. It allows to share their webcam, screen and interact via chat. It leverages WebRTC to handle peer-to-peer streaming, ensuring low-latency and high-quality audio and video transmission.

The application provides an user interface built with React and enhanced using Shadcn components.

🧰 Technologies Used

• WebRTC: for peer-to-peer audio and video streaming.

• ExpressJS: for the API's and for handling signaling between peers.

• React: a powerful JavaScript library for building user interfaces using a component-based architecture.

• Shadcn: for reusable UI components and consistent styling.

🌐 Environment Setup

This project uses ngrok for the development, since WebRTC requires https and it's a quick solution.

🔧 ngrok Configuration

To expose both back-end and front-end via ngrok, use the following configuration file:

version: "3"
agent:
  authtoken: <your_token>
tunnels:
  back-end:
    addr: <port 1> # e.g., 3000
    proto: http
  front-end:
    addr: <port 2> # e.g., 5173
    proto: http

Edit the configuration

ngrok config edit

Start ngrok

ngrok start --all

Front-End

1. Copy .env.template to .env.development for the development environment variables, and set VITE_SERVER_URL to the ngrok domain of the back-end, for example:

   VITE_SERVER_URL=https://f43daf222de4.ngrok-free.app
   

   This file will be used when npm run dev is executed.

2. Copy .env.template to .env.production for the production environment variables, and set VITE_SERVER_URL to empty (since the front-end will be served by the back-end server in production):

   VITE_SERVER_URL=
   

   This file will be used when npm run build is executed.

Back-End

1. Copy .env.template to .env:

2. Set the following environment variables:

   PORT=<your_backend_port>          # e.g., 3000
   SECRET_TOKEN=<your_secret_token> # used for JWT
   

📦 Install Dependencies

Run the following in both the front-end and back-end directories:

npm install

🚀 Start Development Servers

In both front-end and back-end folders, run the following command:

npm run dev

You can now access the app using the ngrok front-end URL.

🛠️ Build

1. In both front-end and back-end folders, run the following command:

   npm run build

   This will create a dist directory in both front-end and back-end.

2. Create a folder named client in the back-end. This folder will contain the production code of the front-end.

3. Move the dist directory created in the front-end into the client directory of the back-end. In this way, there will be a folder client/dist inside the root folder of the back-end.

🚀 Start in Production

You only have to start the back-end server:

npm start

Now the back-end server is serving both the API's and the front-end app.

It's done! 🎉