MJPEG camera streams hang after 30 seconds in Firefox

[henryptung]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

The camera live stream in the HA frontend uses an <img> tag with a multipart/x-mixed-replace stream. This works fine for the first 30 seconds, but after that, an error like below is sent to (JS) console and the stream hangs.

Looking at the Application tab of FF dev tools, this also seems to be when FF hits (idle?) timeout for the service worker and terminates it. As far as I can tell, the <img> request is being intercepted/handled by the service worker routing using Workbox. Possibly since worker timeout behavior differs between FF and Chrome, the worker will be killed after 30s, at which point the error below is output and the stream stops updating.

Describe the behavior you expected

The camera stream should not hang after 30s (or whenever the service worker times out/is killed). Since the camera preview is an ongoing stream that sends data indefinitely without DOM changes or user activity, maybe it shouldn't be intercepted by a service worker (which can be killed at any time)? Or, the frontend should do whatever is needed to keep the worker alive for the duration of the stream (i.e. as long as it stays open).

AFAICT, postMessage is a way to send a regular "keepalive" to the service worker to avoid idle-timeout. Maybe that could be tied to the HaCameraStream element lifetime?

Steps to reproduce the issue

1. Have a camera entity backed by an MJPEG stream
2. Add a picture entity card in the view, linked to this camera entity with Live view
3. Load this view in Firefox, wait for camera stream to start
4. Wait for 30 seconds

What version of Home Assistant Core has the issue?

core: 2025.9.4 (frontend: 20250903.5)

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue?

Mozilla Firefox 143.0.3

Which operating system are you using to run this browser?

Windows 10

State of relevant entities

access_token: <token>
entity_picture: /api/camera_proxy/camera.my_camera?token=<token>
friendly_name: My Camera
supported_features: 0

Problem-relevant frontend configuration

type: sections
max_columns: 4
title: test
path: test
sections:
  - type: grid
    cards:
      - show_state: true
        show_name: true
        camera_view: live
        fit_mode: cover
        type: picture-entity
        camera_image: camera.my_camera
        grid_options:
          columns: full
          rows: 8
        visibility: []
        entity: camera.my_camera
    column_span: 3
cards: []

JavaScript errors shown in your browser console/inspector

Failed to load ‘https://<hostname>/api/camera_proxy_stream/camera.my_camera?token=<token>’. A ServiceWorker intercepted the request and encountered an unexpected error.

Additional information

No response