TrueTime Meetings: Deploy a React Video Conferencing App

Clone, configure, and deploy TrueTime Meetings — a production-ready React video conferencing app built on Red5 Pro WebRTC — with up to 30 participants.

TrueTime Meetings is a ready-to-deploy React video conferencing application built on Red5 Pro WebRTC. It gives you a fully functional meeting experience — multi-participant video, live chat, screen sharing, emoji reactions, and more — without building those features from scratch. You self-host the frontend and point it at your Red5 Cloud deployment; PubNub-powered chat is automatically wired to your account keys, so no additional configuration is required for messaging.

Features

Core video conferencing

Up to 30 participants, real-time audio/video via Red5 Pro WebRTC, screen sharing with audio, and a play-only viewer mode.

Interactive features

Live chat, emoji reactions with animations, raise-hand, participant list with status indicators, and audio-level talker detection.

Media controls

Camera and microphone on/off with device selection, speaker output selection, and configurable video bitrate.

Layout options

Auto, tiled, and sidebar layouts. Pin or unpin any participant for focused viewing.

User experience

Lobby with pre-meeting device setup, virtual background support, dark/light theme, responsive UI, and i18n via react-i18next.

Recording support

Optional recording feature, enabled via a single configuration flag.

Prerequisites

• A Red5 Cloud account — your account automatically provisions the PubNub keys required for in-meeting chat.
• Node.js 18+ and npm installed locally for development builds.
• Docker if you prefer a containerized deployment.

Installation

1. Clone the repository

   git clone https://github.com/red5pro/red5-truetime-meetings
   cd truetime-meetings
   
2. Install dependencies

   The project requires the --legacy-peer-deps flag to resolve peer dependency conflicts in the React ecosystem:

   npm install --legacy-peer-deps
   
3. Create your runtime configuration file

   Copy the provided prototype to create your config file:

   cp public/config.json_prototype public/config.json
   

   Then open public/config.json and fill in your Red5 Cloud values (see Configuration below).

4. Start the development server

   npm start
   

   The app loads public/config.json at startup, so you can update that file and refresh without rebuilding.

Configuration

TrueTime Meetings uses a runtime configuration file (public/config.json) as its primary configuration mechanism. Because the file is loaded at startup rather than compiled into the bundle, you can update it in your deployed environment without rebuilding the application.

Minimal config.json

Replace the placeholder values with those from your Red5 Cloud Management Console:

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

All configuration parameters

Parameter	Type	Description	Example
VITE_HOST	string	Hostname of your Red5 Pro server (no protocol)	"xxx.red5pro.net"
VITE_BACKEND_HOST	string	Full URL of the backend/Stream Manager API	"https://xxx.red5pro.net"
VITE_NODE_GROUP	string	Red5 Cloud node group (Deployment Name)	"default"
VITE_TURN_SERVER_URL	string	TURN or STUN server URL	"stun:stun2.l.google.com:19302"
VITE_TURN_SERVER_USERNAME	string	TURN server username (leave empty for STUN)	""
VITE_TURN_SERVER_CREDENTIAL	string	TURN server credential (leave empty for STUN)	""
VITE_ENABLE_RECORDING	string	Enable the in-meeting recording feature	"true" or "false"
VITE_ENABLE_CLOSED_CAPTION	string	Enable closed captions	"true" or "false"
VITE_DEFAULT_THEME	string	Default UI color theme	"black" or "blue"
VITE_LOGO_URL	string	URL or path to a custom logo	"/path/to/logo.svg"
VITE_BASENAME	string	Base path when serving from a sub-path	"/meetings"
VITE_VIRTUAL_BACKGROUND_IMAGES	string	Comma-separated URLs for virtual background images	"https://example.com/bg1.jpg,https://example.com/bg2.jpg"
VITE_CONFIG_SERVICE_URL	string	URL for the optional Config Service	"https://config.example.com"

VITE_NODE_GROUP must match the Deployment Name shown in your Red5 Cloud Management Console, not an arbitrary string.

Development environment variables

For local development you can use a .env file instead of config.json. Create .env in the project root:

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_DEFAULT_THEME="black"

Runtime configuration from config.json takes precedence over .env values. Use .env only in local development, not in production deployments.

Docker deployment

The repository ships with a multi-stage Dockerfile that builds the React app and serves it with nginx. Environment variables are injected at container startup, so you do not need to bake configuration into the image.

1. Build the Docker image

   docker build -t truetime-meetings .
   
2. Run the container

   Pass your configuration as environment variables:

   docker run -p 3000:80 \
     -e VITE_HOST=https://your-red5-host.com \
     -e VITE_BACKEND_HOST=https://your-red5-host.com \
     -e VITE_ENABLE_RECORDING=false \
     -e VITE_ENABLE_CLOSED_CAPTION=false \
     truetime-meetings
   

   The app is then available at http://localhost:3000.

3. (Optional) Use docker-compose

   version: '3.8'
   services:
     truetime-meetings:
       build: .
       ports:
         - "3000:80"
       environment:
         - VITE_HOST=https://your-red5-host.com
         - VITE_BACKEND_HOST=https://your-red5-host.com
         - VITE_ENABLE_RECORDING=false
         - VITE_ENABLE_CLOSED_CAPTION=false
       restart: unless-stopped
   

PubNub chat

TrueTime Meetings includes zero-config PubNub chat. When you deploy the app against your Red5 Cloud account, it automatically uses the PubNub keys provisioned to your account — no separate PubNub configuration required. The integration provides:

• Live chat — real-time text messaging alongside the video grid
• Presence — automatic detection of who is online in the meeting room
• Signaling — raise-hand notifications and participant mute events

If you want to use your own PubNub keys or explore the raw SDK integration, see the Red5 + PubNub Integration guide.

Deploying from the Management Console

If you prefer a no-code path, you can deploy TrueTime Meetings directly from the Red5 Cloud Management Console without cloning the repository.

1. Open TrueTime Apps

   Log in to the Red5 Cloud Management Console and click TrueTime Apps in the left sidebar.

2. Select TrueTime Meetings

   Locate the TrueTime Meetings card on the TrueTime Apps page and click it.

3. Deploy and customize

   Click Deploy, adjust any settings to your requirements, then click Go to launch the application.

4. Start a meeting

   Once the application is running, click New Meeting, enter your name, select your camera and microphone, and join.