Skip to content

Web UI

Cang serves a browser-based UI for browsing, playing, and managing archived camera clips.

Accessing the UI

Open http://<host>:<port>/days in a browser (default: http://localhost:8080/days).

If authentication is configured in [web], navigating to any page will redirect to a login form at /login. Enter your username and password — the form works with password managers. A Log out link appears in the header while you are logged in.

Views

Home calendar (/days)

A live snapshot strip sits at the top of the page — one card per camera showing its most recent snapshot, refreshed automatically every 30 seconds. Cameras without any snapshots yet display a placeholder with the camera name. The strip uses a responsive grid: two cards fill the screen width, three cards cap at one third each, and additional cameras wrap to a second row.

Below the strip, a two-month calendar grid (the previous month on the left, the current month on the right). Each day that has recorded footage shows the number of motion events and the total snapshot count, and links to the day view. Days without footage show only the date number. Use the ◀ / ▶ buttons to navigate to earlier or later months.

Motion events are detected independently per camera — simultaneous motion on two cameras counts as two events.

On narrow screens the two months stack vertically.

Day view (/days/YYYY-MM-DD)

The page heading shows the day of the week alongside the date — for example Thursday · 2026-07-11.

Shows all completed clips for the selected day, grouped by hour. Clips that are still being transcoded are excluded from the grid and counted in a banner instead (see below).

Each clip tile displays:

  • Trigger badges (when applicable):
  • Motion (yellow) — the clip was triggered by motion detection ([M] flag in the original filename).
  • First frame (blue) — the clip is the first in a new recording sequence ([F] flag).
  • The clip filename
  • An inline <video> player (click to play; seeks to any position). If a snapshot was captured at the same time as the clip, it is used as the poster image — a still preview shown before playback starts.
  • A Snapshots link (shown only when at least one snapshot exists for that clip) — opens the per-clip snapshot album.
  • A Keep / Unkeep button

Clips load lazily (preload="none") so the page is fast even with many tiles.

The clip grid is responsive: tiles are at least 260 px wide and fill as many columns as the screen allows, with no fixed column cap.

Processing banner

When one or more clips for the day are still being converted, an amber banner appears at the top of the day view:

N clip(s) still being converted — refresh to see them when ready.

Once all clips are transcoded the banner disappears. Clips that fail to transcode remain in the pending state and are not shown until re-processed.

Snapshot scrubber

The day-level snapshot view (/days/YYYY-MM-DD/snapshots) provides a per-camera browsing interface for reviewing large numbers of still images:

  • Camera selector — switch between configured cameras without leaving the page. Defaults to the first camera alphabetically.
  • Time scrubber — a slider representing the full day. Each tick is a snapshot; dragging shows the image for the closest timestamp. Tiny dots above the track show snapshot density at a glance.
  • Filmstrip — 10 adjacent thumbnails below the main image provide spatial context. Click any thumbnail to jump to that frame.
  • Play/Pause — auto-advance through snapshots. Speed selector offers 1×, 2×, 5×, and 10× playback rates.
  • Keyboard shortcuts — Left/Right arrows step frame by frame, Space toggles play/pause, Home/End jump to first/last snapshot.

Per-clip snapshot album

The Snapshots link on a clip tile opens a snapshot album filtered to that clip's time window — only the still images captured during that specific event are shown. This view uses the original carousel interface (prev/next/pause) since per-clip snapshot counts are typically small.

Keep toggle

Clicking Keep on a clip marks it as retained — the nightly retention job will not remove it. Click Unkeep to remove the mark.

The toggle is powered by HTMX and updates in place without a full page reload. HTMX is vendored in src/cang/web/static/ and served locally — no internet connection required.

A sticky header is shown at the top of every page. It displays the Cang icon, the application name, a short tagline, and navigation links — All days returns to the home calendar, and Log out ends the current session (only shown when authentication is enabled). The header remains visible while scrolling.

Video playback

Transcoded MP4 files are served through an authenticated route that supports HTTP Range requests. This allows the browser <video> element to seek to any position without downloading the whole file. The route requires an active session — direct links to video files are not accessible without logging in (when authentication is configured).

Clips start muted by default. Use the volume control in the player to unmute and adjust the audio level.