Juncture

Close the distance.

A robust, real-time video conferencing application built for seamless communication using WebRTC and Socket.io.

---

📖 Overview

Juncture is a full-stack video conferencing solution designed to emulate the feeling of being in the same room. Unlike basic wrappers, Juncture implements a custom WebRTC signaling server using Socket.io to establish secure Peer-to-Peer (P2P) mesh connections.

It features a sophisticated "Lobby" system where hosts have administrative control to admit or reject participants, ensuring meeting privacy and security.

🏗️ System Architecture

The following diagram illustrates the P2P Mesh Topology and the Signaling Flow of the application.

Architecture Highlights:

• Signaling Path: Clients communicate via WebSockets (Socket.io) to the Node.js server to exchange connection details (SDP & ICE Candidates).
• Media Path: Once connected, video and audio streams flow directly between clients (Peer-to-Peer), bypassing the server for low latency.
• Lobby Governance: The server acts as a gatekeeper, holding users in a waitingQueue state until the Host approves the admit-user event.

✨ Key Features

• Real-Time Audio/Video: Low-latency communication using WebRTC with STUN/TURN server integration.
• Host Governance:
  • Waiting Room: Participants enter a waiting queue before joining.
  • Admit/Deny: Hosts receive real-time notifications to control entry.
• Interactive Collaboration:
  • Screen Sharing: Seamlessly share your entire screen or specific windows.
  • Real-Time Chat: Integrated persistent chat with the ability to download chat history as a .txt file.
  • Hand Raising: Visual indicators for non-verbal communication.
• Smart UI/UX:
  • Picture-in-Picture (PiP): Minimize your self-view while focusing on others.
  • Responsive Design: Optimized for various screen sizes using Material UI.

🛠️ Tech Stack

Frontend

• Framework: React.js
• Styling: Material UI (MUI) & CSS Modules
• Real-time Client: socket.io-client
• State Management: React Hooks (useState, useRef)

Backend

• Runtime: Node.js
• Framework: Express.js
• Signaling: socket.io (Custom implementation for signaling and room management)
• Database: MongoDB (via Mongoose)
• Security: cors, dotenv

🚀 Getting Started

Follow these instructions to set up the project locally.

Prerequisites

• Node.js (v16+)
• MongoDB (Local or Atlas URL)
• npm or yarn

Installation

1. Clone the repository

   git clone [https://github.com/coder-aman-sahu/juncture.git](https://github.com/coder-aman-sahu/juncture.git)
   cd juncture

2. Backend Setup

   cd backend
   npm install
   
   # Create a .env file in the backend directory
   # Add: MONGO_URL=your_mongodb_url
   # Add: PORT=8000
   
   npm start

3. Frontend Setup

   cd ../frontend
   npm install
   npm start

4. Access the App Open http://localhost:3000 to view the application.

🔮 Future Improvements

To scale this application for enterprise use, the following updates are planned:

• Scalability: Transition from Full Mesh topology to an SFU (Selective Forwarding Unit) architecture (e.g., Mediasoup) to support 50+ participants per call.
• Reliability: Integrate TURN servers (e.g., Coturn or Twilio) to ensure connectivity for users behind strict corporate firewalls (Symmetric NAT).
• Performance: Implement Redis Adapter for Socket.io to allow horizontal scaling of the signaling server across multiple instances.

🤝 Contributing

Contributions are welcome! Please fork the repository and submit a pull request for review.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

👤 Author

Aman Sahu

• GitHub: @coder-aman-sahu