Mjpeg Camera Images / Streams Distorted in browser Frontend & App

[Bit-River]

The problem

MJPEG Camera images appear normally at first, then without apparent pattern distort to a square or 4:3 shape. They stay that way until the tab / app is refreshed or restarted, eventually the distortions happen again.

As a result the rest of the ui is out of shape, with parts of it now off-screen.

Problem appears on Chromium, Chrome, and the Home Assistant app on Android - and also Chromium on Xubuntu.

Issue never spotted on Firefox desktop or Firefox / Fennec on Android - Cameras work normally.

Environment

• Home Assistant release with the issue: Home Assistant 0.105.5
• Last working Home Assistant release (if known): Happened only since I changed over to the stream option for cameras.
• Operating environment (Hass.io/Docker/Windows/etc.): Hass.io
• Integration causing this issue: MJPEG IP Camera
  I use Motion running on an Odroid with Debian to provide the mjpeg stream:
  https://motion-project.github.io/
• Link to integration documentation on our website:
  https://www.home-assistant.io/integrations/mjpeg/

Problem-relevant

camera.yaml

  - platform: mjpeg
    name: Front Door
    mjpeg_url: http://192.xxx.xxx.xxx:8081

  - platform: mjpeg
    name: Driveway
    mjpeg_url: http://192.xxx.xxx.xxx:8081

ui-lovelace.yaml

          - type: picture-entity
            title: Front Door
            entity: camera.front_door
            camera_view: live
            show_name: false
            show_info: false
            show_state: false
            # aspect_ratio: 1
            # aspect_ratio: 1.777
            # aspect_ratio: 1280x720 - This is the actual resolution of the camera, but no settings here prevent the distortion behaviour.

          - type: picture-entity
            title: Driveway
            entity: camera.driveway
            camera_view: live
            show_name: false
            show_info: false
            show_state: false
            # aspect_ratio: 1
            # aspect_ratio: 1280x720


configuration.yaml

stream:

Traceback/Error logs

Additional information

If I don't use the stream option for the cameras the problem disappears, but then the camera images eventually time-out and become grey-boxes.

The problem happens less during the night-time, I'm guessing because less is happening in the images at night.

Example: Camera on the left distorted, right as normal (image blanked for privacy). Both will turn square eventually.

---

Different Platforms but same problem:

home-assistant/iOS#513

[Bit-River]

Situation remedied by removing

stream:

from configuration.yaml

While keeping cameras with the camera_view: live in ui-lovelace.yaml.

---

There hasn't been one re-occurrence since making this change.

I think this can be closed, and maybe a mention made in the documentation for the stream component. (Happy to do that)

https://www.home-assistant.io/integrations/stream

Cameras are streaming at the same speed, and I've noticed no drop in quality / grey-boxes or anything.

[Bit-River]

Final note, if the cameras are rebooted then for this fix to work HA needs to be restarted afterwards.

Haven't seen this error in a week now, so I'll close this.