frigate/web
3ricj e7684eddbf Added substream support, dynamic substream creation, and playback methods for
This change adds first-class adaptive recording playback using main and sub recording variants. Frigate can now store multiple recording variants per camera, expose those variants through the recordings API, and serve variant-specific VOD playlists through routes such as /vod/variant/sub/....

The UI now uses the available recording variants and browser playback capability to choose an appropriate playback source, with a user-selectable Auto, Main, and Sub preference. This is applied across timeline playback, export preview, and object detail playback.

The backend also includes a fallback path for sub playback: when a native sub recording is not available for a requested time range, Frigate can generate a lower-resolution sub recording from the main segment, store it under the standard sub variant, and mark it with transcoded_from_main.

Additional changes include recording metadata for codec, resolution, bitrate, and variant; database migrations for recording variants and generated-sub tracking; tests for variant VOD selection and fallback behavior; improved storage graph sorting; and a small MQTT TLS guard so tls_insecure is only applied when TLS is configured.

Substream Configuration Examples
Record the main stream as the normal full-resolution recording and also record the camera substream as the sub variant:

cameras:
  front_door:
    ffmpeg:
      inputs:
        - path: rtsp://user:password@192.168.1.10:554/main
          roles:
            - record
          record_variant: main
        - path: rtsp://user:password@192.168.1.10:554/sub
          roles:
            - detect
            - record
          record_variant: sub
    detect:
      width: 640
      height: 360
      fps: 5
    record:
      enabled: true
Using go2rtc restreams:

go2rtc:
  streams:
    front_door:
      - rtsp://user:password@192.168.1.10:554/main
    front_door_sub:
      - rtsp://user:password@192.168.1.10:554/sub
cameras:
  front_door:
    ffmpeg:
      inputs:
        - path: rtsp://127.0.0.1:8554/front_door
          input_args: preset-rtsp-restream
          roles:
            - record
          record_variant: main
        - path: rtsp://127.0.0.1:8554/front_door_sub
          input_args: preset-rtsp-restream
          roles:
            - detect
            - record
          record_variant: sub
    detect:
      width: 640
      height: 360
      fps: 5
    record:
      enabled: true
If record_variant is omitted on a record input, it defaults to main. Each camera can only use a given recording variant once, so the main and sub recording inputs should use distinct variant names.
2026-04-29 19:05:59 -07:00
..
.vscode Update web readme (#12062) 2024-06-19 08:11:51 -06:00
images llc to inc and 2025 to 2026 (#21484) 2026-01-01 09:56:09 -06:00
patches Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386) 2026-03-11 09:02:51 -05:00
public Added substream support, dynamic substream creation, and playback methods for 2026-04-29 19:05:59 -07:00
src Added substream support, dynamic substream creation, and playback methods for 2026-04-29 19:05:59 -07:00
themes Detail Stream tweaks (#20533) 2025-10-16 14:15:23 -06:00
.eslintrc.cjs Auth! (#11347) 2024-05-18 10:36:13 -06:00
.gitignore chore: i18n use cache key (#20885) 2025-11-14 09:36:46 -06:00
.prettierrc Use prettier-plugin-tailwindcss (#11373) 2024-05-14 09:06:44 -06:00
components.json Add shadcn sidebar component (#20292) 2025-09-30 15:02:35 -06:00
index.html clarify trademark and license interaction (#21019) 2025-11-23 08:42:48 -07:00
login.html clarify trademark and license interaction (#21019) 2025-11-23 08:42:48 -07:00
package-lock.json Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386) 2026-03-11 09:02:51 -05:00
package.json Replace react-tracked and react-use-websocket with useSyncExternalStore (#22386) 2026-03-11 09:02:51 -05:00
postcss.config.js Fix linter and fix lint issues (#10141) 2024-02-28 16:23:56 -06:00
README.md Update web readme (#12062) 2024-06-19 08:11:51 -06:00
site.webmanifest Update webmanifest to use /BASE_PATH/ (#17310) 2025-03-23 05:34:33 -06:00
tailwind.config.cjs Full UI configuration (#22151) 2026-02-27 08:55:36 -07:00
tsconfig.json Use new UI (#8983) 2024-01-31 12:56:11 +00:00
tsconfig.node.json Use new UI (#8983) 2024-01-31 12:56:11 +00:00
vite.config.ts Full UI configuration (#22151) 2026-02-27 08:55:36 -07:00

This is the Frigate frontend which connects to and provides a User Interface to the Python backend.

Web Development

Installing Web Dependencies Via NPM

Within /web, run:

npm install

Running development frontend

Within /web, run:

PROXY_HOST=<ip_address:port> npm run dev

The Proxy Host can point to your existing Frigate instance. Otherwise defaults to localhost:5000 if running Frigate on the same machine.

Extensions

Install these IDE extensions for an improved development experience:

  • eslint