使用.NET Core Blazor将视频从服务器流式传输到客户端

Question

我想使用.NET Core Blazor构建一个视频流应用程序。一个简单的用例是在网站中实现实时网络摄像头。到目前为止，我的解决方案是基于OpenCV的视频捕获(OpenCvSharp4.Windows 4.3(和一种异步方法，该方法不断地重新渲染图像源，并将其转换为Base64 string。重要的是，视频来自服务器。使用openCV是可选的。这是我的组件：

@page "/webcam"
@using OpenCvSharp
<div class="top-row">
<button type="button" class="btn btn-dark" @onclick="CaptureWebCam">Capture</button>
</div>
<img src="@_imgSrc" />
@code {
private string _imgSrc;
// Start task for video capture
protected async Task CaptureWebCam()
{
// 0 = default cam (mostly webcam)
using (var capture = new VideoCapture(0))
{
// set every image in videocapture as image source
using (var image = new Mat())
{
while (true)
{
capture.Read(image);
// encode image with chosen encoding format
string base64 = Convert.ToBase64String(image.ToBytes());
_imgSrc = $"data:image/png;base64,{base64}";
await Task.Delay(1);
StateHasChanged();
}
}
}
}
}

我的问题是：

对每个图像使用base64字符串根本不是一种性能！根据我的研究，我应该将我的原始视频转换为mp4容器(例如使用ffmpeg(，然后使用HLS或RTSP协议流式传输到html<video>元素

这就是我的困境，因为我似乎找不到一个好的framwework/library/api来使用.net core blazor将mp4流式传输到网站。有什么建议吗？

我发现了类似VLC和WebRTC的东西，但我不确定这是否有效。此外，我发现SignalR上的流媒体与WebRTC相结合可以工作：可以使用SignalR流媒体播放视频吗？

Answer 1

我使用了MJPEG格式的流，并且<img>标签通过创建jpeg帧流的ApiController发出流。在本地网络中工作视频800x600 30 FPS。

[ApiController]
[Route("api/[controller]")]
public class CameraController : ControllerBase, IDisposable
{
...
[HttpGet("{id}/[action]")]
public async Task<FileStreamResult> Live(string id, string channel)
{
_stream = new SmartMjpegStream(channel);
_cameras.Add(Id = id, this);
return await Task.FromResult(new FileStreamResult(_stream, SmartMjpegStream.ContentType));
}
...
}

接下来是CameraView.rarzor

<img src="camera/live?channel=rtsp://admin:12345@192.168.1.100/axis-media/media.amp" alt="..." />