frigate/web
Louis Sautier 66fefe5513
Temporarily mute WebRTC video at start to fix autoplay on mic toggle
Fixes 2-way audio on the Home Assistant Android companion app: toggling
the microphone causes the video feed to go black while audio continues
working.

When the mic is toggled, the player switches from MSE to WebRTC, which
creates a new PeerConnection and video stream. By the time the async
WebRTC setup completes, the user gesture from the mic button click has
expired under Android WebView's transient activation model, causing
unmuted autoplay to be blocked.

Fix this by introducing an `awaitingPlayback` state that forces the
video element to start muted (muted autoplay is always allowed). Once
the `playing` event fires, the flag is cleared and the muted prop falls
back to the normal `!audioEnabled` logic, preserving audio toggle
functionality.

Closes https://github.com/blakeblackshear/frigate-hass-addons/issues/274
2026-03-16 22:29:15 +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 Update frontend to React 19 (#22275) 2026-03-05 07:42:38 -07:00
public Update translation files 2026-03-09 18:25:17 -06:00
src Temporarily mute WebRTC video at start to fix autoplay on mic toggle 2026-03-16 22:29:15 +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 Improve motion review and add motion search (#22253) 2026-03-05 17:53:48 -06:00
package.json Improve motion review and add motion search (#22253) 2026-03-05 17:53:48 -06: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