Blazor web assembly: cannot stop img streaming when leaving page

Occasional Visitor


I'm having a problem with the disposing of a Blazor Web Assembly page containing an img tag having as src the path of a camera stream. In short, when I leave the page, the stream is not interrupted and remains active, wasting bandwitdh and resources.


I've the following Blazor page:


@page "/counter"
@implements IDisposable

<img src="@imgSrc" />
<br />
<button @onclick="OnBtnClicked">Hide/Show Image</button>

@code {
    private string imgSrc;
    private string imgPath = "http://user:password@192.168.x.x/axis-cgi/mjpg/video.cgi";

    protected override async void OnInitialized() {

    private void OnBtnClicked() {
        imgsrc=(imgSrc.Equals("") ? imgPath : "");

    public void Dispose() {



When I enter counter page the streaming starts, and I can see badwitdh increasing from 0Mbps to about 4Mbps from Task Manager; if I click the button to "hide" the image, the bandwitdh goes back to 0Mbps.
However, if while the live stream is being shown I navigate e.g. to Home page, the bandwitdh remains to 4Mbps. At this point, even if I go back to the counter page and click the button to hide the image, even if the image correctly hides, the bandwitdh remains 4Mbps.

It's like an underlying connection remains active and Blazor has no means to stop it, and disposing the page does not stop it either.


Do you know if there is a clean way to stop this stream?

  • please note calling OnBtnClicked from inside Dispose() yield no result, as if once entered in Dispose(), user interface is no more updated and thus the instructions have no effect.
  • There actually is a very dirty way to solve this, managing manually all the navigation related stuff from the main layout page and performing some cleaning before disposing the page... but the use of this workaround force me to setup a complex structure just to fix this problem.

Thank you very much!

0 Replies