Streaming chunked mjpeg in img tag within modal livecomponent does not stop when closed


I have a simple livecomponent in a modal that opens an mjpeg stream in an img tag as follows:

defmodule MyWeb.CamLive.PreviewComponent do
  use MyWeb, :live_component

  @impl true
  def render(assigns) do
        <%= @title %>
      <img src={"/preview/#{}"}/>


When I close the modal, I see that the socket of the mjpeg stream is not closed - until i refresh my page.

I have found a workaround to instead of an img tag, use an iframe … but i’d like to not use iframes.

Hope someone knows of a proper solution of doing this ? thanks !

How are you closing the modal?

If you’re using the <.modal> component from default core_components.ex, then you might be only hiding the modal on the client side.

Hi, thanks, yes I am using the default .modal component from core_components…

Maybe I should somehow try to change the value of src in the img tag when hide_modal() is being called ?

Will dig some deeper, thanks for pointer :slight_smile:

I wonder adding an :if to the modal tag itself so that it is straight up removed from the dom would help.

1 Like