Skip to content

Home

Jump to bottom
Ali Mohammadnia edited this page Apr 23, 2026 · 1 revision

MediaMTX Dashboard GitHub stars GitHub forks Contributors License Made with Next.js TypeScript

🎥 MediaMTX Dashboard – Beautiful Real‑time Stream Management

Take full control of your MediaMTX server – a modern, web‑based dashboard with live monitoring, configuration tools, and an integrated Prometheus+Grafana stack.

Preview

📖 Table of Contents

✨ Features

Feature Description
🟢 Real‑time stream monitoring View active streams, bitrates, and client connections.
🧩 Centralized management Control paths, users, and global config from one UI.
📈 Built‑in observability Pre‑configured Prometheus + Grafana dashboards.
🧱 Extensible architecture Built on Next.js + TypeScript – easy to hack.
🐳 Multiple deployments Run with pnpm, Docker, or Docker Compose.

Tip

The dashboard works with MediaMTX v1.0.0+ (formerly rtsp‑simple‑server).

⚙️ Tech Stack

TypeScript Next.js pnpm Docker PostCSS Shell Makefile

  • TypeScript (79%) – type‑safe core logic
  • Next.js – React framework (SSR/SSG)
  • pnpm – fast, disk‑efficient monorepo manager
  • Docker – development & production containers
  • PostCSS – advanced CSS processing

🚀 Getting Started

Prerequisites

  • Node.js (LTS recommended)
  • pnpm (npm install -g pnpm)
  • Docker (optional, for containerized workflows)

Installation

git clone https://github.com/PsymoNiko/mediamtx-dashboard.git
cd mediamtx-dashboard
pnpm install

Running locally (dev)

pnpm dev

Running with Docker Compose (local)

  1. Create .env.local:
NEXT_PUBLIC_MEDIAMTX_API_URL=http://localhost:9997
NEXT_PUBLIC_MEDIAMTX_HLS_URL=http://localhost:8888
MTX_WEBRTCADDITIONALHOSTS="localhost"
  1. Start MediaMTX publisher:
docker-compose up publisher -d
  1. Build & run the dashboard:
pnpm run build
pnpm run dev

Production deployment

docker-compose -f docker-compose.prod.yml up --build

Alternative Dockerfiles: Dockerfile, Dockerfile.dev, Dockerfile.simple, Dockerfile.debian.

Using the Makefile

make

🔧 Configuration

Environment variables (.env.local):

Variable Description Default NEXT_PUBLIC_MEDIAMTX_API_URL MediaMTX API endpoint http://localhost:9997 NEXT_PUBLIC_MEDIAMTX_HLS_URL HLS playback URL http://localhost:8888 MTX_WEBRTCADDITIONALHOSTS Additional WebRTC hosts localhost

For deeper tuning, check DOCKER.md and MONITORING.md in the repo.

🖥️ Usage

Open your browser at http://localhost:3000 (by default). The dashboard offers:

· Streams Overview – all active/configured paths with live stats (bitrate, clients, protocol). · Configuration Editor – modify global settings, paths, and user access. · Grafana Integration – one‑click access to detailed metrics (port 3001).

[!NOTE] The dashboard communicates with MediaMTX via its REST API (port 9997). Make sure the API is enabled in your MediaMTX configuration.

📡 API Reference

The dashboard uses the MediaMTX REST API (OpenAPI 3.0). Key endpoints:

Method Endpoint Description GET /v3/paths/list List all paths and their statuses GET /v3/paths/{name} Get details of a specific path POST /v3/config/global/set Update global configuration POST /v3/config/paths/add Add a new path configuration

For full API specs, refer to the official MediaMTX documentation.

📊 Monitoring Stack

The project ships with a full observability suite using:

· Prometheus – metrics collector (http://localhost:9090) · Grafana – dashboards (http://localhost:3001, default admin/admin) · Node Exporter – system metrics · cAdvisor – container resource usage

Pre‑built dashboards for MediaMTX metrics and system health are included. See MONITORING.md for setup details.

https://via.placeholder.com/800x400?text=Grafana+Preview (Add your own screenshot if available)

🤝 Contributing

We welcome contributions! The project currently has 3 contributors.

  1. Fork the repository.
  2. Create a feature branch: git checkout -b feature/amazing-feature
  3. Commit your changes: git commit -m 'Add some amazing feature'
  4. Push: git push origin feature/amazing-feature
  5. Open a Pull Request.

[!IMPORTANT] Please follow the existing code style and include tests where applicable.

📄 License

As of the latest commit, no explicit license is provided. Contact the repository owner Ali Mohammadnia for permissions.

💬 Support

· 🐛 Issues & bugs: GitHub Issues · 🌐 Project page: psymoniko.github.io/mediamtx-dashboard · 💰 Sponsor: Open Collective

Made with ❤️ by the MediaMTX Dashboard community
Not officially affiliated with the MediaMTX project.

Clone this wiki locally