使用 .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例如使用），然后<video>使用HLSorRTSP协议将其流式传输到 html元素：DIY：视频流服务器

这就是我卡住的地方，因为我似乎找不到一个好的框架/库/api 来使用 .mp4 将 mp4 流式传输到网站.net core blazor。有什么建议？

我找到了类似的东西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.razor

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