Blazor Web 程序集：离开页面时无法停止图像流

Question

我在处理包含 img 标签（其 src 为相机流路径）的 Blazor Web Assembly 页面时遇到问题。简而言之，当我离开页面时，流不会中断并保持活动状态，浪费带宽和资源。

我有以下 Blazor 页面：

@page "/counter"
@implements IDisposable

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

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

    protected override async void OnInitialized() {
        imgsrc=imgPath;
    }

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

    public void Dispose() {
        Console.WriteLine("Disposing!");
    }
}

当我进入计数器页面时，流媒体开始，我可以从任务管理器中看到 badwitdh 从 0Mbps 增加到大约 4Mbps；如果我单击按钮“隐藏”图像，带宽将恢复到 0Mbps。 但是，如果在显示直播时我导航，例如回到首页，带宽仍为4Mbps。此时，即使我返回计数器页面并单击隐藏图像的按钮，即使图像正确隐藏，带宽仍然是 4Mbps。

这就像底层连接保持活动状态，Blazor 无法阻止它，并且处理页面也无法阻止它。

你知道是否有一种干净的方法来阻止这个流？

• 请注意，从 Dispose() 内部调用 OnBtnClicked 不会产生任何结果，就好像一旦进入 Dispose()，用户界面就不再更新，因此指令不起作用
• 实际上有一种非常肮脏的方法来解决这个问题，手动管理主布局页面中所有与导航相关的内容，并在处理页面之前执行一些清理......但是使用这种解决方法迫使我设置一个复杂的结构，只是为了解决这个问题。
• 已进行测试
  • Mozilla 火狐 94.0.2 64 位
  • Microsoft Edge 96.0.1054.41 64 位
  • 谷歌浏览器 96.0.4664.45 64 位
• 我也尝试过使用 Blazor Server（相同的 .razor 页面代码），但问题仍然存在。

非常感谢！

编辑：我添加了用于测试的浏览器，我必须从 URL 中删除用户名和密码，否则 Chrome 和 Edge 会阻止该请求。我还添加了 Blazor Server 测试结果。

Answer 1

最终我解决了问题：问题是客户端没有停止向服务器发送请求。事实上，如果您尝试将 src 标签更改为静态图像，您会看到流将停止发送。

为了解决这个问题，我做了以下操作：假设您在

.razor

文件中有以下标签

// mycomponent.razor
<img id="@mjpeg_stream_id" src="@mjpeg_stream_url">

然后，让组件实现

IAsyncDisposable

接口

// mycomponent.razor.cs
public async ValueTask DisposeAsync()
{
    mjpeg_stream_url = "";
    await jsRef.InvokeAsync<string>("cleanMjpegStream", mjpeg_stream_id);
}

我们在 blazor 和以下 javascript 方法中清除 src 标签

// somejsfile.js
export function cleanMjpegStream(mjpeg_stream_id) {
    let img = document.getElementById(mjpeg_stream_id);
    if (img != null) {
        img.src = "";
    }
}

现在，当您离开页面时，客户端将停止发送流请求，然后离开页面。