frigate/web
Faberto 96360a08d5 Add on-demand H.265 to H.264 transcoded HLS playback
When a browser lacks native HEVC/H.265 support, the frontend now
requests a server-side transcoded HLS stream instead of the original
VOD path. FFmpeg consumes Frigate's existing HLS endpoint and outputs
H.264 MPEG-TS segments to /tmp/stream/transcode/, which nginx already
serves via the /stream/ location.

- New API endpoint: GET /api/transcode/{camera}/start/{ts}/end/{ts}
  - Spawns FFmpeg to transcode existing H.265 HLS to H.264 HLS
  - Deduplicates sessions by camera + time range
  - Limits concurrent transcodes (default 3)
  - Waits for first segment before returning playlist URL
- Cleanup: stale transcode sessions removed every 60s (10min TTL)
- Frontend: isHevcSupported() detects browser codec support via MSE
  and native video element, transparently falls back to transcoded
  playback in DynamicVideoPlayer and TrackingDetails
- Zero changes to existing HLS/VOD path or clip download endpoint

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-22 17:24:30 +01: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 Fix splintered language keys (#22550) 2026-03-20 10:02:34 -05:00
src Add on-demand H.265 to H.264 transcoded HLS playback 2026-03-22 17:24:30 +01: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