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 HTTP Basic Auth is configured in [web], the browser will prompt for credentials.

Views

Day list (/days)

Lists all days that have at least one archived clip, newest first. Click a day to open the day view.

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

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 albums

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.

A separate day-level album (/days/YYYY-MM-DD/snapshots) shows every snapshot for the whole day across all channels. It is linked from the hour navigation sidebar on the day view.

Both albums share the same carousel interface: prev/next navigation, an image counter (N / total), and a label showing the camera channel and timestamp of the current image.

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 a navigation link. The header remains visible while scrolling.

Video playback

Transcoded MP4 files are served directly by FastAPI's static file handler, which supports HTTP Range requests. This allows the browser <video> element to seek to any position without downloading the whole file.

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