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>或HLS协议将其流式传输为html RTSP元素：DIY: Video Streaming Server

这是我无法解决的问题，因为我似乎找不到一个很好的framwework / library / api以使用.net core blazor将mp4流式传输到网站。有什么建议吗？

我发现了类似VLC和WebRTC的东西，但是我不确定是否可以。另外，我发现通过SignalR与WebRTC结合进行流传输可以起作用：it is possible to stream video with SignalR?

Answer 1

我使用了 MJPEG 格式和标签的流。通过 ApiController 发出流，其中创建了 jpeg 帧流。在本地网络中工作的视频 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="..." />

使用.NET Core Blazor从服务器向客户端流式传输（实时）视频

1 个答案: