在IMG元素中显示自定义视频流

Question

我正在开发一个 Blazor WASM 应用程序，需要显示 Axis 摄像头视频流。由于我不想公开凭据，因此我想使用自定义 API 来提供流服务。

相机流（对于我的例子）： http://192.168.0.195/axis-cgi/mjpg/video.cgi

• 配置为匿名查看的相机（用于测试）
• 在我的 Chrome 浏览器中本地打开此内容：显示流
• 在 VLC 中打开它：显示流

API控制器代码：

public async Task<IActionResult> GetStream()
{
    var cameraUrl = "http://192.168.0.195/axis-cgi/mjpg/video.cgi";

    var response = await _httpClient.GetAsync(cameraUrl, HttpCompletionOption.ResponseHeadersRead);

    if (!response.IsSuccessStatusCode)
    {
        return StatusCode((int)response.StatusCode, "Failed to retrieve stream from camera.");
    }

    var stream = await response.Content.ReadAsStreamAsync();

    return new FileStreamResult(stream, "multipart/x-mixed-replace");
}

运行API控制器时：

• 在 Chrome 中打开端点（https://localhost:7283/v1/camera/stream）：黑屏
• 在 VLC 中打开端点：有效！

将其添加到我的 Blazor 应用程序时：

<img src="https://localhost:7283/v1/camera/stream" alt="Live Camera Feed" />

显示损坏的图像图标。

问题

我在这里缺少什么？该流在 VLC 中确实可以工作，但浏览器没有显示它，而原始流是..

Answer 1

在我的原始代码中，内容类型中没有定义边界。这对于客户端分离流的各个部分是必要的（在我的例子中，我假设是帧）。

我使用Postman检查原始流，发现定义了“boundary=myboundary”。将相同的内容添加到我的 API 控制器中解决了问题：

return new FileStreamResult(stream, "multipart/x-mixed-replace; boundary=myboundary");

请注意，“myboundary”只是我正在使用的相机碰巧使用的自定义字符串。对于其他流来说，这可能有所不同。