How can you clean up a stream from a HTML image tag that has been removed from the DOM?

I am displaying a stream of data into a HTML multiple HTML img tags to show simulation videos. There are multiple videos being shown at the same time and sometimes the source of informaion into these img tags needs to be changed or videos needed to be added or removed from the view.

After researching I have found that there is a limit of 6 connections a browser can handle at any one time. With this in mind I need to make sure I have a maximum of these 6 videos showing at one time.

At the moment, the problem is when I try and remove one of the HTML img nodes from the DOM it seems to keep the stream open even after it is removed from the DOM. I can see it is still receiving data through the steam after checking the dev tools. Also any new videos I try to show do not working because of the limitation of 6 connections

Is there any way to clean up the stream subscription from the image tag before removing it? Or any other method to dispose of the stream?

Here is a minimal code representation of that i am trying to achieve

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
    <div class="container">
        <div class="navbar">
            <button id="next-streams-button">Go to next streams</button>
        </div>
        <div id="main-container">

        </div>

    </div>

    <script>

        var i = 0
        var streamAmount = 6
        var streamSources = [
            '10.0.1.24',
            '10.0.1.11',
            '10.0.1.25',
            '10.0.1.18',
            '10.0.1.17',
            '10.0.1.19',
            '10.0.1.12',
            '10.0.1.11',
            '10.0.2.16',
            '10.0.3.16',
            '10.0.4.16',
            '10.0.5.16',
            '10.0.6.16',
            '10.0.7.16',
        ];


        let currentStreams = streamSources.slice(i, i + streamAmount)
        let mainContainer = document.getElementById('main-container')

        buildElements(currentStreams)

        let nextStreamsButton = document.getElementById('next-streams-button')
        nextStreamsButton.addEventListener('click', () => {
            mainContainer.innerHTML = ""
            i = i + streamAmount;
            let newStreams = streamSources.slice(i, i + streamAmount)
            buildElements(newStreams)

        })

        function buildElements(streams) {
            streams.forEach(s => {
                let imgEl = document.createElement('img')
                imgEl.setAttribute('src', "/" + s + "/stream")
                mainContainer.append(imgEl)
            })
        }

    </script>
</body>

</html>

Here is a picture of the network tab with the streams

How can you clean up a stream from a HTML image tag that has been removed from the DOM?

0 Answers