A real-time video conferencing application built with React and Red5 Pro, featuring multi-participant video calls, screen sharing, chat messaging, and various interactive features.

Features

Tech Stack

• Frontend: React 18+ with Hooks
• UI Library: Material-UI (MUI)
• WebRTC: Red5 Pro Conference Client
• State Management: React useState/useRef
• Routing: React Router
• Notifications: Notistack
• Styling: Material-UI theming
• Internationalization: react-i18next

Installation

# Clone the repository
git clone https://github.com/red5pro/truetime-meetings
cd truetime-meetings

# Install dependencies
npm install --legacy-peer-deps

# Start the development server
npm start

Configuration

Runtime Configuration (Recommended)

The application supports runtime configuration via a JSON file, allowing you to modify settings after the build without rebuilding the application. This is the recommended approach for production deployments.

Setup

1. Create config.json in the public folder (or use the provided config.json_prototype as a template):

{
  "VITE_TURN_SERVER_URL": "stun:stun2.l.google.com:19302",
  "VITE_TURN_SERVER_USERNAME": "",
  "VITE_TURN_SERVER_CREDENTIAL": "",
  "VITE_HOST": "xxx.red5pro.net",
  "VITE_NODE_GROUP": "default",
  "VITE_BACKEND_HOST": "",
  "VITE_ENABLE_CLOSED_CAPTION": "false",
  "VITE_ENABLE_RECORDING": "false",
  "VITE_DEFAULT_THEME": "black",
  "VITE_LOGO_URL": "/logo.svg"
}

2. Update values in config.json to match your Red5 Pro deployment

3. Build and deploy – The application will load configuration from /config.json at runtime

How It Works

• The application fetches /config.json on startup (see src/main.tsx)
• Configuration values are stored in the runtime config store (src/utils/configStore.ts)
• Runtime config values override build-time environment variables
• You can update config.json in your deployed application without rebuilding

Available Configuration Options

Parameter	Type	Description	Example
VITE_HOST	string	Red5 Pro host URL	"xxx.red5pro.net"
VITE_BACKEND_HOST	string	Backend API URL	"https://xxx.red5pro.net"
VITE_NODE_GROUP	string	Red5 Pro node group	"default"
VITE_TURN_SERVER_URL	string	TURN/STUN server URL	"stun:stun2.l.google.com:19302"
VITE_TURN_SERVER_USERNAME	string	TURN server username	""
VITE_TURN_SERVER_CREDENTIAL	string	TURN server credential	""
VITE_ENABLE_RECORDING	string	Enable recording feature	"true" or "false"
VITE_ENABLE_CLOSED_CAPTION	string	Enable closed captions	"true" or "false"
VITE_DEFAULT_THEME	string	Default UI theme	"black" or "blue"
VITE_LOGO_URL	string	Custom logo URL	"/path/to/logo.svg"
VITE_BASENAME	string	Base path for the application	"/meetings"
VITE_VIRTUAL_BACKGROUND_IMAGES	string	Comma-separated list of virtual background image URLs	"https://example.com/bg1.jpg"
VITE_CONFIG_SERVICE_URL	string	URL for the Config Service	"https://config.example.com"

Environment Variables (Development)

For development purposes, you can also use environment variables. Create an .env file in the root of your project:

VITE_HOST="xxx-xxx-x-oci.red5pro.net"
VITE_BACKEND_HOST="https://xxx-xxx-x-oci.red5pro.net"
VITE_NODE_GROUP="xxxxxx"
VITE_TURN_SERVER_URL="stun:stun2.l.google.com:19302"
VITE_TURN_SERVER_USERNAME=""
VITE_TURN_SERVER_CREDENTIAL=""
VITE_VIRTUAL_BACKGROUND_IMAGES="https://xxx,https://xxx,https://xxx"
VITE_DEFAULT_THEME='black'
VITE_LOGO_URL="https://xxx"

Config Service

The application is accompanied by a Config Service located in the config-service directory. This service allows for dynamic management of the runtime configuration (config.json).

Why use Config Service?

• Dynamic Updates: Change configuration without rebuilding or redeploying the frontend.
• Validation: Ensures all configuration values are valid before applying them.
• Security: Requires authentication for update operations.

For detailed documentation on how to set up, run, and use the Config Service, please refer to the Config Service README.

Docker Deployment

Docker Setup

The application includes Docker support for containerized deployment with runtime environment variable configuration.

Files Structure

• Dockerfile – Multi-stage build configuration for React app with nginx
• ci/docker_startup_script.sh – Runtime script for environment variable replacement
• env.docker – Template file with placeholder values for build-time configuration
• nginx.conf – Nginx configuration for serving the React app

Environment Variables

The Docker setup supports 4 configurable environment variables that are replaced at runtime:

Variable	Description	Example
VITE_HOST	Frontend host URL	https://your-frontend-domain.com
VITE_BACKEND_HOST	Backend API URL	https://your-backend-api.com
VITE_ENABLE_RECORDING	Enable recording feature	true or false
VITE_ENABLE_CLOSED_CAPTION	Enable closed captions	true or false

Build Process

1. Build Time: The app is built with template variables from env.docker
2. Runtime: The startup script replaces template variables with actual environment values

Usage

Build the Docker image:

docker build -t truetime-meetings .

Run with environment variables:

docker run -p 3000:80 \
  -e VITE_HOST=https://your-frontend-domain.com \
  -e VITE_BACKEND_HOST=https://your-backend-api.com \
  -e VITE_ENABLE_RECORDING=true \
  -e VITE_ENABLE_CLOSED_CAPTION=true \
  truetime-meetings

Using docker-compose:

version: '3.8'
services:
  truetime-meetings:
    build: .
    ports:
      - "3000:80"
    environment:
      - VITE_HOST=https://your-frontend-domain.com
      - VITE_BACKEND_HOST=https://your-backend-api.com
      - VITE_ENABLE_RECORDING=true
      - VITE_ENABLE_CLOSED_CAPTION=true
    restart: unless-stopped

How It Works

1. Template Variables: The app is built with TEMPLATE_VITE_* placeholders
2. Runtime Replacement: The startup script finds and replaces these placeholders with actual environment values
3. Nginx Serving: The app is served by nginx with optimized configuration (gzip, caching, security headers)