Frigate-SimpleUI

A simple, user-friendly web interface for setting up and managing IP camera configurations in Frigate NVR.

Stop hand-editing YAML. Frigate-SimpleUI lets you discover cameras on your network, test streams, configure detection and recording, and push the final config to Frigate -- all from your browser.

Features

ONVIF / SADP Camera Discovery -- Scan your network to automatically find IP cameras (supports multi-NIC setups and Hikvision SADP).
Stream Testing & Snapshot Preview -- Verify RTSP connectivity and see a live snapshot before committing.
Camera Management -- Add, edit, and remove cameras through a clean form-based UI. Changes stay in memory until you explicitly save.
Bulk Add -- Select multiple discovered cameras and add them all at once with shared default credentials.
Codec Options -- Force H.264 re-encoding, enable AAC or Opus audio per camera, or provide a fully custom stream URL.
Object Detection Config -- Choose which objects to track (from Frigate's model labelmap) and set detection resolution per camera.
Recording Config -- Set retention days and mode (motion / active_objects / all) per camera.
Coral Detector Settings -- Enable/disable the Coral Edge TPU and switch between PCI and USB.
Raw YAML Editor -- View and edit the full Frigate config YAML directly from the UI.
Save & Restart -- One-click save to Frigate + go2rtc restart so your changes take effect immediately.

Architecture

┌──────────────────────────┐
│   React SPA (client)     │
│   Bootstrap UI           │
└───────────┬──────────────┘
            │  REST API
            ▼
┌──────────────────────────────────────┐
│   Node.js / Express Server           │
│   - In-memory config cache           │
│   - ONVIF & SADP scanner            │
│   - Stream tester (ffmpeg)           │
│   - Config builder (YAML)            │
└───────┬──────────────┬───────────────┘
        │              │
   Network scan    Frigate API
   (ONVIF/SADP)    + go2rtc API
        │              │
        ▼              ▼
  ┌──────────┐   ┌─────────────────┐
  │ IP Cams  │   │ Frigate + go2rtc│
  └──────────┘   └─────────────────┘

Client (React) -- Single-page app with three routes: Dashboard, Add Camera, Edit Camera. Talks to the Express server via REST.

Server (Express) -- Acts as a middle layer. Loads the current config from Frigate's API, keeps an in-memory copy, provides scanning/testing/snapshot APIs, and pushes the final YAML back to Frigate when you save.

Frigate + go2rtc -- The actual NVR. Frigate-SimpleUI reads and writes its config through Frigate's built-in API (/api/config/raw, /api/config/save).

Prerequisites

Node.js >= 14.x and npm >= 6.x
A running Frigate instance with its API accessible (see Supported Frigate versions)
go2rtc running alongside Frigate (usually bundled)
ffmpeg installed on the machine running Frigate-SimpleUI (used for stream testing and snapshot capture)

Supported Frigate versions

Frigate-SimpleUI is tested with Frigate up to 0.15. It talks to Frigate’s config API (/api/config/raw, /api/config/save) and go2rtc. Newer Frigate releases may add or change APIs; if something breaks, please open an issue with your Frigate version.

Auth and security

Frigate-SimpleUI does not implement Frigate’s auth. It assumes it can reach Frigate and go2rtc (same machine, reverse proxy, or trusted network). Run it only on a trusted network or put it behind a reverse proxy with auth.
Optional basic auth for the SimpleUI itself is available via AUTH_ENABLED, AUTH_USERNAME, and AUTH_PASSWORD in .env (see Environment Variables).
Never commit .env or any file with real passwords; use .env.example as a template only.

Quick Start

1. Clone the repository

git clone https://github.com/lich2000117/Frigate-SimpleUI.git
cd Frigate-SimpleUI

2. Configure environment

Copy the example env file and edit it to match your setup:

cp .env.example .env

At minimum, set these to point at your Frigate instance (use your Frigate host IP or hostname):

FRIGATESIMPLEUI_URL=http://<your-frigate-host>:5000
GO2RTC_URL=http://<your-frigate-host>:1984

See Environment Variables below for the full list.

3. Install & run (development)

# Install all dependencies (server + client)
npm run install:all

# Start both server and client in dev mode
npm run dev

The React dev server starts on port 3000 and proxies API requests to the Express server on port 3001.

4. Or use the convenience script

# Linux / macOS
chmod +x setup.sh
./setup.sh

# Linux / macOS
chmod +x start-dev.sh
./start-dev.sh

Production Deployment

Build and start

# Install dependencies
npm run install:all

# Build the React client
npm run build

# Start the production server (serves the built client + API)
npm start

The app will be available at http://localhost:3001 (or whatever PORT you set).

Using PM2 (recommended for long-running deployments)

# Use the production startup script
chmod +x start-prod.sh
./start-prod.sh

This will:

Run setup.sh (install deps + build client)
Copy .env.production to .env
Start the server under PM2 for automatic restarts

Environment Variables

Variable	Default	Description
`PORT`	`3001`	Port the Express server listens on
`NODE_ENV`	`development`	`development` or `production`
`FRIGATESIMPLEUI_URL`	—	Frigate API base URL (e.g. `http://<your-host>:5000`)
`GO2RTC_URL`	—	go2rtc API base URL (e.g. `http://<your-host>:1984`)
`CORS_ORIGINS`	`*`	Allowed CORS origins (comma-separated)
`LOG_LEVEL`	`info`	Logging level (`debug`, `info`, `warn`, `error`)
`LOG_FILE`	`server.log`	Log file path
`MQTT_HOST`	—	MQTT broker host (used in generated config)
`MQTT_PORT`	`1883`	MQTT broker port
`MQTT_USER`	—	MQTT username
`MQTT_PASSWORD`	—	MQTT password (set in `.env`, do not commit)
`WEBRTC_CANDIDATES`	(see `.env.example`)	WebRTC ICE candidates (comma-separated)
`WEBRTC_LISTEN`	`:8555/tcp`	WebRTC listen address
`DETECTOR_TYPE`	`edgetpu`	Detector type for config generation
`DETECTOR_DEVICE`	`pci`	Detector device (`pci` or `usb`)

Project Structure

Frigate-SimpleUI/
├── client/                     # React frontend (CRA)
│   ├── public/                 # Static assets
│   └── src/
│       ├── components/         # Reusable components (Header, Logo)
│       ├── pages/              # Page components
│       │   ├── Dashboard.js    #   Camera list, save/restart, YAML viewer, detector config
│       │   ├── AddCamera.js    #   Network scan, stream test, add camera form
│       │   └── EditCamera.js   #   Edit existing camera settings
│       ├── services/
│       │   └── api.js          # Axios API client (all server calls)
│       ├── styles/             # CSS
│       └── App.js              # React Router setup
├── server/                     # Express backend
│   ├── routes/
│   │   ├── cameras.js          #   GET/POST/DELETE /api/cameras
│   │   ├── scan.js             #   /api/scan (ONVIF + SADP discovery)
│   │   ├── stream.js           #   /api/stream (test, snapshot, status)
│   │   └── detector.js         #   /api/detector (Coral config)
│   ├── utils/
│   │   ├── configManager.js    #   In-memory config, YAML build, Frigate API calls
│   │   ├── networkScanner.js   #   ONVIF + SADP scanning
│   │   ├── streamManager.js    #   RTSP stream testing
│   │   ├── sadp.js             #   Hikvision SADP protocol
│   │   ├── hikvision.js        #   Hikvision device activation
│   │   └── logger.js           #   Winston logger
│   ├── config.js               #   Centralized server config (reads .env)
│   └── index.js                #   Express app entry point
├── .env.example                # Example environment variables
├── package.json                # Root package.json (server deps + scripts)
├── setup.sh                    # Full setup script (install + build)
├── start-dev.sh                # Dev startup convenience script
├── start-prod.sh               # Production startup with PM2
└── README.md

API Reference

Cameras

Method	Endpoint	Description
`GET`	`/api/cameras`	List all cameras (from in-memory config)
`POST`	`/api/cameras`	Add or update a camera
`DELETE`	`/api/cameras/:name`	Remove a camera by name
`POST`	`/api/cameras/reload`	Reload cameras from Frigate

Network Scanning

Method	Endpoint	Description
`GET`	`/api/scan/interfaces`	List available network interfaces
`POST`	`/api/scan/all`	Scan for ONVIF/SADP devices on the network
`GET`	`/api/scan/streams`	Get stream URLs from an ONVIF device

Stream & Snapshots

Method	Endpoint	Description
`GET`	`/api/stream/test`	Test if a stream URL is reachable
`GET`	`/api/stream/snapshot/:name`	Get a snapshot image from a camera
`GET`	`/api/stream/snapshot`	Get a snapshot from a raw RTSP URL
`GET`	`/api/stream/frigatesimpleui-status`	Check if Frigate is running

Configuration

Method	Endpoint	Description
`GET`	`/api/config/raw`	Get current config (JSON)
`POST`	`/api/config/raw`	Save raw YAML config to Frigate
`GET`	`/api/config/yaml`	Get current config as YAML text
`POST`	`/api/config/save`	Save config to Frigate (with optional `?save_option=restart`)
`POST`	`/api/config/restart`	Trigger Frigate service restart
`POST`	`/api/config/reload`	Reload config from Frigate into memory
`GET`	`/api/config/objects`	List available detection objects

Detector

Method	Endpoint	Description
`GET`	`/api/detector`	Get Coral detector config
`POST`	`/api/detector`	Update Coral detector config (`enabled`, `type`)

Health

Method	Endpoint	Description
`GET`	`/api/ping`	Server health check

How It Works

On startup, the server fetches the current config from Frigate's raw config API and loads it into memory.
Dashboard shows all configured cameras with snapshot thumbnails and Frigate's health status.
Add Camera lets you scan the network (ONVIF + Hikvision SADP), select a discovered camera (or enter an RTSP URL manually), test the stream, and configure detection/recording options.
Edit Camera lets you modify any existing camera's settings.
All changes are held in memory on the server -- Frigate's config is not touched until you click Save (or Save & Restart).
On save, the server builds a complete Frigate YAML config and POSTs it to Frigate's /api/config/save endpoint. If you chose restart, go2rtc is also restarted.

Common issues

Issue	What to try
"Frigate not reachable" or config won’t load	Check `FRIGATESIMPLEUI_URL` and `GO2RTC_URL` in `.env`. Ensure Frigate and go2rtc are running and reachable from the machine running Frigate-SimpleUI (no firewall blocking, correct IP/port).
Stream test or snapshot fails	Ensure ffmpeg is installed on the same machine as Frigate-SimpleUI. For RTSP, check camera credentials and that the stream URL is correct (often `rtsp://user:pass@ip:554/...`).
Save to Frigate fails	Frigate must allow config writes (API enabled). If you use auth or a reverse proxy, ensure the SimpleUI server can authenticate or is allowed through.
Scan finds no cameras	ONVIF/SADP discovery uses the server’s network. Run the server on the same VLAN as the cameras, or point it at the right interface. Firewall may block discovery packets.
Build fails (`npm run build`)	Run `npm run install:all` first. If the client fails, check Node version (>= 14) and try deleting `client/node_modules` and running `npm run install:all` again.

Contributing

Contributions are welcome. Please read CONTRIBUTING.md for dev setup, how to run the build, and PR guidelines. Summary:

Fork the repository and create a branch from main
Install and build: npm run install:all and npm run build
Make your changes and test locally
Open a Pull Request using the PR template

Development tips

The React client runs on port 3000 in development and proxies API requests to port 3001 (configured in client/package.json).
The server uses nodemon in dev mode for auto-reload.
Camera configs are kept in memory -- restart the server to reload from Frigate.
Camera names must be alphanumeric + underscores only, max 32 characters.

Ideas for contributions

Docker / Docker Compose setup
Home Assistant add-on packaging
Improved camera brand-specific ONVIF handling
Unit and integration tests
Dark mode UI
i18n / localization
Better mobile responsiveness

License

This project is licensed under the MIT License.

Acknowledgments

Frigate NVR -- The excellent open-source NVR this tool is built for.
go2rtc -- The streaming engine used by Frigate.
node-onvif -- ONVIF device discovery for Node.js.

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
.github		.github
client		client
server		server
utils		utils
.env.example		.env.example
.gitignore		.gitignore
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
CONTRIBUTING.md		CONTRIBUTING.md
LICENSE		LICENSE
README.md		README.md
cleanup.sh		cleanup.sh
package-lock.json		package-lock.json
package.json		package.json
setup.sh		setup.sh
start-dev.sh		start-dev.sh
start-prod.sh		start-prod.sh

License

lich2000117/Frigate-SimpleUI

Folders and files

Latest commit

History

Repository files navigation

Frigate-SimpleUI

Features

Architecture

Prerequisites

Supported Frigate versions

Auth and security

Quick Start

1. Clone the repository

2. Configure environment

3. Install & run (development)

4. Or use the convenience script

Production Deployment

Build and start

Using PM2 (recommended for long-running deployments)

Environment Variables

Project Structure

API Reference

Cameras

Network Scanning

Stream & Snapshots

Configuration

Detector

Health

How It Works

Common issues

Contributing

Development tips

Ideas for contributions

License

Acknowledgments

About

Resources

License

Code of conduct

Contributing

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 2

Uh oh!

Languages

Packages