P2P Video Call Application

A simple peer-to-peer video call application built with React, TypeScript, Node.js, Express, and Socket.IO for signaling.

Features

• Peer-to-peer video communication using WebRTC.
• Signaling server using Socket.IO.
• Simple UI built with React and Tailwind CSS.
• Uses Metered TURN servers for NAT traversal (requires API key).

Prerequisites

• Node.js (v18 or later recommended)
• npm (usually comes with Node.js)
• A Metered API Key for TURN server access (https://www.metered.ca/)

Environment Variables

The backend requires a Metered API key to fetch TURN server credentials. Create a .env file in the /workspaces/_p2p-videocall/backend directory with the following content:

# /workspaces/_p2p-videocall/backend/.env
METERED_KEY=your_metered_api_key
PORT=3000 # Optional: defaults to 3000

Replace your_metered_api_key with your actual key from Metered.

Installation

1. Clone the repository (if you haven't already).

2. Navigate to the project root directory (/workspaces/_p2p-videocall).

3. Install dependencies for both frontend and backend:

   npm install

Running the Application

Development Mode

This command starts both the backend and frontend servers concurrently with hot-reloading enabled.

npm run dev

• Backend will run on http://localhost:3000 (or the PORT specified in .env).
• Frontend will be accessible via the Vite development server, typically on http://localhost:5173 or the next available port. The frontend proxies API and WebSocket requests to the backend.

Production Mode

1. Build the application: This command builds the frontend and backend for production. The frontend build output is placed in backend/dist/public.

   npm run build

2. Start the server: This command starts the Node.js server, serving the built frontend and handling signaling.

   npm start

   The application will be available at http://localhost:3000 (or the PORT specified in .env).

Project Structure

/
├── backend/             # Node.js/Express backend (Signaling Server)
│   ├── src/
│   │   ├── models/      # Data models (Room, User)
│   │   └── server.ts    # Main server logic
│   ├── dist/            # Build output (JS files and frontend public assets)
│   ├── public/          # Static frontend files served in production (generated by frontend build)
│   ├── .env             # Environment variables (needs to be created)
│   └── package.json
├── frontend/            # React frontend
│   ├── src/             # React components and source code
│   ├── public/          # Static assets for development
│   ├── index.html       # HTML entry point
│   ├── vite.config.ts   # Vite configuration
│   └── package.json
├── .gitignore
├── package.json         # Root package.json with concurrent scripts
└── README.md            # This file

Technologies Used

• Frontend: React, TypeScript, Vite, Tailwind CSS, socket.io-client
• Backend: Node.js, Express, TypeScript, Socket.IO, dotenv
• WebRTC: Native browser APIs
• TURN Server: Metered (requires API key)