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

Phoenix Forum Questions / Help
, , ,
1

Hi!

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
    ~H"""
    <div>
      <.header>
        <%= @title %>
      </.header>
      <img src={"/preview/#{@cam.id}"}/>
    </div>
    """
  end

end

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 !

2

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.

3

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:

4

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

1 Like