193 lines
3.4 KiB
Markdown
193 lines
3.4 KiB
Markdown
# 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/<camera>/<file>
|
|
|
|
### 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
|