Blazor WASM App navigation won't stop image request when image is a stream (webcam)

[emmuss]

Is there an existing issue for this?

• I have searched the existing issues

Describe the bug

When an <img> tag has an source attibute poiting to a never ending stream (webcam) navigation between blazor pages won't dispose the stream, the application keeps building up streams for each navigation request, even trying to remove the tag from the dom using javascript does not work.

see the attached image, 4 navigations between the two pages have been executed and the streams keep accumulating.

Expected Behavior

image streaming comes to a halt when the page is disposed.

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

8.0.204

Anything else?

No response

[emmuss]

This is my current solution to stop the stream:

    async ValueTask IAsyncDisposable.DisposeAsync()
    {
        await JS.InvokeVoidAsync("eval", "document.getElementById('webCam').src = 'https://i.imgur.com/c24qDz2_d.jpeg?maxwidth=520&shape=thumb&fidelity=high'");
    }

[javiercn]

@emmuss thanks for contacting us.

Does setting the image source to '' achieve the same effect?

We don't think this is something that the framework can effectively handle and its something that you have to handle in your app. In a regular navigation the page would go away, but in an enhanced nav, the document is preserved, hence the change in behavior.

There's really nothing the framework can do out of the box as we don't have a way to detect this situation (the browser is doing the request, not Blazor), so I suspect the only way to achieve this is to do something similar to what you are doing. Maybe you could think of encapsulating this in a component with its related JS and hook on to "enhancedload" to trigger the behavior to cancel the stream.

[dotnet-policy-service]

This issue has been resolved and has not had any activity for 1 day. It will be closed for housekeeping purposes.

See our Issue Management Policies for more information.