Web Dashboard Architecture & Technology Stack
RUSEON Core features a built-in Single Page Application (SPA) embedded directly into the Go server binary using go:embed. It is accessible instantly in any web browser at http://localhost:8080/ with zero client-side installation.
1. Technology Stack
- Framework: React 19, TypeScript, and Vite for fast client rendering.
- Visual Design: Dark-theme glassmorphism UI with responsive CSS Grid layouts and backdrop filters.
- Iconography:
lucide-react. - Internationalization: Full dual-language localization (
react-i18next) for English (en) and Russian (ru). - Video Engine:
- Live Viewing: Low-latency WebRTC WHEP via browser
RTCPeerConnectionwith automatic fallback to HLS (hls.js). - AI Metadata Overlay: Synchronized HTML5 Canvas 60 FPS rendering of bounding boxes from WebRTC DataChannels.
- Archive Player: High-resolution timeline with visual recorded segment intervals and fast clip clipping.
- Live Viewing: Low-latency WebRTC WHEP via browser
2. Web UI Feature Directory
| View / Module | Key Capabilities | Guide Link |
|---|---|---|
| Dashboard & Video Grid | Multi-camera video walls (1x1, 2x2, 3x3, 4x4), folder tree, tag filtering | Dashboard Guide |
| Live Stream Player | Sub-500ms WebRTC playback, PTZ controls, AI detection overlay | Live Player Guide |
| Archive & Timeline Player | Interactive timeline scrubber, calendar date picker, MP4 clip export | Archive Player Guide |
| Camera Administration | Add, edit, delete cameras, RTSP probe test, folder assignment | Cameras UI Guide |
| System Settings & Diagnostics | Real-time memory graphs, SSE live logs, BadgerDB backups | Settings Guide |
| Authentication & Login | Secure JWT login, session storage, password reset modal | Login Guide |