close_popup closes the view, but stream continues in background

[barisahmet]

My Home Assistant version: 2024.3.3

What I am doing:
I have a Fully Kiosk Home Assistant dashboard. When motion detected on doorbell, I show the camera popup with AgentDVR url using browser_mod.popup, it works well. When AgentDVR shows popup, my server CPU usage jumps from 5% to 50%, it's normal. However, when I call close_popup it stays 50% and using network in background. Which I think that means it just hides the popup. It doesn't dispose it. When I refresh the web page, it goes down to 5% again.

What I expected to happen:
When I call close_popup, it should stop streaming the web content.

What happened instead:
It hides the popup, but still using resources in background.

Minimal steps to reproduce:

# The least amount of code or steps possible to reproduce my error

service: browser_mod.popup
data:
  browser_id: tablet
  size: fullscreen
  content: >
    <img style="display: block;-webkit-user-select: none;margin:
    auto;background-color: hsl(0, 0%, 25%);"
    src="http://192.168.1.21:8025/video.mjpg?oid=3&size=1024x768" width="1480"
    height="924">

after card shown, just hide it with;

service: browser_mod.close_popup
data:
  browser_id: tablet

Error messages from the browser console:

It runs in tablet, I dont know how to get the log from it.

---

By replacing the space in the checkboxes ([ ]) with an X below, I indicate that I:

• Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• Have made sure I am using the latest version of the plugin.

• Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[markfrancisonly]

if content supports javascript, you could add something like the following:

document.addEventListener('DOMContentLoaded', function() {
    const img = document.querySelector('img'); // Select the image element

    // Function to start the MJPEG stream
    function startStream() {
        img.src = "http://192.168.1.21:8025/video.mjpg?oid=3&size=1024x768";
    }

    // Function to stop the MJPEG stream
    function stopStream() {
        img.src = ""; // Remove the source to stop the stream
    }

    // Options for the observer (which part of the viewport to check, etc.)
    const options = {
        root: null, // null means it refers to the viewport
        rootMargin: '0px',
        threshold: 0.1 // 10% of the item must be in view to be considered intersecting
    };

    // Creating an Intersection Observer
    const observer = new IntersectionObserver(function(entries, observer) {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                startStream(); // Start the stream if the image is visible
            } else {
                stopStream(); // Stop the stream if the image is not visible
            }
        });
    }, options);

    // Start observing the image
    observer.observe(img);
});

[barisahmet]

Your suggestion worked fine @markfrancisonly, thank you!