yuragb/front_cam_detect

Purpose and Entry Points

cam_frontend is a browser frontend for live camera monitoring. It negotiates WebRTC with a C++ camera service through a Bun signaling server, renders H264 tracks, overlays YOLO detections, and shows latency/pipeline metrics. The client bootstraps through TanStack Start routing in src/router.tsx, generated route definitions in src/routeTree.gen.ts, and root layout/provider composition in src/routes/__root.tsx.

Routing, Access, and Shell

Public routes include the home page and auth API; authenticated application pages are grouped under a protected route layout. Route-level protection and session retrieval form the boundary before dashboard, profile, address, and video pages render.

• src/routes/(protected)/route.tsx

• src/routes/(protected)/video_stream/index.tsx

• src/lib/authBeforeLoad.ts

The reusable application shell combines header, sidebar, locale/theme controls, and responsive UI components.

• src/components/Header/Header.tsx

• src/modules/Sidebar/index.tsx

• src/components/SidebarWrapper.tsx

Authentication and Persistence

Better Auth serves through a catch-all API route and a server-side auth module. Auth configuration integrates with Drizzle-backed user/session schema and synchronization logic; the browser uses a dedicated Better Auth client and session hooks.

• src/routes/api/auth/$.ts

• src/server/modules/Auth/auth.ts

• src/server/modules/db/schema/auth.ts

Database initialization is centralized in Drizzle, with migrations applied through a server plugin.

• src/server/modules/db/drizzle/index.ts

• src/server/plugins/migrations/index.ts

• drizzle/0000_motionless_mandarin.sql

WebRTC Signaling and Session Control

The VideoStream module opens one WebSocket to the Bun signaling server, registers a frontend peer identity, joins the C++ camera peer, and exchanges SDP offers/answers plus ICE candidates. PeerConnection lifecycle, stream association, and signaling message handling are separated into hooks and connection utilities.

• src/modules/VideoStream/hooks/useWebsocket.ts

• src/modules/VideoStream/hooks/usePc.ts

• src/modules/VideoStream/lib/websocketConnection.ts

This is the primary external integration boundary: browser WebSocket signaling versus browser-native WebRTC media/DataChannel transport to the C++ camera service.

Stream Rendering and Detection Overlay

Received video tracks are managed per camera and rendered as native <video> media, with an adjacent canvas overlay. Track-map messages connect WebRTC media IDs to camera IDs; detection frames are parsed, retained, and painted without rebinding media srcObject.

• src/modules/VideoStream/hooks/useStreams.ts

• src/modules/VideoStream/components/CameraStreamView.tsx

• src/modules/VideoStream/lib/detections.ts

src/modules/VideoStream/index.tsx composes stream access, peer connection, detection, metric, and view state into the live-monitoring page.

Telemetry Pipeline

The C++ service sends detection, track-map, video-latency, and pipeline-metric payloads over the detectionStream DataChannel. Parsing routes payload types into specialized state. Latency uses service capture timestamps plus requestVideoFrameCallback() render timing, while pipeline metrics expose capture, encoding, inference, and dropped-frame health separately.

• src/modules/VideoStream/hooks/useVideoLatencyMetrics.ts

• src/modules/VideoStream/hooks/usePipelineMetrics.ts

• src/modules/VideoStream/components/PipelineMetricsPanel.tsx

Runtime and Deployment

The runtime is React with TanStack Start/Router, TanStack Query, Tailwind-based UI, Paraglide localization, Better Auth, and Drizzle. Health/readiness endpoints support orchestration.

• src/routes/(probes)/health.ts

• src/routes/(probes)/ready.ts

• src/integrations/tanstack-query/root-provider.tsx

Container deployment targets k3s with namespace, ConfigMap/secrets, persistent volume, Deployment, Service, and ingress manifests.

• Dockerfile

• k3s/frontend-app-deployment.yaml

• k3s/ingress.yaml