ASP.NET Core stream video from the OpenCVSharp capture

Question

I want to stream video captured from the webcam using ASP.NET Core application. I also need to do some manipulations with the frames, that's why I'm using OpenCVSharp.

Currently I have next developments:

html in my view - here I don't know what type I should use

<video id="video" preload="auto">
  <source src="LiveVideo" type="<< don't know the type >>"/>
</video>

my controller - here I also don't know the content type, and the main problem: I don't know how to stream the video captured by 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 >>);
  }
}

score 1 · Accepted Answer · answered Sep 09 '19 at 09:29

1

If somebody needs so exotic behavior for the app, I've found a way. It is possible with Blazor. I read each frame like a bytes array and send it to the UI and convert it to the image.

Here is my Blazor component 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();
            }
        }
    }
}

answered Sep 09 '19 at 09:29

Yevheniy Tymchishin

708
8
19

1

Hi, I have 2 questions about Your solution: 1. Which nuget packages did You use for opencv? 2. Did You build serverapp or webassembly app? – Stefan W. Apr 25 '20 at 08:37
After small adjustment it works by me, but with one problem: it access server webcam, and I would like to acces client webcam. – Stefan W. May 01 '20 at 11:28
@StefanW. Then I think server-side Blazor is not your choice. I assume you should to perform some experiments with Blazor Web Assembly. – Yevheniy Tymchishin May 06 '20 at 11:29

score 0 · Answer 2 · answered Apr 21 '22 at 09:30

Try this Refer below Proj file

    <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>

Check out the Sample code

ASP.NET Core stream video from the OpenCVSharp capture

2 Answers2

Linked