2026-04-28 11:05:42 +07:00
2026-04-26 21:27:00 +07:00
2026-04-28 11:05:42 +07:00
2026-04-26 21:27:00 +07:00
2026-04-28 11:05:42 +07:00
2026-04-28 10:18:44 +07:00
2026-04-26 21:27:00 +07:00
2026-04-26 21:27:00 +07:00
2026-04-28 11:05:42 +07:00
2026-04-27 22:13:43 +07:00
2026-04-26 21:27:00 +07:00
2026-04-26 21:27:00 +07:00
2026-04-27 22:13:43 +07:00
2026-04-26 21:27:00 +07:00
2026-04-26 21:27:00 +07:00
2026-04-26 21:27:00 +07:00
2026-04-28 11:05:42 +07:00
2026-04-26 21:27:00 +07:00
2026-04-26 21:27:00 +07:00
2026-04-27 22:13:43 +07:00

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

python3 -m venv api/.venv
source api/.venv/bin/activate
pip install -r api/requirements.txt
python3 -m api.run

2) Chạy frontend

npm install
npm run dev

Frontend dev server đã được cấu hình proxy /api/videos sang http://localhost:8008.

Cấu hình

Backend chỉ dùng file api/data/config.json (không đọc .env).

  • mediamtx_api_url: ví dụ http://127.0.0.1:9997
  • mediamtx_webrtc_url: ví dụ http://127.0.0.1:8889
  • mediamtx_api_user: username API (nếu bật auth trong MediaMTX)
  • mediamtx_api_pass: password API (nếu bật auth trong MediaMTX)
  • recordings_dir: ví dụ ./mediamtx/recordings (cùng máy) hoặc đường dẫn mount NFS/SMB
  • api_port: cổng chạy backend (mặc định 8008)
  • cameras: danh sách camera (name + rtsp_url)
  • schedule: lịch ghi hình

Ví dụ config.json:

{
  "mediamtx_api_url": "http://127.0.0.1:9997",
  "mediamtx_webrtc_url": "http://127.0.0.1:8889",
  "mediamtx_api_user": null,
  "mediamtx_api_pass": null,
  "recordings_dir": "/mnt/ssd/IPCam_OrangePi_Dashboard/mediamtx/recordings",
  "api_port": 8008,
  "cameras": [],
  "schedule": {
    "enabled": true,
    "weekdays_from": "18:00",
    "weekdays_to": "08:00",
    "weekend_all_day": true
  }
}

Chạy tách 2 thiết bị (cùng LAN)

  • Máy A (MediaMTX + ổ lưu recordings): chạy MediaMTX, mở cổng 9997/tcp, 8889/tcp, 8189/udp, 8554/tcp
  • Máy B (Dashboard backend + frontend): chạy FastAPI + serve web UI
  • Playback: máy B cần đọc được thư mục recordings của máy A (khuyến nghị mount NFS/SMB và set recordings_dir trong api/data/config.json)

Chi tiết xem INSTALL.md.

Triển khai

Xem hướng dẫn chi tiết trong INSTALL.md.

S
Description
Phần mềm ghi và xem camera sử dụng Orange Pi làm máy chủ, hoàn toàn local
Readme 4.5 MiB
Languages
TypeScript 65.3%
Python 29.9%
CSS 2.1%
JavaScript 1.5%
HTML 0.8%
Other 0.4%