first commit
This commit is contained in:
+24
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
@@ -0,0 +1,32 @@
|
|||||||
|
# IPCam Orange Pi Dashboard — Architecture
|
||||||
|
|
||||||
|
## Thành phần
|
||||||
|
|
||||||
|
- IP Cameras (RTSP, H264)
|
||||||
|
- MediaMTX (proxy WebRTC + recorder + Control API)
|
||||||
|
- Backend FastAPI
|
||||||
|
- MediaMTX API wrapper
|
||||||
|
- Scheduler ghi hình theo lịch
|
||||||
|
- Recording index API + serve file video
|
||||||
|
- Lưu cấu hình (camera list + schedule)
|
||||||
|
- Frontend React
|
||||||
|
- Live grid (WebRTC)
|
||||||
|
- Playback (file list + HTML5 video)
|
||||||
|
- Settings (camera + schedule)
|
||||||
|
|
||||||
|
## Luồng dữ liệu
|
||||||
|
|
||||||
|
- Live: Camera → MediaMTX → WebRTC → Browser
|
||||||
|
- Playback: Camera → MediaMTX → fMP4 trên đĩa → Backend serve → Browser
|
||||||
|
|
||||||
|
## API hợp đồng (mức tối thiểu)
|
||||||
|
|
||||||
|
- `GET /api/health`
|
||||||
|
- `GET /api/paths` (trạng thái stream từ MediaMTX)
|
||||||
|
- `GET /api/config` (camera + schedule)
|
||||||
|
- `POST /api/recording` (bật/tắt ghi hình ngay)
|
||||||
|
- `POST /api/scheduler/enabled` (bật/tắt scheduler)
|
||||||
|
- `POST /api/scheduler/schedule` (cập nhật lịch)
|
||||||
|
- `GET /api/recordings?camera=cam1&date=YYYY-MM-DD`
|
||||||
|
- `GET /videos/<camera>/<file>.fmp4`
|
||||||
|
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
# IPCam Orange Pi Dashboard — Requirements
|
||||||
|
|
||||||
|
## Mục tiêu
|
||||||
|
|
||||||
|
Xây dựng dashboard giám sát camera IP gọn nhẹ chạy tốt trên Orange Pi, dựa trên MediaMTX để:
|
||||||
|
|
||||||
|
- Xem live WebRTC độ trễ thấp
|
||||||
|
- Phát lại file ghi (fMP4) theo camera + ngày
|
||||||
|
- Quản lý camera và lịch ghi hình
|
||||||
|
- Backend điều khiển ghi hình bằng MediaMTX Control API (không chạy AI)
|
||||||
|
|
||||||
|
## Tính năng
|
||||||
|
|
||||||
|
### Live View
|
||||||
|
|
||||||
|
- Hiển thị dạng lưới (mặc định 2x2; có thể mở rộng)
|
||||||
|
- Lazy-load stream
|
||||||
|
- Auto reconnect
|
||||||
|
- Trạng thái online/offline
|
||||||
|
- Nút fullscreen + reload
|
||||||
|
|
||||||
|
### Playback
|
||||||
|
|
||||||
|
- Chọn camera + chọn ngày
|
||||||
|
- Danh sách file theo thời gian (mới nhất trước)
|
||||||
|
- Phát file bằng HTML5 video
|
||||||
|
- Tải file (download)
|
||||||
|
|
||||||
|
### Settings
|
||||||
|
|
||||||
|
- Camera management: thêm/xóa camera (từ dashboard), đồng bộ cấu hình paths lên MediaMTX
|
||||||
|
- Recording schedule:
|
||||||
|
- Weekdays: 18:00 → 08:00
|
||||||
|
- Weekend: 24h
|
||||||
|
- Backend chạy scheduler mỗi 60 giây
|
||||||
|
|
||||||
|
## Ràng buộc
|
||||||
|
|
||||||
|
- Camera nên dùng H264 (trình duyệt không hỗ trợ H265 phổ biến)
|
||||||
|
- MediaMTX cần mở cổng: 8554 (RTSP), 8889 (WebRTC HTTP), 9997 (Control API), 8189/UDP (ICE)
|
||||||
|
|
||||||
+159
@@ -0,0 +1,159 @@
|
|||||||
|
# IPCam Orange Pi Dashboard — INSTALL
|
||||||
|
|
||||||
|
Tài liệu này hướng dẫn triển khai trên Orange Pi (Linux). Mục tiêu: MediaMTX chạy như media server, FastAPI chạy như dashboard backend, React build ra static.
|
||||||
|
|
||||||
|
## 1) Yêu cầu
|
||||||
|
|
||||||
|
- Orange Pi chạy Debian/Ubuntu
|
||||||
|
- MediaMTX đã cài và chạy được
|
||||||
|
- Python 3.9+ (khuyến nghị 3.10+)
|
||||||
|
- Node.js 20+ (để build frontend)
|
||||||
|
|
||||||
|
## 2) MediaMTX cấu hình tối thiểu
|
||||||
|
|
||||||
|
Trong file `mediamtx.yml`:
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
api: yes
|
||||||
|
apiAddress: :9997
|
||||||
|
|
||||||
|
webrtc: yes
|
||||||
|
webrtcAddress: :8889
|
||||||
|
|
||||||
|
record: yes
|
||||||
|
recordFormat: fmp4
|
||||||
|
recordPath: /recordings/%path/%Y-%m-%d_%H-%M-%S-%f
|
||||||
|
recordPartDuration: 5m
|
||||||
|
```
|
||||||
|
|
||||||
|
Trong `paths`, bạn có thể để dashboard tự thêm path bằng API (Settings → Add Camera).
|
||||||
|
|
||||||
|
Tạo thư mục recordings:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo mkdir -p /recordings
|
||||||
|
sudo chown -R $USER:$USER /recordings
|
||||||
|
```
|
||||||
|
|
||||||
|
Mở firewall/cổng (tuỳ hệ thống):
|
||||||
|
|
||||||
|
- `8554/tcp` RTSP
|
||||||
|
- `8889/tcp` WebRTC HTTP
|
||||||
|
- `9997/tcp` MediaMTX Control API
|
||||||
|
- `8189/udp` ICE
|
||||||
|
|
||||||
|
## 3) Backend FastAPI
|
||||||
|
|
||||||
|
### 3.1 Cài dependencies
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd IPCam_OrangePi_Dashboard
|
||||||
|
python3 -m venv api/.venv
|
||||||
|
source api/.venv/bin/activate
|
||||||
|
pip install -r api/requirements.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3.2 Cấu hình
|
||||||
|
|
||||||
|
Chạy backend lần đầu sẽ tự tạo `api/data/config.json`.
|
||||||
|
|
||||||
|
Bạn có thể chỉnh:
|
||||||
|
|
||||||
|
- `mediamtx_api_url` (mặc định `http://127.0.0.1:9997`)
|
||||||
|
- `mediamtx_webrtc_url` (mặc định `http://127.0.0.1:8889`)
|
||||||
|
- `recordings_dir` (mặc định `/recordings`)
|
||||||
|
|
||||||
|
Nếu MediaMTX API có auth, export biến môi trường:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
export MEDIAMTX_API_USER="..."
|
||||||
|
export MEDIAMTX_API_PASS="..."
|
||||||
|
```
|
||||||
|
|
||||||
|
### 3.3 Chạy backend
|
||||||
|
|
||||||
|
```bash
|
||||||
|
source api/.venv/bin/activate
|
||||||
|
uvicorn api.app.main:app --host 0.0.0.0 --port 8000
|
||||||
|
```
|
||||||
|
|
||||||
|
## 4) Frontend (build static)
|
||||||
|
|
||||||
|
### 4.1 Build
|
||||||
|
|
||||||
|
```bash
|
||||||
|
cd IPCam_OrangePi_Dashboard
|
||||||
|
npm install
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
Output nằm ở `dist/`.
|
||||||
|
|
||||||
|
### 4.2 Serve frontend
|
||||||
|
|
||||||
|
Có 2 cách phổ biến:
|
||||||
|
|
||||||
|
1) Nginx serve `dist/` và reverse proxy `/api` + `/videos` về backend `:8000`
|
||||||
|
2) Dùng Caddy tương tự
|
||||||
|
|
||||||
|
Ví dụ Nginx server block tối thiểu:
|
||||||
|
|
||||||
|
```nginx
|
||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name _;
|
||||||
|
|
||||||
|
root /opt/ipcam-dashboard/dist;
|
||||||
|
index index.html;
|
||||||
|
|
||||||
|
location / {
|
||||||
|
try_files $uri $uri/ /index.html;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /api/ {
|
||||||
|
proxy_pass http://127.0.0.1:8000;
|
||||||
|
}
|
||||||
|
|
||||||
|
location /videos/ {
|
||||||
|
proxy_pass http://127.0.0.1:8000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 5) Systemd service (khuyến nghị)
|
||||||
|
|
||||||
|
### 5.1 Backend service
|
||||||
|
|
||||||
|
Tạo file `/etc/systemd/system/ipcam-dashboard.service`:
|
||||||
|
|
||||||
|
```ini
|
||||||
|
[Unit]
|
||||||
|
Description=IPCam Dashboard Backend
|
||||||
|
After=network.target
|
||||||
|
|
||||||
|
[Service]
|
||||||
|
WorkingDirectory=/opt/ipcam-dashboard
|
||||||
|
Environment=MEDIAMTX_API_USER=
|
||||||
|
Environment=MEDIAMTX_API_PASS=
|
||||||
|
ExecStart=/opt/ipcam-dashboard/api/.venv/bin/uvicorn api.app.main:app --host 0.0.0.0 --port 8000
|
||||||
|
Restart=always
|
||||||
|
RestartSec=2
|
||||||
|
|
||||||
|
[Install]
|
||||||
|
WantedBy=multi-user.target
|
||||||
|
```
|
||||||
|
|
||||||
|
Enable:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
sudo systemctl daemon-reload
|
||||||
|
sudo systemctl enable --now ipcam-dashboard
|
||||||
|
sudo systemctl status ipcam-dashboard
|
||||||
|
```
|
||||||
|
|
||||||
|
## 6) Kiểm tra nhanh
|
||||||
|
|
||||||
|
- Backend: `curl http://localhost:8000/api/health`
|
||||||
|
- MediaMTX API: `curl http://localhost:9997/v3/paths/list`
|
||||||
|
- Frontend: mở `http://<orange-pi-ip>/`
|
||||||
|
|
||||||
@@ -0,0 +1,194 @@
|
|||||||
|
# IPCam Orange Pi Dashboard - FastAPI Backend Skeleton
|
||||||
|
|
||||||
|
## 1. Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
ipcam-dashboard/
|
||||||
|
├── main.py
|
||||||
|
├── mediamtx.py
|
||||||
|
├── scheduler.py
|
||||||
|
├── models.py
|
||||||
|
├── config.py
|
||||||
|
└── requirements.txt
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. requirements.txt
|
||||||
|
|
||||||
|
```
|
||||||
|
fastapi
|
||||||
|
uvicorn
|
||||||
|
httpx
|
||||||
|
pydantic
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. config.py
|
||||||
|
|
||||||
|
```python
|
||||||
|
MEDIAMTX_API = "http://127.0.0.1:9997"
|
||||||
|
|
||||||
|
CAMERAS = ["cam1", "cam2", "cam3", "cam4"]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. mediamtx.py (MediaMTX API wrapper)
|
||||||
|
|
||||||
|
```python
|
||||||
|
import httpx
|
||||||
|
from config import MEDIAMTX_API, CAMERAS
|
||||||
|
|
||||||
|
|
||||||
|
async def set_recording(enabled: bool):
|
||||||
|
payload = {
|
||||||
|
"paths": {
|
||||||
|
cam: {"record": enabled}
|
||||||
|
for cam in CAMERAS
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async with httpx.AsyncClient() as client:
|
||||||
|
r = await client.post(
|
||||||
|
f"{MEDIAMTX_API}/v3/config/paths/patch",
|
||||||
|
json=payload,
|
||||||
|
timeout=5
|
||||||
|
)
|
||||||
|
return r.json()
|
||||||
|
|
||||||
|
|
||||||
|
async def get_paths():
|
||||||
|
async with httpx.AsyncClient() as client:
|
||||||
|
r = await client.get(f"{MEDIAMTX_API}/v3/paths/list")
|
||||||
|
return r.json()
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. scheduler.py
|
||||||
|
|
||||||
|
```python
|
||||||
|
from datetime import datetime
|
||||||
|
from mediamtx import set_recording
|
||||||
|
|
||||||
|
_last_state = None
|
||||||
|
|
||||||
|
|
||||||
|
def is_record_time(now: datetime) -> bool:
|
||||||
|
day = now.weekday() # 0=Mon
|
||||||
|
hour = now.hour
|
||||||
|
|
||||||
|
# Weekend: always record
|
||||||
|
if day in (5, 6):
|
||||||
|
return True
|
||||||
|
|
||||||
|
# Weekdays: 18:00 → 08:00
|
||||||
|
return hour >= 18 or hour < 8
|
||||||
|
|
||||||
|
|
||||||
|
async def scheduler_loop():
|
||||||
|
global _last_state
|
||||||
|
|
||||||
|
while True:
|
||||||
|
now = datetime.now()
|
||||||
|
should_record = is_record_time(now)
|
||||||
|
|
||||||
|
if _last_state != should_record:
|
||||||
|
print(f"[Scheduler] Set recording = {should_record}")
|
||||||
|
await set_recording(should_record)
|
||||||
|
_last_state = should_record
|
||||||
|
|
||||||
|
import asyncio
|
||||||
|
await asyncio.sleep(60)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. models.py
|
||||||
|
|
||||||
|
```python
|
||||||
|
from pydantic import BaseModel
|
||||||
|
|
||||||
|
|
||||||
|
class RecordingToggle(BaseModel):
|
||||||
|
enabled: bool
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. main.py
|
||||||
|
|
||||||
|
```python
|
||||||
|
from fastapi import FastAPI
|
||||||
|
import asyncio
|
||||||
|
|
||||||
|
from mediamtx import set_recording, get_paths
|
||||||
|
from scheduler import scheduler_loop
|
||||||
|
from models import RecordingToggle
|
||||||
|
|
||||||
|
app = FastAPI()
|
||||||
|
|
||||||
|
|
||||||
|
@app.on_event("startup")
|
||||||
|
async def startup():
|
||||||
|
asyncio.create_task(scheduler_loop())
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/")
|
||||||
|
async def root():
|
||||||
|
return {"status": "ok"}
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/paths")
|
||||||
|
async def list_paths():
|
||||||
|
return await get_paths()
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/recording")
|
||||||
|
async def toggle_recording(data: RecordingToggle):
|
||||||
|
return await set_recording(data.enabled)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Run Server
|
||||||
|
|
||||||
|
```
|
||||||
|
uvicorn main:app --host 0.0.0.0 --port 8000
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. API Endpoints
|
||||||
|
|
||||||
|
### Get stream status
|
||||||
|
```
|
||||||
|
GET /paths
|
||||||
|
```
|
||||||
|
|
||||||
|
### Enable recording
|
||||||
|
```
|
||||||
|
POST /recording
|
||||||
|
{
|
||||||
|
"enabled": true
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Disable recording
|
||||||
|
```
|
||||||
|
POST /recording
|
||||||
|
{
|
||||||
|
"enabled": false
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. Next Steps
|
||||||
|
|
||||||
|
- Add recordings API (list files)
|
||||||
|
- Serve video files (StaticFiles)
|
||||||
|
- Add camera config management (DB or JSON)
|
||||||
|
- Build frontend dashboard (WebRTC grid)
|
||||||
@@ -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
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
# IPCam Orange Pi Dashboard (Updated)
|
||||||
|
|
||||||
|
## 1. Overview
|
||||||
|
IPCam Orange Pi Dashboard is a lightweight web-based surveillance system built on top of MediaMTX.
|
||||||
|
|
||||||
|
The system is designed for:
|
||||||
|
- Orange Pi (low-resource hardware)
|
||||||
|
- Multiple IP cameras (4–10 cams)
|
||||||
|
- No AI processing (unlike Frigate)
|
||||||
|
- Full control via MediaMTX Control API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Architecture
|
||||||
|
|
||||||
|
### Components
|
||||||
|
- IP Cameras (RTSP - H264 recommended)
|
||||||
|
- MediaMTX (stream proxy + recorder + API)
|
||||||
|
- Dashboard Backend (scheduler + API)
|
||||||
|
- Dashboard Frontend (live view + playback UI)
|
||||||
|
|
||||||
|
### Data Flow
|
||||||
|
Camera → MediaMTX → WebRTC → Dashboard
|
||||||
|
Camera → MediaMTX → Recording (fMP4) → Storage → Playback UI
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Core Features
|
||||||
|
|
||||||
|
### 3.1 Live View
|
||||||
|
- Grid layout (1 / 4 / 9 cameras)
|
||||||
|
- WebRTC streaming (low latency)
|
||||||
|
- Auto reconnect
|
||||||
|
- Lazy loading streams
|
||||||
|
|
||||||
|
### 3.2 Playback
|
||||||
|
- List recordings by:
|
||||||
|
- Camera
|
||||||
|
- Date
|
||||||
|
- Play fMP4 files via HTML5 video
|
||||||
|
- File-based playback (no timeline initially)
|
||||||
|
|
||||||
|
### 3.3 Camera Management
|
||||||
|
- Add/remove camera (update MediaMTX config)
|
||||||
|
- Reload MediaMTX if needed
|
||||||
|
|
||||||
|
### 3.4 Recording Schedule (IMPORTANT)
|
||||||
|
- Configure recording time per system:
|
||||||
|
- Weekdays: 18:00 → 08:00
|
||||||
|
- Weekend: 24h
|
||||||
|
- Implemented in Dashboard (NOT MediaMTX)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. MediaMTX Integration
|
||||||
|
|
||||||
|
### 4.1 Endpoints
|
||||||
|
- RTSP: rtsp://<server>:8554/<path>
|
||||||
|
- WebRTC: http://<server>:8889
|
||||||
|
- API: http://<server>:9997
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.2 Control API Usage
|
||||||
|
|
||||||
|
#### Enable API
|
||||||
|
```
|
||||||
|
api: true
|
||||||
|
apiAddress: :9997
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.3 Toggle Recording via API
|
||||||
|
|
||||||
|
#### Enable recording
|
||||||
|
```
|
||||||
|
POST /v3/config/paths/patch
|
||||||
|
{
|
||||||
|
"paths": {
|
||||||
|
"cam1": { "record": true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Disable recording
|
||||||
|
```
|
||||||
|
POST /v3/config/paths/patch
|
||||||
|
{
|
||||||
|
"paths": {
|
||||||
|
"cam1": { "record": false }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### 4.4 Bulk Update
|
||||||
|
```
|
||||||
|
{
|
||||||
|
"paths": {
|
||||||
|
"cam1": { "record": true },
|
||||||
|
"cam2": { "record": true },
|
||||||
|
"cam3": { "record": true },
|
||||||
|
"cam4": { "record": true }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. Scheduler Design
|
||||||
|
|
||||||
|
### Logic
|
||||||
|
- Dashboard backend controls recording
|
||||||
|
- Runs every 60 seconds
|
||||||
|
|
||||||
|
### Example Logic
|
||||||
|
```
|
||||||
|
if weekend:
|
||||||
|
record = true
|
||||||
|
else:
|
||||||
|
record = (hour >= 18 or hour < 8)
|
||||||
|
```
|
||||||
|
|
||||||
|
### Implementation
|
||||||
|
- setInterval / cron job in backend
|
||||||
|
- Calls MediaMTX API
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Storage
|
||||||
|
|
||||||
|
### Format
|
||||||
|
- fMP4 segments
|
||||||
|
|
||||||
|
### Path
|
||||||
|
```
|
||||||
|
/recordings/<camera>/<timestamp>.fmp4
|
||||||
|
```
|
||||||
|
|
||||||
|
### Notes
|
||||||
|
- Files created per segment (e.g., 5 minutes)
|
||||||
|
- Recording starts immediately when enabled
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. Technology Stack
|
||||||
|
|
||||||
|
### Backend
|
||||||
|
- Node.js (Express) or Python (FastAPI)
|
||||||
|
- Responsibilities:
|
||||||
|
- Scheduler
|
||||||
|
- MediaMTX API integration
|
||||||
|
- Recording index API
|
||||||
|
|
||||||
|
### Frontend
|
||||||
|
- HTML + JS (or React)
|
||||||
|
- WebRTC player
|
||||||
|
- Video playback UI
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Performance Requirements
|
||||||
|
|
||||||
|
- 4–5 simultaneous streams
|
||||||
|
- Minimal CPU usage (no transcoding)
|
||||||
|
- Stable on Orange Pi
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Constraints
|
||||||
|
|
||||||
|
- Browser requires H264 (NOT H265)
|
||||||
|
- WebRTC requires UDP port (8189) open
|
||||||
|
- Firewall must allow:
|
||||||
|
- 8554 (RTSP)
|
||||||
|
- 8889 (WebRTC HTTP)
|
||||||
|
- 8189/UDP (ICE)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. Future Enhancements
|
||||||
|
|
||||||
|
- Timeline playback (merge segments)
|
||||||
|
- Multi-user authentication
|
||||||
|
- Mobile UI
|
||||||
|
- Event-based recording (optional)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. Summary
|
||||||
|
|
||||||
|
- MediaMTX handles streaming + recording
|
||||||
|
- Dashboard handles logic + scheduling
|
||||||
|
- Recording is controlled via API (not config reload)
|
||||||
|
|
||||||
|
This architecture is optimized for simplicity, performance, and scalability on Orange Pi.
|
||||||
@@ -0,0 +1,195 @@
|
|||||||
|
# IPCam Orange Pi Dashboard - Recording API & Video Serving
|
||||||
|
|
||||||
|
## 1. Overview
|
||||||
|
|
||||||
|
This module extends the backend to support:
|
||||||
|
|
||||||
|
- Listing recorded video files
|
||||||
|
- Serving video files to frontend (playback)
|
||||||
|
- Filtering by camera and date
|
||||||
|
|
||||||
|
This is REQUIRED for playback feature in dashboard.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 2. Storage Structure (MediaMTX)
|
||||||
|
|
||||||
|
Assumed recording path:
|
||||||
|
|
||||||
|
```
|
||||||
|
/recordings/<camera>/<timestamp>.fmp4
|
||||||
|
```
|
||||||
|
|
||||||
|
Example:
|
||||||
|
|
||||||
|
```
|
||||||
|
/recordings/cam1/2026-04-26_13-14-00-123456.fmp4
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 3. Backend Responsibilities
|
||||||
|
|
||||||
|
Backend must:
|
||||||
|
|
||||||
|
1. Scan recording directory
|
||||||
|
2. Parse metadata (camera, timestamp)
|
||||||
|
3. Provide API for frontend
|
||||||
|
4. Serve video files via HTTP
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 4. Add to requirements.txt
|
||||||
|
|
||||||
|
```
|
||||||
|
python-multipart
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 5. recordings.py (new module)
|
||||||
|
|
||||||
|
```python
|
||||||
|
import os
|
||||||
|
from datetime import datetime
|
||||||
|
|
||||||
|
BASE_PATH = "/recordings"
|
||||||
|
|
||||||
|
|
||||||
|
def parse_filename(filename: str):
|
||||||
|
try:
|
||||||
|
name = filename.replace(".fmp4", "")
|
||||||
|
dt = datetime.strptime(name, "%Y-%m-%d_%H-%M-%S-%f")
|
||||||
|
return dt
|
||||||
|
except:
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
def list_recordings(camera: str, date: str = None):
|
||||||
|
cam_path = os.path.join(BASE_PATH, camera)
|
||||||
|
|
||||||
|
if not os.path.exists(cam_path):
|
||||||
|
return []
|
||||||
|
|
||||||
|
results = []
|
||||||
|
|
||||||
|
for file in os.listdir(cam_path):
|
||||||
|
if not file.endswith(".fmp4"):
|
||||||
|
continue
|
||||||
|
|
||||||
|
dt = parse_filename(file)
|
||||||
|
if not dt:
|
||||||
|
continue
|
||||||
|
|
||||||
|
if date:
|
||||||
|
if dt.strftime("%Y-%m-%d") != date:
|
||||||
|
continue
|
||||||
|
|
||||||
|
results.append({
|
||||||
|
"camera": camera,
|
||||||
|
"filename": file,
|
||||||
|
"timestamp": dt.isoformat(),
|
||||||
|
"url": f"/videos/{camera}/{file}"
|
||||||
|
})
|
||||||
|
|
||||||
|
# sort newest first
|
||||||
|
results.sort(key=lambda x: x["timestamp"], reverse=True)
|
||||||
|
|
||||||
|
return results
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 6. Update main.py
|
||||||
|
|
||||||
|
```python
|
||||||
|
from fastapi.staticfiles import StaticFiles
|
||||||
|
from recordings import list_recordings
|
||||||
|
|
||||||
|
# mount video folder
|
||||||
|
app.mount("/videos", StaticFiles(directory="/recordings"), name="videos")
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/recordings")
|
||||||
|
async def get_recordings(camera: str, date: str = None):
|
||||||
|
return list_recordings(camera, date)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 7. API Usage
|
||||||
|
|
||||||
|
### List recordings
|
||||||
|
|
||||||
|
```
|
||||||
|
GET /recordings?camera=cam1
|
||||||
|
```
|
||||||
|
|
||||||
|
### Filter by date
|
||||||
|
|
||||||
|
```
|
||||||
|
GET /recordings?camera=cam1&date=2026-04-26
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 8. Response Example
|
||||||
|
|
||||||
|
```json
|
||||||
|
[
|
||||||
|
{
|
||||||
|
"camera": "cam1",
|
||||||
|
"filename": "2026-04-26_13-14-00-123456.fmp4",
|
||||||
|
"timestamp": "2026-04-26T13:14:00",
|
||||||
|
"url": "/videos/cam1/2026-04-26_13-14-00-123456.fmp4"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 9. Playback in Frontend
|
||||||
|
|
||||||
|
Use standard HTML:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<video controls width="600">
|
||||||
|
<source src="http://<server>:8000/videos/cam1/file.fmp4">
|
||||||
|
</video>
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 10. Important Notes
|
||||||
|
|
||||||
|
### fMP4 compatibility
|
||||||
|
- Modern browsers support fMP4
|
||||||
|
- If issues → fallback to HLS later
|
||||||
|
|
||||||
|
### File size
|
||||||
|
- Large files → consider pagination later
|
||||||
|
|
||||||
|
### Security (future)
|
||||||
|
- Add auth before exposing /videos
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 11. Next Improvements
|
||||||
|
|
||||||
|
- Pagination (limit, offset)
|
||||||
|
- Thumbnail generation
|
||||||
|
- Timeline UI
|
||||||
|
- Merge segments
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 12. Summary
|
||||||
|
|
||||||
|
This module completes playback pipeline:
|
||||||
|
|
||||||
|
MediaMTX → Disk → Backend API → Frontend Player
|
||||||
|
|
||||||
|
Without this layer:
|
||||||
|
- You cannot build usable playback UI
|
||||||
|
|
||||||
|
This is a critical component of your system.
|
||||||
@@ -0,0 +1,60 @@
|
|||||||
|
# IPCam Orange Pi Dashboard
|
||||||
|
|
||||||
|
Dashboard giám sát camera IP gọn nhẹ chạy trên Orange Pi, dựa trên MediaMTX:
|
||||||
|
|
||||||
|
- Live View (WebRTC WHEP) dạng grid, auto reconnect, lazy load
|
||||||
|
- Playback fMP4 theo camera + ngày (file list + HTML5 video)
|
||||||
|
- Settings: quản lý camera + lịch ghi hình (scheduler ở backend)
|
||||||
|
|
||||||
|
## Cấu trúc thư mục
|
||||||
|
|
||||||
|
- `src/`: frontend React
|
||||||
|
- `api/`: backend FastAPI
|
||||||
|
- `.trae/documents/`: tài liệu yêu cầu/kiến trúc
|
||||||
|
|
||||||
|
## Backend API
|
||||||
|
|
||||||
|
- `GET /api/health`
|
||||||
|
- `GET /api/config`
|
||||||
|
- `POST /api/cameras` / `DELETE /api/cameras/{name}`
|
||||||
|
- `GET /api/paths` (proxy trạng thái từ MediaMTX)
|
||||||
|
- `POST /api/recording` (bật/tắt ghi hình ngay)
|
||||||
|
- `POST /api/scheduler/enabled` / `POST /api/scheduler/schedule`
|
||||||
|
- `GET /api/recordings?camera=cam1&date=YYYY-MM-DD`
|
||||||
|
- `GET /videos/<camera>/<file>.fmp4`
|
||||||
|
|
||||||
|
## Chạy dev (máy dev)
|
||||||
|
|
||||||
|
### 1) Chạy backend
|
||||||
|
|
||||||
|
```bash
|
||||||
|
python3 -m venv api/.venv
|
||||||
|
source api/.venv/bin/activate
|
||||||
|
pip install -r api/requirements.txt
|
||||||
|
uvicorn api.app.main:app --host 0.0.0.0 --port 8000
|
||||||
|
```
|
||||||
|
|
||||||
|
### 2) Chạy frontend
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
Frontend dev server đã được cấu hình proxy `/api` và `/videos` sang `http://localhost:8000`.
|
||||||
|
|
||||||
|
## Cấu hình
|
||||||
|
|
||||||
|
Backend tự tạo file cấu hình tại `api/data/config.json` khi chạy lần đầu.
|
||||||
|
|
||||||
|
- `mediamtx_api_url`: ví dụ `http://127.0.0.1:9997`
|
||||||
|
- `mediamtx_webrtc_url`: ví dụ `http://127.0.0.1:8889`
|
||||||
|
- `recordings_dir`: ví dụ `/recordings`
|
||||||
|
- `cameras`: danh sách camera (name + rtsp_url)
|
||||||
|
- `schedule`: lịch ghi hình
|
||||||
|
|
||||||
|
Có thể override WebRTC base URL ở frontend bằng biến môi trường `VITE_MEDIAMTX_WEBRTC_URL`.
|
||||||
|
|
||||||
|
## Triển khai
|
||||||
|
|
||||||
|
Xem hướng dẫn chi tiết trong `INSTALL.md`.
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
|
||||||
@@ -0,0 +1,41 @@
|
|||||||
|
import json
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
import anyio
|
||||||
|
|
||||||
|
from .models import AppConfig
|
||||||
|
|
||||||
|
|
||||||
|
class ConfigStore:
|
||||||
|
def __init__(self, file_path: Path):
|
||||||
|
self._file_path = file_path
|
||||||
|
self._lock = anyio.Lock()
|
||||||
|
|
||||||
|
def _write_unlocked(self, cfg: AppConfig) -> None:
|
||||||
|
self._file_path.parent.mkdir(parents=True, exist_ok=True)
|
||||||
|
self._file_path.write_text(
|
||||||
|
json.dumps(cfg.model_dump(mode="json"), indent=2, ensure_ascii=False),
|
||||||
|
encoding="utf-8",
|
||||||
|
)
|
||||||
|
|
||||||
|
async def load(self) -> AppConfig:
|
||||||
|
async with self._lock:
|
||||||
|
if not self._file_path.exists():
|
||||||
|
cfg = AppConfig(cameras=[])
|
||||||
|
self._write_unlocked(cfg)
|
||||||
|
return cfg
|
||||||
|
|
||||||
|
raw = self._file_path.read_text(encoding="utf-8")
|
||||||
|
data = json.loads(raw) if raw.strip() else {}
|
||||||
|
return AppConfig.model_validate(data)
|
||||||
|
|
||||||
|
async def save(self, cfg: AppConfig) -> None:
|
||||||
|
async with self._lock:
|
||||||
|
self._write_unlocked(cfg)
|
||||||
|
|
||||||
|
|
||||||
|
def default_store(project_root: Optional[Path] = None) -> ConfigStore:
|
||||||
|
root = project_root or Path(__file__).resolve().parents[2]
|
||||||
|
return ConfigStore(root / "api" / "data" / "config.json")
|
||||||
|
|
||||||
+185
@@ -0,0 +1,185 @@
|
|||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
import asyncio
|
||||||
|
import os
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
from fastapi import FastAPI, HTTPException
|
||||||
|
from fastapi.middleware.cors import CORSMiddleware
|
||||||
|
from fastapi.staticfiles import StaticFiles
|
||||||
|
|
||||||
|
from .config_store import default_store
|
||||||
|
from .mediamtx_client import MediaMTXClient
|
||||||
|
from .models import (
|
||||||
|
AppConfig,
|
||||||
|
Camera,
|
||||||
|
RecordingToggle,
|
||||||
|
ScheduleUpdate,
|
||||||
|
SchedulerEnabled,
|
||||||
|
)
|
||||||
|
from .recordings import list_recordings
|
||||||
|
from .scheduler import Scheduler
|
||||||
|
|
||||||
|
|
||||||
|
def _cors_origins() -> list[str]:
|
||||||
|
raw = os.getenv("CORS_ORIGINS", "http://localhost:5173")
|
||||||
|
return [x.strip() for x in raw.split(",") if x.strip()]
|
||||||
|
|
||||||
|
|
||||||
|
app = FastAPI(title="IPCam Dashboard API")
|
||||||
|
app.add_middleware(
|
||||||
|
CORSMiddleware,
|
||||||
|
allow_origins=_cors_origins(),
|
||||||
|
allow_credentials=True,
|
||||||
|
allow_methods=["*"] ,
|
||||||
|
allow_headers=["*"] ,
|
||||||
|
)
|
||||||
|
|
||||||
|
store = default_store()
|
||||||
|
|
||||||
|
|
||||||
|
async def _apply_recording(enabled: bool) -> None:
|
||||||
|
cfg = await store.load()
|
||||||
|
names = [c.name for c in cfg.cameras]
|
||||||
|
if not names:
|
||||||
|
return
|
||||||
|
|
||||||
|
client = MediaMTXClient(
|
||||||
|
api_url=cfg.mediamtx_api_url,
|
||||||
|
username=os.getenv("MEDIAMTX_API_USER"),
|
||||||
|
password=os.getenv("MEDIAMTX_API_PASS"),
|
||||||
|
)
|
||||||
|
await client.set_recording_bulk(names, enabled)
|
||||||
|
|
||||||
|
|
||||||
|
scheduler = Scheduler(apply=_apply_recording)
|
||||||
|
|
||||||
|
|
||||||
|
async def _scheduler_loop() -> None:
|
||||||
|
while True:
|
||||||
|
try:
|
||||||
|
cfg = await store.load()
|
||||||
|
await scheduler.tick(cfg.schedule)
|
||||||
|
finally:
|
||||||
|
await asyncio.sleep(60)
|
||||||
|
|
||||||
|
|
||||||
|
@app.on_event("startup")
|
||||||
|
async def _startup() -> None:
|
||||||
|
cfg = await store.load()
|
||||||
|
recordings_dir = cfg.recordings_dir
|
||||||
|
if Path(recordings_dir).exists():
|
||||||
|
app.mount("/videos", StaticFiles(directory=recordings_dir), name="videos")
|
||||||
|
asyncio.create_task(_scheduler_loop())
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/api/health")
|
||||||
|
async def health() -> dict:
|
||||||
|
return {"status": "ok"}
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/api/config")
|
||||||
|
async def get_config() -> AppConfig:
|
||||||
|
return await store.load()
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/api/cameras")
|
||||||
|
async def add_camera(camera: Camera) -> AppConfig:
|
||||||
|
cfg = await store.load()
|
||||||
|
if any(c.name == camera.name for c in cfg.cameras):
|
||||||
|
raise HTTPException(status_code=409, detail="camera_already_exists")
|
||||||
|
|
||||||
|
cfg.cameras.append(camera)
|
||||||
|
await store.save(cfg)
|
||||||
|
|
||||||
|
client = MediaMTXClient(
|
||||||
|
api_url=cfg.mediamtx_api_url,
|
||||||
|
username=os.getenv("MEDIAMTX_API_USER"),
|
||||||
|
password=os.getenv("MEDIAMTX_API_PASS"),
|
||||||
|
)
|
||||||
|
await client.upsert_paths_sources_bulk({camera.name: camera.rtsp_url})
|
||||||
|
return cfg
|
||||||
|
|
||||||
|
|
||||||
|
@app.delete("/api/cameras/{name}")
|
||||||
|
async def delete_camera(name: str) -> AppConfig:
|
||||||
|
cfg = await store.load()
|
||||||
|
before = len(cfg.cameras)
|
||||||
|
cfg.cameras = [c for c in cfg.cameras if c.name != name]
|
||||||
|
if len(cfg.cameras) == before:
|
||||||
|
raise HTTPException(status_code=404, detail="camera_not_found")
|
||||||
|
await store.save(cfg)
|
||||||
|
|
||||||
|
client = MediaMTXClient(
|
||||||
|
api_url=cfg.mediamtx_api_url,
|
||||||
|
username=os.getenv("MEDIAMTX_API_USER"),
|
||||||
|
password=os.getenv("MEDIAMTX_API_PASS"),
|
||||||
|
)
|
||||||
|
await client.delete_path(name)
|
||||||
|
return cfg
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/api/paths")
|
||||||
|
async def list_paths() -> dict:
|
||||||
|
cfg = await store.load()
|
||||||
|
client = MediaMTXClient(
|
||||||
|
api_url=cfg.mediamtx_api_url,
|
||||||
|
username=os.getenv("MEDIAMTX_API_USER"),
|
||||||
|
password=os.getenv("MEDIAMTX_API_PASS"),
|
||||||
|
)
|
||||||
|
return await client.list_paths_status()
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/api/recording")
|
||||||
|
async def toggle_recording(data: RecordingToggle) -> dict:
|
||||||
|
await _apply_recording(data.enabled)
|
||||||
|
return {"enabled": data.enabled}
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/api/scheduler/enabled")
|
||||||
|
async def set_scheduler_enabled(data: SchedulerEnabled) -> AppConfig:
|
||||||
|
cfg = await store.load()
|
||||||
|
cfg.schedule.enabled = data.enabled
|
||||||
|
await store.save(cfg)
|
||||||
|
await scheduler.tick(cfg.schedule)
|
||||||
|
return cfg
|
||||||
|
|
||||||
|
|
||||||
|
@app.post("/api/scheduler/schedule")
|
||||||
|
async def update_schedule(data: ScheduleUpdate) -> AppConfig:
|
||||||
|
cfg = await store.load()
|
||||||
|
cfg.schedule.weekdays_from = data.weekdays_from
|
||||||
|
cfg.schedule.weekdays_to = data.weekdays_to
|
||||||
|
cfg.schedule.weekend_all_day = data.weekend_all_day
|
||||||
|
await store.save(cfg)
|
||||||
|
await scheduler.tick(cfg.schedule)
|
||||||
|
return cfg
|
||||||
|
|
||||||
|
|
||||||
|
@app.get("/api/recordings")
|
||||||
|
async def recordings(
|
||||||
|
camera: str,
|
||||||
|
date: Optional[str] = None,
|
||||||
|
limit: int = 200,
|
||||||
|
offset: int = 0,
|
||||||
|
) -> list[dict]:
|
||||||
|
cfg = await store.load()
|
||||||
|
if not any(c.name == camera for c in cfg.cameras):
|
||||||
|
raise HTTPException(status_code=404, detail="camera_not_found")
|
||||||
|
if limit < 1 or limit > 2000:
|
||||||
|
raise HTTPException(status_code=400, detail="invalid_limit")
|
||||||
|
if offset < 0:
|
||||||
|
raise HTTPException(status_code=400, detail="invalid_offset")
|
||||||
|
|
||||||
|
items = list_recordings(cfg.recordings_dir, camera, date, limit, offset)
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
"camera": it.camera,
|
||||||
|
"filename": it.filename,
|
||||||
|
"timestamp": it.timestamp,
|
||||||
|
"url": it.url,
|
||||||
|
}
|
||||||
|
for it in items
|
||||||
|
]
|
||||||
|
|
||||||
@@ -0,0 +1,84 @@
|
|||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
from dataclasses import dataclass
|
||||||
|
from typing import Any, Optional
|
||||||
|
|
||||||
|
import httpx
|
||||||
|
|
||||||
|
|
||||||
|
@dataclass(frozen=True)
|
||||||
|
class MediaMTXClient:
|
||||||
|
api_url: str
|
||||||
|
username: Optional[str] = None
|
||||||
|
password: Optional[str] = None
|
||||||
|
|
||||||
|
def _auth(self) -> Optional[tuple[str, str]]:
|
||||||
|
if self.username and self.password:
|
||||||
|
return (self.username, self.password)
|
||||||
|
return None
|
||||||
|
|
||||||
|
async def list_paths_status(self) -> dict[str, Any]:
|
||||||
|
async with httpx.AsyncClient(timeout=5) as client:
|
||||||
|
r = await client.get(f"{self.api_url}/v3/paths/list", auth=self._auth())
|
||||||
|
r.raise_for_status()
|
||||||
|
return r.json()
|
||||||
|
|
||||||
|
async def set_recording_bulk(self, names: list[str], enabled: bool) -> dict[str, Any]:
|
||||||
|
payload = {"paths": {name: {"record": enabled} for name in names}}
|
||||||
|
async with httpx.AsyncClient(timeout=8) as client:
|
||||||
|
r = await client.post(
|
||||||
|
f"{self.api_url}/v3/config/paths/patch",
|
||||||
|
json=payload,
|
||||||
|
auth=self._auth(),
|
||||||
|
)
|
||||||
|
r.raise_for_status()
|
||||||
|
return r.json()
|
||||||
|
|
||||||
|
async def upsert_paths_sources_bulk(self, sources: dict[str, str]) -> dict[str, Any]:
|
||||||
|
payload = {"paths": {name: {"source": url} for name, url in sources.items()}}
|
||||||
|
async with httpx.AsyncClient(timeout=10) as client:
|
||||||
|
r = await client.post(
|
||||||
|
f"{self.api_url}/v3/config/paths/patch",
|
||||||
|
json=payload,
|
||||||
|
auth=self._auth(),
|
||||||
|
)
|
||||||
|
if r.status_code != 404:
|
||||||
|
r.raise_for_status()
|
||||||
|
return r.json()
|
||||||
|
|
||||||
|
results: dict[str, Any] = {"fallback": []}
|
||||||
|
async with httpx.AsyncClient(timeout=10) as client:
|
||||||
|
for name, url in sources.items():
|
||||||
|
rr = await client.post(
|
||||||
|
f"{self.api_url}/v3/config/paths/add/{name}",
|
||||||
|
json={"source": url},
|
||||||
|
auth=self._auth(),
|
||||||
|
)
|
||||||
|
if rr.status_code == 409:
|
||||||
|
rr = await client.patch(
|
||||||
|
f"{self.api_url}/v3/config/paths/patch/{name}",
|
||||||
|
json={"source": url},
|
||||||
|
auth=self._auth(),
|
||||||
|
)
|
||||||
|
rr.raise_for_status()
|
||||||
|
results["fallback"].append({"name": name, "status": rr.status_code})
|
||||||
|
return results
|
||||||
|
|
||||||
|
async def delete_path(self, name: str) -> None:
|
||||||
|
async with httpx.AsyncClient(timeout=8) as client:
|
||||||
|
r = await client.delete(
|
||||||
|
f"{self.api_url}/v3/config/paths/delete/{name}",
|
||||||
|
auth=self._auth(),
|
||||||
|
)
|
||||||
|
if r.status_code in (404, 410):
|
||||||
|
return
|
||||||
|
if r.status_code == 405:
|
||||||
|
rr = await client.post(
|
||||||
|
f"{self.api_url}/v3/config/paths/patch",
|
||||||
|
json={"paths": {name: {"source": ""}}},
|
||||||
|
auth=self._auth(),
|
||||||
|
)
|
||||||
|
rr.raise_for_status()
|
||||||
|
return
|
||||||
|
r.raise_for_status()
|
||||||
|
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
from pydantic import BaseModel, Field
|
||||||
|
|
||||||
|
|
||||||
|
class Camera(BaseModel):
|
||||||
|
name: str = Field(min_length=1, max_length=64, pattern=r"^[a-zA-Z0-9_\-\/]+$")
|
||||||
|
rtsp_url: str = Field(min_length=1, max_length=2048)
|
||||||
|
|
||||||
|
|
||||||
|
class Schedule(BaseModel):
|
||||||
|
enabled: bool = True
|
||||||
|
weekdays_from: str = Field(default="18:00", pattern=r"^\d{2}:\d{2}$")
|
||||||
|
weekdays_to: str = Field(default="08:00", pattern=r"^\d{2}:\d{2}$")
|
||||||
|
weekend_all_day: bool = True
|
||||||
|
|
||||||
|
|
||||||
|
class AppConfig(BaseModel):
|
||||||
|
mediamtx_api_url: str = "http://127.0.0.1:9997"
|
||||||
|
mediamtx_webrtc_url: str = "http://127.0.0.1:8889"
|
||||||
|
recordings_dir: str = "/recordings"
|
||||||
|
cameras: list[Camera] = Field(default_factory=list)
|
||||||
|
schedule: Schedule = Field(default_factory=Schedule)
|
||||||
|
|
||||||
|
|
||||||
|
class RecordingToggle(BaseModel):
|
||||||
|
enabled: bool
|
||||||
|
|
||||||
|
|
||||||
|
class SchedulerEnabled(BaseModel):
|
||||||
|
enabled: bool
|
||||||
|
|
||||||
|
|
||||||
|
class ScheduleUpdate(BaseModel):
|
||||||
|
weekdays_from: str = Field(pattern=r"^\d{2}:\d{2}$")
|
||||||
|
weekdays_to: str = Field(pattern=r"^\d{2}:\d{2}$")
|
||||||
|
weekend_all_day: bool
|
||||||
|
|
||||||
@@ -0,0 +1,64 @@
|
|||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
from dataclasses import dataclass
|
||||||
|
from datetime import datetime
|
||||||
|
from pathlib import Path
|
||||||
|
from typing import Optional
|
||||||
|
|
||||||
|
|
||||||
|
@dataclass(frozen=True)
|
||||||
|
class RecordingItem:
|
||||||
|
camera: str
|
||||||
|
filename: str
|
||||||
|
timestamp: str
|
||||||
|
url: str
|
||||||
|
|
||||||
|
|
||||||
|
def _parse_filename(filename: str) -> Optional[datetime]:
|
||||||
|
if not filename.endswith(".fmp4"):
|
||||||
|
return None
|
||||||
|
stem = filename[:-5]
|
||||||
|
try:
|
||||||
|
return datetime.strptime(stem, "%Y-%m-%d_%H-%M-%S-%f")
|
||||||
|
except ValueError:
|
||||||
|
return None
|
||||||
|
|
||||||
|
|
||||||
|
def list_recordings(
|
||||||
|
recordings_dir: str,
|
||||||
|
camera: str,
|
||||||
|
date: Optional[str],
|
||||||
|
limit: int,
|
||||||
|
offset: int,
|
||||||
|
) -> list[RecordingItem]:
|
||||||
|
base = Path(recordings_dir)
|
||||||
|
cam_dir = base / camera
|
||||||
|
if not cam_dir.exists() or not cam_dir.is_dir():
|
||||||
|
return []
|
||||||
|
|
||||||
|
items: list[tuple[datetime, str]] = []
|
||||||
|
for p in cam_dir.iterdir():
|
||||||
|
if not p.is_file():
|
||||||
|
continue
|
||||||
|
dt = _parse_filename(p.name)
|
||||||
|
if dt is None:
|
||||||
|
continue
|
||||||
|
if date is not None and dt.strftime("%Y-%m-%d") != date:
|
||||||
|
continue
|
||||||
|
items.append((dt, p.name))
|
||||||
|
|
||||||
|
items.sort(key=lambda x: x[0], reverse=True)
|
||||||
|
sliced = items[offset : offset + limit]
|
||||||
|
|
||||||
|
out: list[RecordingItem] = []
|
||||||
|
for dt, name in sliced:
|
||||||
|
out.append(
|
||||||
|
RecordingItem(
|
||||||
|
camera=camera,
|
||||||
|
filename=name,
|
||||||
|
timestamp=dt.isoformat(),
|
||||||
|
url=f"/videos/{camera}/{name}",
|
||||||
|
)
|
||||||
|
)
|
||||||
|
return out
|
||||||
|
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
from __future__ import annotations
|
||||||
|
|
||||||
|
from dataclasses import dataclass
|
||||||
|
from datetime import datetime, time
|
||||||
|
from typing import Awaitable, Callable, Optional
|
||||||
|
|
||||||
|
from .models import Schedule
|
||||||
|
|
||||||
|
|
||||||
|
def _parse_hhmm(value: str) -> time:
|
||||||
|
hh, mm = value.split(":")
|
||||||
|
return time(hour=int(hh), minute=int(mm))
|
||||||
|
|
||||||
|
|
||||||
|
def should_record_now(now: datetime, schedule: Schedule) -> bool:
|
||||||
|
if not schedule.enabled:
|
||||||
|
return False
|
||||||
|
|
||||||
|
weekday = now.weekday()
|
||||||
|
if weekday in (5, 6) and schedule.weekend_all_day:
|
||||||
|
return True
|
||||||
|
|
||||||
|
start = _parse_hhmm(schedule.weekdays_from)
|
||||||
|
end = _parse_hhmm(schedule.weekdays_to)
|
||||||
|
now_t = now.time().replace(second=0, microsecond=0)
|
||||||
|
|
||||||
|
if start == end:
|
||||||
|
return True
|
||||||
|
|
||||||
|
if start < end:
|
||||||
|
return start <= now_t < end
|
||||||
|
return now_t >= start or now_t < end
|
||||||
|
|
||||||
|
|
||||||
|
@dataclass
|
||||||
|
class Scheduler:
|
||||||
|
apply: Callable[[bool], Awaitable[None]]
|
||||||
|
_last_state: Optional[bool] = None
|
||||||
|
|
||||||
|
async def tick(self, schedule: Schedule) -> None:
|
||||||
|
now = datetime.now()
|
||||||
|
state = should_record_now(now, schedule)
|
||||||
|
if self._last_state != state:
|
||||||
|
await self.apply(state)
|
||||||
|
self._last_state = state
|
||||||
|
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
fastapi>=0.110
|
||||||
|
uvicorn[standard]>=0.27
|
||||||
|
httpx>=0.27
|
||||||
|
pydantic>=2.6
|
||||||
|
python-multipart>=0.0.9
|
||||||
|
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
import js from '@eslint/js'
|
||||||
|
import globals from 'globals'
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks'
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||||
|
import tseslint from 'typescript-eslint'
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
+24
@@ -0,0 +1,24 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>My Trae Project</title>
|
||||||
|
<script type="module">
|
||||||
|
if (import.meta.hot?.on) {
|
||||||
|
import.meta.hot.on('vite:error', (error) => {
|
||||||
|
if (error.err) {
|
||||||
|
console.error(
|
||||||
|
[error.err.message, error.err.frame].filter(Boolean).join('\n'),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Generated
+6781
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,47 @@
|
|||||||
|
{
|
||||||
|
"name": "trae-project",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"check": "tsc -b --noEmit",
|
||||||
|
"test": "node node_modules/vitest/vitest.mjs run"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"lucide-react": "^0.511.0",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-router-dom": "^7.3.0",
|
||||||
|
"tailwind-merge": "^3.0.2",
|
||||||
|
"zustand": "^5.0.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.25.0",
|
||||||
|
"@types/node": "^22.15.30",
|
||||||
|
"@types/react": "^18.3.12",
|
||||||
|
"@types/react-dom": "^18.3.1",
|
||||||
|
"@vitejs/plugin-react": "^4.4.1",
|
||||||
|
"autoprefixer": "^10.4.21",
|
||||||
|
"babel-plugin-react-dev-locator": "^1.0.0",
|
||||||
|
"postcss": "^8.5.3",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"eslint": "^9.25.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.2.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.19",
|
||||||
|
"globals": "^16.0.0",
|
||||||
|
"typescript": "~5.8.3",
|
||||||
|
"typescript-eslint": "^8.30.1",
|
||||||
|
"vite": "^6.3.5",
|
||||||
|
"vite-plugin-trae-solo-badge": "^1.0.0",
|
||||||
|
"vite-tsconfig-paths": "^5.1.4",
|
||||||
|
"vitest": "^2.1.9",
|
||||||
|
"jsdom": "^25.0.1",
|
||||||
|
"@testing-library/react": "^16.1.0",
|
||||||
|
"@testing-library/jest-dom": "^6.6.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
/** WARNING: DON'T EDIT THIS FILE */
|
||||||
|
/** WARNING: DON'T EDIT THIS FILE */
|
||||||
|
/** WARNING: DON'T EDIT THIS FILE */
|
||||||
|
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<rect width="32" height="32" fill="#0A0B0D"/>
|
||||||
|
<path d="M26.6677 23.7149H8.38057V20.6496H5.33301V8.38159H26.6677V23.7149ZM8.38057 20.6496H23.6201V11.4482H8.38057V20.6496ZM16.0011 16.0021L13.8461 18.1705L11.6913 16.0021L13.8461 13.8337L16.0011 16.0021ZM22.0963 16.0008L19.9414 18.1691L17.7865 16.0008L19.9414 13.8324L22.0963 16.0008Z" fill="#32F08C"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 453 B |
+21
@@ -0,0 +1,21 @@
|
|||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";
|
||||||
|
import AppShell from "@/components/AppShell";
|
||||||
|
import Live from "@/pages/Live";
|
||||||
|
import Playback from "@/pages/Playback";
|
||||||
|
import Settings from "@/pages/Settings";
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<AppShell>
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<Navigate to="/live" replace />} />
|
||||||
|
<Route path="/live" element={<Live />} />
|
||||||
|
<Route path="/playback" element={<Playback />} />
|
||||||
|
<Route path="/settings" element={<Settings />} />
|
||||||
|
<Route path="*" element={<Navigate to="/live" replace />} />
|
||||||
|
</Routes>
|
||||||
|
</AppShell>
|
||||||
|
</Router>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,14 @@
|
|||||||
|
import { ReactNode } from "react";
|
||||||
|
import TopNav from "@/components/TopNav";
|
||||||
|
|
||||||
|
export default function AppShell({ children }: { children: ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-dvh bg-zinc-950 text-zinc-50">
|
||||||
|
<TopNav />
|
||||||
|
<main className="mx-auto w-full max-w-7xl px-4 py-4 md:px-6 md:py-6">
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,106 @@
|
|||||||
|
import { useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import { Maximize, RefreshCcw } from "lucide-react";
|
||||||
|
import { useWhepPlayer } from "@/hooks/useWhepPlayer";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
name: string;
|
||||||
|
webrtcBaseUrl: string;
|
||||||
|
isOnline: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
function StatusDot({ online }: { online: boolean }) {
|
||||||
|
return (
|
||||||
|
<span
|
||||||
|
className={[
|
||||||
|
"inline-flex h-2.5 w-2.5 rounded-full",
|
||||||
|
online ? "bg-emerald-400" : "bg-rose-400",
|
||||||
|
].join(" ")}
|
||||||
|
aria-label={online ? "online" : "offline"}
|
||||||
|
title={online ? "online" : "offline"}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CameraTile({ name, webrtcBaseUrl, isOnline }: Props) {
|
||||||
|
const containerRef = useRef<HTMLDivElement | null>(null);
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const el = containerRef.current;
|
||||||
|
if (!el) return;
|
||||||
|
|
||||||
|
const io = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
const entry = entries[0];
|
||||||
|
setVisible(Boolean(entry?.isIntersecting));
|
||||||
|
},
|
||||||
|
{ threshold: 0.2 }
|
||||||
|
);
|
||||||
|
|
||||||
|
io.observe(el);
|
||||||
|
return () => io.disconnect();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const enabled = useMemo(() => visible, [visible]);
|
||||||
|
const player = useWhepPlayer({ enabled, webrtcBaseUrl, streamName: name });
|
||||||
|
|
||||||
|
const onFullscreen = async () => {
|
||||||
|
const v = player.videoRef.current;
|
||||||
|
if (!v) return;
|
||||||
|
const anyV = v as HTMLVideoElement & { webkitRequestFullscreen?: () => Promise<void> | void };
|
||||||
|
if (v.requestFullscreen) await v.requestFullscreen();
|
||||||
|
else if (anyV.webkitRequestFullscreen) anyV.webkitRequestFullscreen();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
ref={containerRef}
|
||||||
|
className="group relative overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/30"
|
||||||
|
>
|
||||||
|
<div className="absolute left-0 top-0 z-10 flex w-full items-center justify-between gap-2 bg-gradient-to-b from-zinc-950/80 to-transparent px-3 py-2">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<StatusDot online={isOnline} />
|
||||||
|
<div className="text-xs font-medium text-zinc-100">{name}</div>
|
||||||
|
<div className="text-[11px] text-zinc-400">
|
||||||
|
{player.status === "playing" ? "webrtc" : player.status}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-1 opacity-100 transition md:opacity-0 md:group-hover:opacity-100">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={player.restart}
|
||||||
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||||
|
title="Reload"
|
||||||
|
>
|
||||||
|
<RefreshCcw className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onFullscreen}
|
||||||
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||||
|
title="Fullscreen"
|
||||||
|
>
|
||||||
|
<Maximize className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="aspect-video w-full bg-black">
|
||||||
|
<video
|
||||||
|
ref={player.videoRef}
|
||||||
|
className="h-full w-full object-contain"
|
||||||
|
muted
|
||||||
|
playsInline
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{player.status === "error" ? (
|
||||||
|
<div className="border-t border-zinc-800 px-3 py-2 text-xs text-rose-300">
|
||||||
|
{player.error ?? "error"}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
import { cn } from '@/lib/utils'
|
||||||
|
|
||||||
|
// Empty component
|
||||||
|
export default function Empty() {
|
||||||
|
return (
|
||||||
|
<div className={cn('flex h-full items-center justify-center')}>Empty</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
import { render, screen } from "@testing-library/react";
|
||||||
|
import { MemoryRouter } from "react-router-dom";
|
||||||
|
import { describe, expect, it } from "vitest";
|
||||||
|
import TopNav from "@/components/TopNav";
|
||||||
|
|
||||||
|
describe("TopNav", () => {
|
||||||
|
it("renders navigation links", () => {
|
||||||
|
render(
|
||||||
|
<MemoryRouter>
|
||||||
|
<TopNav />
|
||||||
|
</MemoryRouter>
|
||||||
|
);
|
||||||
|
|
||||||
|
expect(screen.getByText("Live")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Playback")).toBeInTheDocument();
|
||||||
|
expect(screen.getByText("Settings")).toBeInTheDocument();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
@@ -0,0 +1,55 @@
|
|||||||
|
import { NavLink } from "react-router-dom";
|
||||||
|
import { Film, Settings2, Video } from "lucide-react";
|
||||||
|
import type { ReactNode } from "react";
|
||||||
|
|
||||||
|
function NavItem({
|
||||||
|
to,
|
||||||
|
label,
|
||||||
|
icon,
|
||||||
|
}: {
|
||||||
|
to: string;
|
||||||
|
label: string;
|
||||||
|
icon: ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<NavLink
|
||||||
|
to={to}
|
||||||
|
className={({ isActive }) =>
|
||||||
|
[
|
||||||
|
"inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition",
|
||||||
|
isActive
|
||||||
|
? "bg-zinc-800 text-zinc-50"
|
||||||
|
: "text-zinc-300 hover:bg-zinc-900 hover:text-zinc-50",
|
||||||
|
].join(" ")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span className="inline-flex h-4 w-4 items-center justify-center">{icon}</span>
|
||||||
|
<span>{label}</span>
|
||||||
|
</NavLink>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TopNav() {
|
||||||
|
return (
|
||||||
|
<header className="border-b border-zinc-800 bg-zinc-950/70 backdrop-blur">
|
||||||
|
<div className="mx-auto flex w-full max-w-7xl items-center justify-between gap-4 px-4 py-3 md:px-6">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="flex h-9 w-9 items-center justify-center rounded-lg bg-zinc-900 ring-1 ring-zinc-800">
|
||||||
|
<Video className="h-5 w-5" />
|
||||||
|
</div>
|
||||||
|
<div className="leading-tight">
|
||||||
|
<div className="text-sm font-semibold">IPCam Dashboard</div>
|
||||||
|
<div className="text-xs text-zinc-400">MediaMTX + Orange Pi</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<nav className="flex items-center gap-1">
|
||||||
|
<NavItem to="/live" label="Live" icon={<Video className="h-4 w-4" />} />
|
||||||
|
<NavItem to="/playback" label="Playback" icon={<Film className="h-4 w-4" />} />
|
||||||
|
<NavItem to="/settings" label="Settings" icon={<Settings2 className="h-4 w-4" />} />
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { apiJson } from "@/utils/api";
|
||||||
|
import type { MediaMtxPathsListResponse } from "@/types/api";
|
||||||
|
|
||||||
|
export function usePathsStatus(pollMs: number) {
|
||||||
|
const [data, setData] = useState<MediaMtxPathsListResponse | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
let t: number | undefined;
|
||||||
|
|
||||||
|
const tick = async () => {
|
||||||
|
try {
|
||||||
|
const res = await apiJson<MediaMtxPathsListResponse>("/paths", { method: "GET" });
|
||||||
|
if (isMounted) setData(res);
|
||||||
|
} catch {
|
||||||
|
if (isMounted) setData(null);
|
||||||
|
} finally {
|
||||||
|
t = window.setTimeout(tick, pollMs);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
tick();
|
||||||
|
return () => {
|
||||||
|
isMounted = false;
|
||||||
|
if (t) window.clearTimeout(t);
|
||||||
|
};
|
||||||
|
}, [pollMs]);
|
||||||
|
|
||||||
|
const readyByName = useMemo(() => {
|
||||||
|
const map = new Map<string, boolean>();
|
||||||
|
for (const it of data?.items ?? []) {
|
||||||
|
map.set(it.name, Boolean(it.ready));
|
||||||
|
}
|
||||||
|
return map;
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
return { raw: data, readyByName };
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,29 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
|
||||||
|
type Theme = 'light' | 'dark';
|
||||||
|
|
||||||
|
export function useTheme() {
|
||||||
|
const [theme, setTheme] = useState<Theme>(() => {
|
||||||
|
const savedTheme = localStorage.getItem('theme') as Theme;
|
||||||
|
if (savedTheme) {
|
||||||
|
return savedTheme;
|
||||||
|
}
|
||||||
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
document.documentElement.classList.remove('light', 'dark');
|
||||||
|
document.documentElement.classList.add(theme);
|
||||||
|
localStorage.setItem('theme', theme);
|
||||||
|
}, [theme]);
|
||||||
|
|
||||||
|
const toggleTheme = () => {
|
||||||
|
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
theme,
|
||||||
|
toggleTheme,
|
||||||
|
isDark: theme === 'dark'
|
||||||
|
};
|
||||||
|
}
|
||||||
@@ -0,0 +1,177 @@
|
|||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
|
||||||
|
type PlayerStatus = "idle" | "connecting" | "playing" | "error";
|
||||||
|
|
||||||
|
function withNoTrailingSlash(url: string) {
|
||||||
|
return url.endsWith("/") ? url.slice(0, -1) : url;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function waitForIceGatheringComplete(pc: RTCPeerConnection) {
|
||||||
|
if (pc.iceGatheringState === "complete") return;
|
||||||
|
await new Promise<void>((resolve) => {
|
||||||
|
const onState = () => {
|
||||||
|
if (pc.iceGatheringState === "complete") {
|
||||||
|
pc.removeEventListener("icegatheringstatechange", onState);
|
||||||
|
resolve();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
pc.addEventListener("icegatheringstatechange", onState);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useWhepPlayer({
|
||||||
|
enabled,
|
||||||
|
webrtcBaseUrl,
|
||||||
|
streamName,
|
||||||
|
}: {
|
||||||
|
enabled: boolean;
|
||||||
|
webrtcBaseUrl: string;
|
||||||
|
streamName: string;
|
||||||
|
}) {
|
||||||
|
const videoRef = useRef<HTMLVideoElement | null>(null);
|
||||||
|
const pcRef = useRef<RTCPeerConnection | null>(null);
|
||||||
|
const sessionUrlRef = useRef<string | null>(null);
|
||||||
|
const abortRef = useRef<AbortController | null>(null);
|
||||||
|
const [status, setStatus] = useState<PlayerStatus>("idle");
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [restartNonce, setRestartNonce] = useState(0);
|
||||||
|
|
||||||
|
const whepUrl = useMemo(() => {
|
||||||
|
return `${withNoTrailingSlash(webrtcBaseUrl)}/${encodeURIComponent(streamName)}/whep`;
|
||||||
|
}, [webrtcBaseUrl, streamName]);
|
||||||
|
|
||||||
|
const stop = useCallback(async () => {
|
||||||
|
abortRef.current?.abort();
|
||||||
|
abortRef.current = null;
|
||||||
|
|
||||||
|
const sessionUrl = sessionUrlRef.current;
|
||||||
|
sessionUrlRef.current = null;
|
||||||
|
|
||||||
|
const pc = pcRef.current;
|
||||||
|
pcRef.current = null;
|
||||||
|
|
||||||
|
if (pc) {
|
||||||
|
try {
|
||||||
|
pc.ontrack = null;
|
||||||
|
pc.onconnectionstatechange = null;
|
||||||
|
pc.oniceconnectionstatechange = null;
|
||||||
|
pc.close();
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const v = videoRef.current;
|
||||||
|
if (v) {
|
||||||
|
try {
|
||||||
|
v.srcObject = null;
|
||||||
|
v.removeAttribute("src");
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (sessionUrl) {
|
||||||
|
try {
|
||||||
|
await fetch(sessionUrl, { method: "DELETE" });
|
||||||
|
} catch {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const restart = useCallback(() => {
|
||||||
|
setRestartNonce((n) => n + 1);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let disposed = false;
|
||||||
|
|
||||||
|
const run = async () => {
|
||||||
|
await stop();
|
||||||
|
if (!enabled) {
|
||||||
|
setStatus("idle");
|
||||||
|
setError(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus("connecting");
|
||||||
|
setError(null);
|
||||||
|
|
||||||
|
const abort = new AbortController();
|
||||||
|
abortRef.current = abort;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const videoEl = videoRef.current;
|
||||||
|
if (!videoEl) throw new Error("no_video");
|
||||||
|
|
||||||
|
const pc = new RTCPeerConnection();
|
||||||
|
pcRef.current = pc;
|
||||||
|
|
||||||
|
pc.addTransceiver("video", { direction: "recvonly" });
|
||||||
|
pc.addTransceiver("audio", { direction: "recvonly" });
|
||||||
|
|
||||||
|
pc.ontrack = (ev) => {
|
||||||
|
const stream = ev.streams?.[0];
|
||||||
|
if (!stream) return;
|
||||||
|
if (videoEl.srcObject !== stream) {
|
||||||
|
videoEl.srcObject = stream;
|
||||||
|
void videoEl.play().catch(() => undefined);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
pc.onconnectionstatechange = () => {
|
||||||
|
if (pc.connectionState === "failed") {
|
||||||
|
restart();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const offer = await pc.createOffer();
|
||||||
|
await pc.setLocalDescription(offer);
|
||||||
|
await waitForIceGatheringComplete(pc);
|
||||||
|
|
||||||
|
const sdpOffer = pc.localDescription?.sdp;
|
||||||
|
if (!sdpOffer) throw new Error("no_offer");
|
||||||
|
|
||||||
|
const res = await fetch(whepUrl, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/sdp",
|
||||||
|
Accept: "application/sdp",
|
||||||
|
},
|
||||||
|
body: sdpOffer,
|
||||||
|
signal: abort.signal,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const t = await res.text().catch(() => "");
|
||||||
|
throw new Error(`whep_http_${res.status}${t ? `: ${t}` : ""}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const answerSdp = await res.text();
|
||||||
|
const location = res.headers.get("location") || res.headers.get("Location");
|
||||||
|
if (location) sessionUrlRef.current = location;
|
||||||
|
|
||||||
|
await pc.setRemoteDescription({ type: "answer", sdp: answerSdp });
|
||||||
|
if (!disposed) setStatus("playing");
|
||||||
|
} catch (e) {
|
||||||
|
if (!disposed) {
|
||||||
|
setStatus("error");
|
||||||
|
setError(e instanceof Error ? e.message : "unknown_error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
run();
|
||||||
|
return () => {
|
||||||
|
disposed = true;
|
||||||
|
void stop();
|
||||||
|
};
|
||||||
|
}, [enabled, restartNonce, stop, whepUrl, restart]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
videoRef,
|
||||||
|
status,
|
||||||
|
error,
|
||||||
|
restart,
|
||||||
|
stop,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,14 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
import { clsx, type ClassValue } from "clsx"
|
||||||
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
|
export function cn(...inputs: ClassValue[]) {
|
||||||
|
return twMerge(clsx(inputs))
|
||||||
|
}
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
import { StrictMode } from 'react'
|
||||||
|
import { createRoot } from 'react-dom/client'
|
||||||
|
import App from './App'
|
||||||
|
import './index.css'
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>,
|
||||||
|
)
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
import { Navigate } from "react-router-dom";
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return <Navigate to="/live" replace />;
|
||||||
|
}
|
||||||
@@ -0,0 +1,86 @@
|
|||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import CameraTile from "@/components/CameraTile";
|
||||||
|
import { usePathsStatus } from "@/hooks/usePathsStatus";
|
||||||
|
import { useConfigStore } from "@/stores/configStore";
|
||||||
|
import { getMediamtxWebrtcBaseUrl } from "@/utils/api";
|
||||||
|
|
||||||
|
type Grid = 1 | 4 | 9;
|
||||||
|
|
||||||
|
export default function Live() {
|
||||||
|
const { config, isLoading, error, load } = useConfigStore();
|
||||||
|
const { readyByName } = usePathsStatus(5000);
|
||||||
|
const [grid, setGrid] = useState<Grid>(4);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!config) void load();
|
||||||
|
}, [config, load]);
|
||||||
|
|
||||||
|
const cams = useMemo(() => {
|
||||||
|
const list = config?.cameras ?? [];
|
||||||
|
return list.slice(0, grid);
|
||||||
|
}, [config, grid]);
|
||||||
|
|
||||||
|
const webrtcBaseUrl = useMemo(() => {
|
||||||
|
return getMediamtxWebrtcBaseUrl(config?.mediamtx_webrtc_url);
|
||||||
|
}, [config?.mediamtx_webrtc_url]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-semibold">Live View</div>
|
||||||
|
<div className="text-xs text-zinc-400">WebRTC grid (auto reconnect + lazy load)</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<label className="text-xs text-zinc-400">Grid</label>
|
||||||
|
<select
|
||||||
|
value={grid}
|
||||||
|
onChange={(e) => setGrid(Number(e.target.value) as Grid)}
|
||||||
|
className="h-9 rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
>
|
||||||
|
<option value={1}>1</option>
|
||||||
|
<option value={4}>4</option>
|
||||||
|
<option value={9}>9</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? (
|
||||||
|
<div className="rounded-lg border border-rose-900/60 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{isLoading && !config ? (
|
||||||
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-300">
|
||||||
|
Đang tải cấu hình...
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
{config && config.cameras.length === 0 ? (
|
||||||
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/30 px-4 py-3 text-sm text-zinc-300">
|
||||||
|
Chưa có camera. Thêm camera trong Settings.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div
|
||||||
|
className={[
|
||||||
|
"grid gap-3",
|
||||||
|
grid === 1 ? "grid-cols-1" : "grid-cols-1 md:grid-cols-2",
|
||||||
|
grid === 9 ? "lg:grid-cols-3" : "",
|
||||||
|
].join(" ")}
|
||||||
|
>
|
||||||
|
{cams.map((c) => (
|
||||||
|
<CameraTile
|
||||||
|
key={c.name}
|
||||||
|
name={c.name}
|
||||||
|
webrtcBaseUrl={webrtcBaseUrl}
|
||||||
|
isOnline={readyByName.get(c.name) ?? false}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,198 @@
|
|||||||
|
import { Download, Play } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import { useConfigStore } from "@/stores/configStore";
|
||||||
|
import { apiJson } from "@/utils/api";
|
||||||
|
import type { RecordingItem } from "@/types/api";
|
||||||
|
|
||||||
|
function toLocalDateInputValue(d: Date) {
|
||||||
|
const yyyy = d.getFullYear();
|
||||||
|
const mm = String(d.getMonth() + 1).padStart(2, "0");
|
||||||
|
const dd = String(d.getDate()).padStart(2, "0");
|
||||||
|
return `${yyyy}-${mm}-${dd}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function Playback() {
|
||||||
|
const { config, isLoading, error, load } = useConfigStore();
|
||||||
|
const [camera, setCamera] = useState<string>("");
|
||||||
|
const [date, setDate] = useState<string>(() => toLocalDateInputValue(new Date()));
|
||||||
|
const [items, setItems] = useState<RecordingItem[]>([]);
|
||||||
|
const [selected, setSelected] = useState<RecordingItem | null>(null);
|
||||||
|
const [listError, setListError] = useState<string | null>(null);
|
||||||
|
const [listLoading, setListLoading] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!config) void load();
|
||||||
|
}, [config, load]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const first = config?.cameras?.[0]?.name;
|
||||||
|
if (first && !camera) setCamera(first);
|
||||||
|
}, [config?.cameras, camera]);
|
||||||
|
|
||||||
|
const canQuery = useMemo(() => Boolean(camera), [camera]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let alive = true;
|
||||||
|
const run = async () => {
|
||||||
|
if (!canQuery) return;
|
||||||
|
setListLoading(true);
|
||||||
|
setListError(null);
|
||||||
|
try {
|
||||||
|
const q = new URLSearchParams();
|
||||||
|
q.set("camera", camera);
|
||||||
|
if (date) q.set("date", date);
|
||||||
|
const res = await apiJson<RecordingItem[]>(`/recordings?${q.toString()}`, {
|
||||||
|
method: "GET",
|
||||||
|
});
|
||||||
|
if (!alive) return;
|
||||||
|
setItems(res);
|
||||||
|
setSelected((prev) => {
|
||||||
|
if (prev && res.some((x) => x.filename === prev.filename)) return prev;
|
||||||
|
return res[0] ?? null;
|
||||||
|
});
|
||||||
|
} catch (e) {
|
||||||
|
if (!alive) return;
|
||||||
|
setItems([]);
|
||||||
|
setSelected(null);
|
||||||
|
if (typeof e === "object" && e && "status" in e) {
|
||||||
|
setListError(`http_${(e as { status: number }).status}`);
|
||||||
|
} else {
|
||||||
|
setListError("failed_to_load_recordings");
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (alive) setListLoading(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
void run();
|
||||||
|
return () => {
|
||||||
|
alive = false;
|
||||||
|
};
|
||||||
|
}, [camera, date, canQuery]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-semibold">Playback</div>
|
||||||
|
<div className="text-xs text-zinc-400">Chọn camera + ngày, phát file fMP4</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? (
|
||||||
|
<div className="rounded-lg border border-rose-900/60 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="grid gap-3 lg:grid-cols-[320px_1fr]">
|
||||||
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-3">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-zinc-400">Camera</label>
|
||||||
|
<select
|
||||||
|
value={camera}
|
||||||
|
onChange={(e) => setCamera(e.target.value)}
|
||||||
|
disabled={isLoading && !config}
|
||||||
|
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
>
|
||||||
|
{(config?.cameras ?? []).map((c) => (
|
||||||
|
<option key={c.name} value={c.name}>
|
||||||
|
{c.name}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-zinc-400">Date</label>
|
||||||
|
<input
|
||||||
|
type="date"
|
||||||
|
value={date}
|
||||||
|
onChange={(e) => setDate(e.target.value)}
|
||||||
|
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-4 border-t border-zinc-800 pt-3">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="text-xs font-medium text-zinc-200">Files</div>
|
||||||
|
<div className="text-xs text-zinc-400">
|
||||||
|
{listLoading ? "loading" : `${items.length}`}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{listError ? (
|
||||||
|
<div className="mt-2 text-xs text-rose-300">{listError}</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="mt-2 max-h-[420px] space-y-1 overflow-auto pr-1">
|
||||||
|
{items.map((it) => {
|
||||||
|
const dt = new Date(it.timestamp);
|
||||||
|
const t = dt.toLocaleTimeString();
|
||||||
|
const active = selected?.filename === it.filename;
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={it.filename}
|
||||||
|
className={[
|
||||||
|
"flex items-center justify-between gap-2 rounded-md border px-2 py-2",
|
||||||
|
active
|
||||||
|
? "border-zinc-700 bg-zinc-950/40"
|
||||||
|
: "border-zinc-800 bg-zinc-950/10 hover:bg-zinc-950/30",
|
||||||
|
].join(" ")}
|
||||||
|
>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="truncate text-xs text-zinc-100">{t}</div>
|
||||||
|
<div className="truncate text-[11px] text-zinc-500">{it.filename}</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex shrink-0 items-center gap-1">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => setSelected(it)}
|
||||||
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||||
|
title="Play"
|
||||||
|
>
|
||||||
|
<Play className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href={it.url}
|
||||||
|
download
|
||||||
|
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||||
|
title="Download"
|
||||||
|
>
|
||||||
|
<Download className="h-4 w-4" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
{!listLoading && items.length === 0 ? (
|
||||||
|
<div className="rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2 text-xs text-zinc-400">
|
||||||
|
Không có file.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-3">
|
||||||
|
<div className="text-xs font-medium text-zinc-200">Player</div>
|
||||||
|
<div className="mt-2 aspect-video w-full overflow-hidden rounded-md border border-zinc-800 bg-black">
|
||||||
|
{selected ? (
|
||||||
|
<video
|
||||||
|
key={selected.filename}
|
||||||
|
className="h-full w-full"
|
||||||
|
controls
|
||||||
|
playsInline
|
||||||
|
src={selected.url}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="flex h-full w-full items-center justify-center text-sm text-zinc-400">
|
||||||
|
Chọn 1 file để phát
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,204 @@
|
|||||||
|
import { Plus, Trash2 } from "lucide-react";
|
||||||
|
import { useEffect, useMemo, useState } from "react";
|
||||||
|
import type { FormEvent } from "react";
|
||||||
|
import { useConfigStore } from "@/stores/configStore";
|
||||||
|
|
||||||
|
export default function Settings() {
|
||||||
|
const {
|
||||||
|
config,
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
load,
|
||||||
|
addCamera,
|
||||||
|
deleteCamera,
|
||||||
|
setSchedulerEnabled,
|
||||||
|
updateSchedule,
|
||||||
|
} = useConfigStore();
|
||||||
|
|
||||||
|
const [name, setName] = useState("");
|
||||||
|
const [rtspUrl, setRtspUrl] = useState("");
|
||||||
|
const schedule = config?.schedule;
|
||||||
|
const [weekdaysFrom, setWeekdaysFrom] = useState("18:00");
|
||||||
|
const [weekdaysTo, setWeekdaysTo] = useState("08:00");
|
||||||
|
const [weekendAllDay, setWeekendAllDay] = useState(true);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!config) void load();
|
||||||
|
}, [config, load]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!schedule) return;
|
||||||
|
setWeekdaysFrom(schedule.weekdays_from);
|
||||||
|
setWeekdaysTo(schedule.weekdays_to);
|
||||||
|
setWeekendAllDay(schedule.weekend_all_day);
|
||||||
|
}, [schedule]);
|
||||||
|
|
||||||
|
const canAdd = useMemo(
|
||||||
|
() => name.trim().length > 0 && rtspUrl.trim().length > 0,
|
||||||
|
[name, rtspUrl]
|
||||||
|
);
|
||||||
|
|
||||||
|
const onAdd = async (e: FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (!canAdd) return;
|
||||||
|
await addCamera({ name: name.trim(), rtsp_url: rtspUrl.trim() });
|
||||||
|
setName("");
|
||||||
|
setRtspUrl("");
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSaveSchedule = async () => {
|
||||||
|
await updateSchedule({
|
||||||
|
weekdays_from: weekdaysFrom,
|
||||||
|
weekdays_to: weekdaysTo,
|
||||||
|
weekend_all_day: weekendAllDay,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<div className="text-sm font-semibold">Settings</div>
|
||||||
|
<div className="text-xs text-zinc-400">Camera management + recording schedule</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{error ? (
|
||||||
|
<div className="rounded-lg border border-rose-900/60 bg-rose-950/30 px-4 py-3 text-sm text-rose-200">
|
||||||
|
{error}
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
|
||||||
|
<div className="grid gap-3 lg:grid-cols-2">
|
||||||
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-4">
|
||||||
|
<div className="text-xs font-semibold text-zinc-200">Cameras</div>
|
||||||
|
<div className="mt-1 text-xs text-zinc-400">
|
||||||
|
Đồng bộ paths lên MediaMTX thông qua Control API
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-3 space-y-2">
|
||||||
|
{(config?.cameras ?? []).map((c) => (
|
||||||
|
<div
|
||||||
|
key={c.name}
|
||||||
|
className="flex items-center justify-between gap-3 rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2"
|
||||||
|
>
|
||||||
|
<div className="min-w-0">
|
||||||
|
<div className="truncate text-sm text-zinc-100">{c.name}</div>
|
||||||
|
<div className="truncate text-xs text-zinc-500">{c.rtsp_url}</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => void deleteCamera(c.name)}
|
||||||
|
className="inline-flex h-9 w-9 items-center justify-center rounded-md border border-zinc-700 bg-zinc-950/40 text-zinc-200 transition hover:bg-zinc-900"
|
||||||
|
title="Remove"
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
{(config?.cameras ?? []).length === 0 ? (
|
||||||
|
<div className="rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2 text-xs text-zinc-400">
|
||||||
|
Chưa có camera.
|
||||||
|
</div>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={(e) => void onAdd(e)} className="mt-4 space-y-2">
|
||||||
|
<div className="grid gap-2 md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-zinc-400">Name</label>
|
||||||
|
<input
|
||||||
|
value={name}
|
||||||
|
onChange={(e) => setName(e.target.value)}
|
||||||
|
placeholder="cam1"
|
||||||
|
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-zinc-400">RTSP URL</label>
|
||||||
|
<input
|
||||||
|
value={rtspUrl}
|
||||||
|
onChange={(e) => setRtspUrl(e.target.value)}
|
||||||
|
placeholder="rtsp://user:pass@ip:554/stream"
|
||||||
|
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={!canAdd || isLoading}
|
||||||
|
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-950/40 px-3 py-2 text-sm text-zinc-200 transition hover:bg-zinc-900 disabled:cursor-not-allowed disabled:opacity-60"
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4" />
|
||||||
|
Add Camera
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="rounded-lg border border-zinc-800 bg-zinc-900/20 p-4">
|
||||||
|
<div className="text-xs font-semibold text-zinc-200">Recording Schedule</div>
|
||||||
|
<div className="mt-1 text-xs text-zinc-400">Backend sẽ bật/tắt record mỗi 60 giây</div>
|
||||||
|
|
||||||
|
<div className="mt-4 space-y-3">
|
||||||
|
<label className="flex items-center gap-2 text-sm text-zinc-200">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={Boolean(schedule?.enabled)}
|
||||||
|
onChange={(e) => void setSchedulerEnabled(e.target.checked)}
|
||||||
|
className="h-4 w-4 rounded border-zinc-700 bg-zinc-950"
|
||||||
|
/>
|
||||||
|
Enable scheduler
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div className="grid gap-2 md:grid-cols-2">
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-zinc-400">Weekdays from</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
value={weekdaysFrom}
|
||||||
|
onChange={(e) => setWeekdaysFrom(e.target.value)}
|
||||||
|
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="text-xs text-zinc-400">Weekdays to</label>
|
||||||
|
<input
|
||||||
|
type="time"
|
||||||
|
value={weekdaysTo}
|
||||||
|
onChange={(e) => setWeekdaysTo(e.target.value)}
|
||||||
|
className="mt-1 h-9 w-full rounded-md border border-zinc-800 bg-zinc-950 px-3 text-sm text-zinc-100"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label className="flex items-center gap-2 text-sm text-zinc-200">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={weekendAllDay}
|
||||||
|
onChange={(e) => setWeekendAllDay(e.target.checked)}
|
||||||
|
className="h-4 w-4 rounded border-zinc-700 bg-zinc-950"
|
||||||
|
/>
|
||||||
|
Weekend: record all day
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => void onSaveSchedule()}
|
||||||
|
disabled={isLoading}
|
||||||
|
className="inline-flex items-center gap-2 rounded-md border border-zinc-700 bg-zinc-950/40 px-3 py-2 text-sm text-zinc-200 transition hover:bg-zinc-900 disabled:cursor-not-allowed disabled:opacity-60"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<div className="rounded-md border border-zinc-800 bg-zinc-950/10 px-3 py-2 text-xs text-zinc-400">
|
||||||
|
MediaMTX API: <span className="text-zinc-200">{config?.mediamtx_api_url ?? "-"}</span>
|
||||||
|
<br />
|
||||||
|
WebRTC: <span className="text-zinc-200">{config?.mediamtx_webrtc_url ?? "-"}</span>
|
||||||
|
<br />
|
||||||
|
Recordings dir: <span className="text-zinc-200">{config?.recordings_dir ?? "-"}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -0,0 +1,89 @@
|
|||||||
|
import { create } from "zustand";
|
||||||
|
import { apiJson } from "@/utils/api";
|
||||||
|
import type { AppConfig, Camera, Schedule } from "@/types/api";
|
||||||
|
|
||||||
|
type ConfigState = {
|
||||||
|
config: AppConfig | null;
|
||||||
|
isLoading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
load: () => Promise<void>;
|
||||||
|
addCamera: (camera: Camera) => Promise<void>;
|
||||||
|
deleteCamera: (name: string) => Promise<void>;
|
||||||
|
setSchedulerEnabled: (enabled: boolean) => Promise<void>;
|
||||||
|
updateSchedule: (schedule: Omit<Schedule, "enabled">) => Promise<void>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function errToMessage(err: unknown) {
|
||||||
|
if (!err) return "unknown_error";
|
||||||
|
if (typeof err === "string") return err;
|
||||||
|
if (typeof err === "object" && err && "status" in err) {
|
||||||
|
const e = err as { status: number; bodyText?: string };
|
||||||
|
return `http_${e.status}${e.bodyText ? `: ${e.bodyText}` : ""}`;
|
||||||
|
}
|
||||||
|
return "unknown_error";
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useConfigStore = create<ConfigState>((set, get) => ({
|
||||||
|
config: null,
|
||||||
|
isLoading: false,
|
||||||
|
error: null,
|
||||||
|
load: async () => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const cfg = await apiJson<AppConfig>("/config", { method: "GET" });
|
||||||
|
set({ config: cfg, isLoading: false });
|
||||||
|
} catch (e) {
|
||||||
|
set({ isLoading: false, error: errToMessage(e) });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addCamera: async (camera) => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const cfg = await apiJson<AppConfig>("/cameras", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(camera),
|
||||||
|
});
|
||||||
|
set({ config: cfg, isLoading: false });
|
||||||
|
} catch (e) {
|
||||||
|
set({ isLoading: false, error: errToMessage(e) });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
deleteCamera: async (name) => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const cfg = await apiJson<AppConfig>(`/cameras/${encodeURIComponent(name)}`, {
|
||||||
|
method: "DELETE",
|
||||||
|
});
|
||||||
|
set({ config: cfg, isLoading: false });
|
||||||
|
} catch (e) {
|
||||||
|
set({ isLoading: false, error: errToMessage(e) });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setSchedulerEnabled: async (enabled) => {
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const cfg = await apiJson<AppConfig>("/scheduler/enabled", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify({ enabled }),
|
||||||
|
});
|
||||||
|
set({ config: cfg, isLoading: false });
|
||||||
|
} catch (e) {
|
||||||
|
set({ isLoading: false, error: errToMessage(e) });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updateSchedule: async (schedule) => {
|
||||||
|
const cfg = get().config;
|
||||||
|
const enabled = cfg?.schedule.enabled ?? true;
|
||||||
|
set({ isLoading: true, error: null });
|
||||||
|
try {
|
||||||
|
const next = await apiJson<AppConfig>("/scheduler/schedule", {
|
||||||
|
method: "POST",
|
||||||
|
body: JSON.stringify(schedule),
|
||||||
|
});
|
||||||
|
set({ config: { ...next, schedule: { ...next.schedule, enabled } }, isLoading: false });
|
||||||
|
} catch (e) {
|
||||||
|
set({ isLoading: false, error: errToMessage(e) });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}));
|
||||||
|
|
||||||
@@ -0,0 +1,2 @@
|
|||||||
|
import "@testing-library/jest-dom";
|
||||||
|
|
||||||
@@ -0,0 +1,38 @@
|
|||||||
|
export type Camera = {
|
||||||
|
name: string;
|
||||||
|
rtsp_url: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Schedule = {
|
||||||
|
enabled: boolean;
|
||||||
|
weekdays_from: string;
|
||||||
|
weekdays_to: string;
|
||||||
|
weekend_all_day: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type AppConfig = {
|
||||||
|
mediamtx_api_url: string;
|
||||||
|
mediamtx_webrtc_url: string;
|
||||||
|
recordings_dir: string;
|
||||||
|
cameras: Camera[];
|
||||||
|
schedule: Schedule;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type RecordingItem = {
|
||||||
|
camera: string;
|
||||||
|
filename: string;
|
||||||
|
timestamp: string;
|
||||||
|
url: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type MediaMtxPathsListItem = {
|
||||||
|
name: string;
|
||||||
|
ready?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type MediaMtxPathsListResponse = {
|
||||||
|
items?: MediaMtxPathsListItem[];
|
||||||
|
itemCount?: number;
|
||||||
|
pageCount?: number;
|
||||||
|
};
|
||||||
|
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
type ApiError = {
|
||||||
|
status: number;
|
||||||
|
bodyText: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
function buildUrl(path: string) {
|
||||||
|
const base = (import.meta.env.VITE_API_BASE_URL as string | undefined) ?? "/api";
|
||||||
|
if (path.startsWith("http://") || path.startsWith("https://")) return path;
|
||||||
|
if (path.startsWith("/")) return `${base}${path}`;
|
||||||
|
return `${base}/${path}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function apiJson<T>(path: string, init?: RequestInit): Promise<T> {
|
||||||
|
const url = buildUrl(path);
|
||||||
|
const res = await fetch(url, {
|
||||||
|
...init,
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
...(init?.headers ?? {}),
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!res.ok) {
|
||||||
|
const bodyText = await res.text().catch(() => "");
|
||||||
|
const err: ApiError = { status: res.status, bodyText };
|
||||||
|
throw err;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (await res.json()) as T;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getMediamtxWebrtcBaseUrl(configUrl?: string) {
|
||||||
|
const env = import.meta.env.VITE_MEDIAMTX_WEBRTC_URL as string | undefined;
|
||||||
|
return env ?? configUrl ?? "http://localhost:8889";
|
||||||
|
}
|
||||||
|
|
||||||
Vendored
+1
@@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
|
||||||
|
export default {
|
||||||
|
darkMode: "class",
|
||||||
|
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
|
||||||
|
theme: {
|
||||||
|
container: {
|
||||||
|
center: true,
|
||||||
|
},
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
};
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": [
|
||||||
|
"ES2020",
|
||||||
|
"DOM",
|
||||||
|
"DOM.Iterable"
|
||||||
|
],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"verbatimModuleSyntax": false,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"strict": false,
|
||||||
|
"noUnusedLocals": false,
|
||||||
|
"noUnusedParameters": false,
|
||||||
|
"noFallthroughCasesInSwitch": false,
|
||||||
|
"noUncheckedSideEffectImports": false,
|
||||||
|
"forceConsistentCasingInFileNames": false,
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"./src/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src",
|
||||||
|
"api"
|
||||||
|
]
|
||||||
|
}
|
||||||
@@ -0,0 +1,40 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import react from '@vitejs/plugin-react'
|
||||||
|
import tsconfigPaths from "vite-tsconfig-paths";
|
||||||
|
import { traeBadgePlugin } from 'vite-plugin-trae-solo-badge';
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
server: {
|
||||||
|
proxy: {
|
||||||
|
"/api": "http://localhost:8000",
|
||||||
|
"/videos": "http://localhost:8000",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
sourcemap: 'hidden',
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
react({
|
||||||
|
babel: {
|
||||||
|
plugins: [
|
||||||
|
'react-dev-locator',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
traeBadgePlugin({
|
||||||
|
variant: 'dark',
|
||||||
|
position: 'bottom-right',
|
||||||
|
prodOnly: true,
|
||||||
|
clickable: true,
|
||||||
|
clickUrl: 'https://www.trae.ai/solo?showJoin=1',
|
||||||
|
autoTheme: true,
|
||||||
|
autoThemeTarget: '#root'
|
||||||
|
}),
|
||||||
|
tsconfigPaths()
|
||||||
|
],
|
||||||
|
test: {
|
||||||
|
environment: "jsdom",
|
||||||
|
setupFiles: ["./src/test/setup.ts"],
|
||||||
|
},
|
||||||
|
})
|
||||||
Reference in New Issue
Block a user