IPCam_OrangePi_Dashboard/.trae/IPCam_Frontend_UI.md

IPCam Orange Pi Dashboard - Frontend UI Specification

1. Overview

This document describes the frontend UI/UX design for IPCam Orange Pi Dashboard.

The dashboard includes:

• Live camera monitoring (WebRTC)
• Playback system (recorded files)
• System configuration (camera + schedule)

---

2. Layout Structure

┌───────────────────────────────┐
│ Header / Navigation           │
├───────────────┬───────────────┤
│ Live View     │ Playback      │
│ (WebRTC Grid) │ (Files list)  │
├───────────────┴───────────────┤
│ Settings (modal / tab)        │
└───────────────────────────────┘

---

3. Live View (WebRTC Grid)

Features

• 4 camera grid (2x2)
• Real-time streaming via WebRTC
• Low latency
• Auto reconnect

Layout

┌────────────┬────────────┐
│ cam1       │ cam2       │
│ [video]    │ [video]    │
├────────────┼────────────┤
│ cam3       │ cam4       │
│ [video]    │ [video]    │
└────────────┴────────────┘

Camera Tile Components

• Video player (WebRTC)
• Camera name
• Status indicator (online/offline)
• Buttons:
  • Fullscreen
  • Reload

Behavior

• Lazy load streams
• Auto reconnect on failure
• Click to fullscreen

---

4. Playback (Recordings)

Layout

┌───────────────┬──────────────────────┐
│ Camera + Date │ File List + Player   │
└───────────────┴──────────────────────┘

Left Panel

• Camera selector (dropdown)
• Date picker

Right Panel

File List

13:00:00  ▶️  ⬇️
13:05:00  ▶️  ⬇️
13:10:00  ▶️  ⬇️

Video Player

• HTML5 video player
• Load selected file

API Integration

• GET /recordings?camera=cam1&date=YYYY-MM-DD
• /videos//

Behavior

• Click ▶️ → play
• Click ⬇️ → download
• Auto load newest file

---

5. Settings

5.1 Camera Management

UI

Camera List:

[cam1] rtsp://...
[cam2] rtsp://...

[ + Add Camera ]

Add Camera Form

Name: camX
RTSP URL: rtsp://...

[ Save ]

---

5.2 Recording Schedule

UI

Recording Schedule

[ ] Enable scheduler

Weekdays:
  From: 18:00
  To:   08:00

Weekend:
  [x] Record all day

Logic

• Controlled by backend scheduler
• Uses MediaMTX API

---

6. Navigation

[ Live ] [ Playback ] [ Settings ]

---

7. Tech Stack

• HTML / CSS / JS (or React)
• WebRTC player
• REST API integration

---

8. Constraints

• Requires H264 cameras (browser support)
• Requires open ports:
  • 8889 (WebRTC HTTP)
  • 8189/UDP (ICE)

---

9. Future Enhancements

• Timeline playback
• Multi-camera playback
• Mobile UI
• Authentication

---

10. Summary

Frontend responsibilities:

• Render WebRTC streams
• Display recordings
• Control system configuration

This UI completes the full system: Camera → MediaMTX → Backend → Frontend