dịch chuyển documents

2026-04-30 21:41:16 +07:00
parent c10912a756
commit ae583a72de
4 changed files with 0 additions and 0 deletions
@@ -0,0 +1,192 @@
+# 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