> ## Documentation Index
> Fetch the complete documentation index at: https://red5.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CardGroup cols={2}>
  <Card title="Core video conferencing" icon="video">
    Up to 30 participants, real-time audio/video via Red5 Pro WebRTC, screen sharing with audio, and a play-only viewer mode.
  </Card>

  <Card title="Interactive features" icon="comments">
    Live chat, emoji reactions with animations, raise-hand, participant list with status indicators, and audio-level talker detection.
  </Card>

  <Card title="Media controls" icon="sliders">
    Camera and microphone on/off with device selection, speaker output selection, and configurable video bitrate.
  </Card>

  <Card title="Layout options" icon="table-cells">
    Auto, tiled, and sidebar layouts. Pin or unpin any participant for focused viewing.
  </Card>

  <Card title="User experience" icon="star">
    Lobby with pre-meeting device setup, virtual background support, dark/light theme, responsive UI, and i18n via react-i18next.
  </Card>

  <Card title="Recording support" icon="circle-dot">
    Optional recording feature, enabled via a single configuration flag.
  </Card>
</CardGroup>

## 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

<Steps>
  <Step title="Clone the repository">
    ```bash theme={null}
    git clone https://github.com/red5pro/red5-truetime-meetings
    cd truetime-meetings
    ```
  </Step>

  <Step title="Install dependencies">
    The project requires the `--legacy-peer-deps` flag to resolve peer dependency conflicts in the React ecosystem:

    ```bash theme={null}
    npm install --legacy-peer-deps
    ```
  </Step>

  <Step title="Create your runtime configuration file">
    Copy the provided prototype to create your config file:

    ```bash theme={null}
    cp public/config.json_prototype public/config.json
    ```

    Then open `public/config.json` and fill in your Red5 Cloud values (see [Configuration](#configuration) below).
  </Step>

  <Step title="Start the development server">
    ```bash theme={null}
    npm start
    ```

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

## 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:

```json theme={null}
{
  "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"`                              |

<Note>
  `VITE_NODE_GROUP` must match the **Deployment Name** shown in your Red5 Cloud Management Console, not an arbitrary string.
</Note>

### Development environment variables

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

```sh theme={null}
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"
```

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

## 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.

<Steps>
  <Step title="Build the Docker image">
    ```bash theme={null}
    docker build -t truetime-meetings .
    ```
  </Step>

  <Step title="Run the container">
    Pass your configuration as environment variables:

    ```bash theme={null}
    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`.
  </Step>

  <Step title="(Optional) Use docker-compose">
    ```yaml theme={null}
    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
    ```
  </Step>
</Steps>

## 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](/red5-cloud/development/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.

<Steps>
  <Step title="Open TrueTime Apps">
    Log in to the Red5 Cloud Management Console and click **TrueTime Apps** in the left sidebar.
  </Step>

  <Step title="Select TrueTime Meetings">
    Locate the **TrueTime Meetings** card on the TrueTime Apps page and click it.
  </Step>

  <Step title="Deploy and customize">
    Click **Deploy**, adjust any settings to your requirements, then click **Go** to launch the application.
  </Step>

  <Step title="Start a meeting">
    Once the application is running, click **New Meeting**, enter your name, select your camera and microphone, and join.
  </Step>
</Steps>