asp.net-core - 使用 .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)，然后流式传输到 html <video>使用 HLS 的元素或 RTSP协议(protocol): DIY: Video Streaming Server
这就是我卡住的地方，因为我似乎找不到一个好的框架/库/api 来使用 .net core blazor 将 mp4 流式传输到网站。 .有什么建议么？
我发现类似 VLC和 WebRTC但我不确定这会奏效。我还发现流过 SignalR结合 WebRTC可以工作: it is possible to stream video with SignalR?

Answer 1

我使用了 MJPEG 格式和 标签的流。通过创建 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.razor

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