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 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.

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.