WebRTC-Video-Call Svelte Themes

Webrtc Video Call

A peer-to-peer group video call web app using Spring Boot

WebRTC Video Call Application

A peer-to-peer group video calling application built with SvelteKit (frontend), Spring Boot (backend), and Nginx (reverse proxy). Features real-time video/audio communication (full mesh) with secure HTTPS, and Dockerized deployment.

Note: Each room also supports multiple participants. All users in a room will connect to each other in a full mesh for group video calls.

๐Ÿ—๏ธ Architecture

flowchart TD
    subgraph Client
        A[Web Interface<br>Svelte 5]
        B[WebRTC API]
        C[STOMP/WebSocket Client]
    end

    subgraph Docker_Network
        D[Nginx<br>80/443]
        E[Spring Boot Backend<br>8000]
        F[SvelteKit Frontend<br>3000]
    end

    subgraph External
        G[STUN/TURN Server<br>3478]
    end

    A -- HTTP/WS --> D
    C -- WebSocket --> D
    D -- Proxy HTTP/WS --> E
    D -- Serve Static --> F
    B -- WebRTC --> G

๐Ÿš€ Features

  • Real-time Video Calls: Peer-to-peer via WebRTC
  • Room-based Calls: Private rooms for group video calls (full mesh)
  • Modern UI: Built with SvelteKit
  • SSL Support: Secure HTTPS via Nginx and custom certificates
  • Dockerized: Easy deployment with Docker Compose
  • Responsive Design: Works on desktop and mobile

๐Ÿ“ Project Structure

WebRTC-Video-Call/
โ”‚
โ”œโ”€โ”€ backend/                # Spring Boot backend (Java)
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ pom.xml
โ”‚   โ””โ”€โ”€ Dockerfile
โ”‚
โ”œโ”€โ”€ frontend/               # SvelteKit frontend (TypeScript)
โ”‚   โ”œโ”€โ”€ src/
โ”‚   โ”œโ”€โ”€ package.json
โ”‚   โ”œโ”€โ”€ Dockerfile
โ”‚   โ””โ”€โ”€ .env.example
โ”‚
โ”œโ”€โ”€ nginx/                  # Nginx reverse proxy config
โ”‚   โ”œโ”€โ”€ nginx.conf
โ”‚   โ”œโ”€โ”€ Dockerfile
โ”‚   โ””โ”€โ”€ ssl/
โ”‚       โ”œโ”€โ”€ certificate.pem
โ”‚       โ””โ”€โ”€ private_key.pem
โ”‚
โ”œโ”€โ”€ docker-compose.yml      # Multi-service orchestration
โ””โ”€โ”€ README.md

๐Ÿ“‹ Prerequisites

  • Docker & Docker Compose
  • Java 21+ (for backend local development)
  • Node.js 24+ (for frontend local development)
  • Maven 3.9+ (for backend local development)

๐Ÿ› ๏ธ Quick Start (Docker Compose)

  1. Clone the repository

    git clone https://github.com/AnishSarkar22/WebRTC-Video-Call.git
    cd WebRTC-Video-Call
    
  2. Configure Environment

    • Edit frontend/.env (copy from .env.example) and set your WebSocket URL if needed:
      VITE_WEBSOCKET_URL=wss://your-domain.com/ws
      
    • Edit nginx/nginx.conf and set your domain or use server_name _; for all hosts.
  3. Create SSL Certificates (for HTTPS)

    mkdir -p nginx/ssl
    openssl req -x509 -newkey rsa:4096 -keyout nginx/ssl/private_key.pem -out nginx/ssl/certificate.pem -days 365 -nodes
    
  4. Build and Start All Services

    docker-compose up --build
    
  5. Access the Application

    • HTTP: http://localhost
    • HTTPS: https://localhost

๐Ÿ”ง Configuration

Backend (backend/src/main/resources/application.properties)

socket.host=0.0.0.0
socket.port=8000
server.port=8000
server.address=0.0.0.0

Frontend (frontend/.env)

VITE_WEBSOCKET_URL=wss://your-domain.com/ws

Nginx (nginx/nginx.conf)

  • Proxies /ws and API requests to backend (backend:8000)
  • Serves frontend static files or proxies to frontend container (frontend:3000, 4173, or 5173)

๐Ÿณ Docker Compose Overview

  • backend: Spring Boot app on port 8000
  • frontend: SvelteKit app (dev: 5173, preview: 4173, prod: 3000)
  • nginx: Reverse proxy on 80/443, SSL termination, static file serving

๐Ÿ”Œ Key Components

Backend

  • Spring Boot: REST API & WebSocket (STOMP) signaling server
  • RoomService: Manages room membership and signaling
  • WebSocketConfig: Configures STOMP endpoints

Frontend

  • SvelteKit: Modern reactive UI
  • websocket.svelte.ts: Handles STOMP/WebSocket signaling
  • webrtc.svelte.ts: Manages WebRTC peer connections

๐Ÿงช Testing

Backend

cd backend
./mvnw test

Frontend

cd frontend
npm install
npm run test

๐Ÿค Usage

  1. Open the app in your browser.
  2. Create or join a room.
  3. Share the room ID with other users.
  4. All users in the room will connect to each other for a group video call.

๐Ÿ”’ SSL Configuration

  • Self-signed certificates for local development are in nginx/ssl/.
  • For production, replace with certificates from a trusted CA.

๐Ÿ“ฆ Dependencies

  • Spring Boot 3.2.6
  • Svelte 5 and Sveltekit
  • STOMP/WebSocket
  • Nginx

๐Ÿ“„ License

This project is licensed under the MIT License.

Top categories

Loading Svelte Themes