ASP.NET 来自 OpenCVSharp 捕获的核心流视频
ASP.NET Core stream video from the OpenCVSharp capture
我想使用 ASP.NET 核心应用程序流式传输从网络摄像头捕获的视频。
我还需要对帧进行一些操作,这就是我使用 OpenCVSharp 的原因。
目前我有下一步的发展:
- html 在我看来-在这里我不知道我应该使用什么类型
<video id="video" preload="auto">
<source src="LiveVideo" type="<< don't know the type >>"/>
</video>
- 我的控制器 - 这里我也不知道内容类型,主要问题是:我不知道如何流式传输 OpenCVSharp 捕获的视频
[ApiController]
[Route("[controller]")]
public class LiveVideoController : ControllerBase
{
[HttpGet]
public async Task<FileStreamResult> GetVideo()
{
// capture frames from webcam
// https://github.com/shimat/opencvsharp/wiki/Capturing-Video
var capture = new VideoCapture(0);
var stream = await << somehow get the stream >>;
return new FileStreamResult(stream, << don't know the content type >>);
}
}
如果有人需要应用程序如此奇特的行为,我已经找到了一种方法。使用 Blazor 是可能的。我像字节数组一样读取每一帧并将其发送到 UI 并将其转换为图像。
这是我的 Blazor 组件 LiveVideo.razor
@page "/live-video"
@using OpenCvSharp;
<img src="@_imgSrc" />
@code {
private string _imgSrc;
protected override async Task OnInitializedAsync()
{
using (var capture = new VideoCapture(0))
using (var frame = new Mat())
{
while (true)
{
capture.Read(frame);
var base64 = Convert.ToBase64String(frame.ToBytes());
_imgSrc = $"data:image/gif;base64,{base64}";
await Task.Delay(1);
StateHasChanged();
}
}
}
}
试试这个
参考下面的项目文件
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<WasmBuildNative>true</WasmBuildNative>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<RunAOTCompilation>True</RunAOTCompilation>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
<RunAOTCompilation>True</RunAOTCompilation>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.1" PrivateAssets="all" />
<PackageReference Include="OpenCvSharp4" Version="4.5.5.20211231" />
<PackageReference Include="OpenCvSharp4.runtime.wasm" Version="4.5.5.20211231" />
</ItemGroup>
</Project>
查看 Sample code
我想使用 ASP.NET 核心应用程序流式传输从网络摄像头捕获的视频。 我还需要对帧进行一些操作,这就是我使用 OpenCVSharp 的原因。
目前我有下一步的发展:
- html 在我看来-在这里我不知道我应该使用什么类型
<video id="video" preload="auto">
<source src="LiveVideo" type="<< don't know the type >>"/>
</video>
- 我的控制器 - 这里我也不知道内容类型,主要问题是:我不知道如何流式传输 OpenCVSharp 捕获的视频
[ApiController]
[Route("[controller]")]
public class LiveVideoController : ControllerBase
{
[HttpGet]
public async Task<FileStreamResult> GetVideo()
{
// capture frames from webcam
// https://github.com/shimat/opencvsharp/wiki/Capturing-Video
var capture = new VideoCapture(0);
var stream = await << somehow get the stream >>;
return new FileStreamResult(stream, << don't know the content type >>);
}
}
如果有人需要应用程序如此奇特的行为,我已经找到了一种方法。使用 Blazor 是可能的。我像字节数组一样读取每一帧并将其发送到 UI 并将其转换为图像。
这是我的 Blazor 组件 LiveVideo.razor
@page "/live-video"
@using OpenCvSharp;
<img src="@_imgSrc" />
@code {
private string _imgSrc;
protected override async Task OnInitializedAsync()
{
using (var capture = new VideoCapture(0))
using (var frame = new Mat())
{
while (true)
{
capture.Read(frame);
var base64 = Convert.ToBase64String(frame.ToBytes());
_imgSrc = $"data:image/gif;base64,{base64}";
await Task.Delay(1);
StateHasChanged();
}
}
}
}
试试这个 参考下面的项目文件
<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
<PropertyGroup>
<TargetFramework>net6.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
<WasmBuildNative>true</WasmBuildNative>
<AllowUnsafeBlocks>true</AllowUnsafeBlocks>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Debug|AnyCPU'">
<RunAOTCompilation>True</RunAOTCompilation>
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)|$(Platform)'=='Release|AnyCPU'">
<RunAOTCompilation>True</RunAOTCompilation>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="6.0.1" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="6.0.1" PrivateAssets="all" />
<PackageReference Include="OpenCvSharp4" Version="4.5.5.20211231" />
<PackageReference Include="OpenCvSharp4.runtime.wasm" Version="4.5.5.20211231" />
</ItemGroup>
</Project>
查看 Sample code