Running C# object detection into blazor web app?

See more:

C#

Javascript

Emgu-CV

, +

I have worked on a project which is doing object detection in c#. the project just opens webcam and detects objects with boxes and labels on it.

This is using nuget package Yolodotnet.

This is my code.

using Emgu.CV;
using Emgu.CV.CvEnum;
using Emgu.CV.Features2D;
using SixLabors.ImageSharp;
using SixLabors.ImageSharp.PixelFormats;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Printing;
using System.Text;
using System.Windows;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
using System.Windows.Threading;
using YoloDotNet;
using YoloDotNet.Extensions;
using static Emgu.CV.WeChatQRCode;
using static System.Net.WebRequestMethods;
using Image = SixLabors.ImageSharp.Image;


namespace WebcamDemo
{
	/// <summary>
	/// Interaction logic for MainWindow.xaml
	/// </summary>
	public partial class MainWindow : Window
	{
		private Yolo _Yolo;
		private Dispatcher _Dispatcher;
		private CancellationTokenSource _WebcamCancellationTokenSource;
		private CancellationToken _WebcamCancellationToken;

		public MainWindow()
		{

			
			_Yolo = new Yolo(onnxModel: @"C:\Users\arsal\PycharmProjects\testobjDetect\shapes.onnx", false);

            _Dispatcher = Dispatcher.CurrentDispatcher;

            InitializeComponent();


		}

		private async Task WebcamAsync(CancellationToken cancellationToken)
		{
			// Create new videocapture instance Configration
			using var capture = new VideoCapture(0, VideoCapture.API.DShow);
			capture.Set(CapProp.FrameCount, 30);
			capture.Set(CapProp.FrameHeight, 640);
			capture.Set(CapProp.FrameWidth, 480);

			using var Stream = new MemoryStream();

			while (cancellationToken.IsCancellationRequested is false)
			{
				// Read Current webcam Frame into Stream
				capture.QueryFrame().ToBitmap().Save(Stream, ImageFormat.Bmp);
				Stream.Position = 0;
				// Feed stream to Yolodotnet for processing
				using var img = await Image.LoadAsync<Bgra32>(Stream);
				var results = _Yolo.RunObjectDetection(img,0.60);
				img.Draw(results);

				
				//Display Processed Frame on main Thread
				await _Dispatcher.InvokeAsync(async () => FaiziImage.Source = await ImageSharpToBitmapAsync(img));
			}
		}

		private static async Task<BitmapSource> ImageSharpToBitmapAsync(Image image)
		{
			using var ms = new MemoryStream();
			await image.SaveAsBmpAsync(ms);
			ms.Position = 0;
			var bitmap = new BitmapImage();
			bitmap.BeginInit();
			bitmap.CacheOption = BitmapCacheOption.OnLoad;
			bitmap.StreamSource = ms;
			bitmap.EndInit();
			return bitmap;
		}
		private void StartButton_Click(object sender, RoutedEventArgs e)
		{

			//Create a new cancellationtoken for controlling start and start
			_WebcamCancellationTokenSource = new CancellationTokenSource();
			_WebcamCancellationToken = new CancellationToken();

			//invoke Webcam in a new thread with passed in Cancellation token
			Task.Run(function: () => WebcamAsync(cancellationToken: _WebcamCancellationToken), cancellationToken: _WebcamCancellationToken);
		}

		private void StopButton_Click(object sender, RoutedEventArgs e)
		{

		}

		private void Window_Closed(object sender, EventArgs e)
		{

		}
	}
}

this is UI

<Window x:Class="WebcamDemo.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WebcamDemo"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800" Closed="Window_Closed">
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="30" />
            <RowDefinition></RowDefinition>
        </Grid.RowDefinitions>

        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
            <Button x:Name="StartButton" Content="Start" Click="StartButton_Click" />
            <Button x:Name="StopButton" Content="Stop" Click="StopButton_Click" />

        </StackPanel>
        <Image Grid.Row="1" x:Name="FaiziImage" />

    </Grid>
</Window>

this code is working fine and is detecting objects 100%.

Now i have to revert this code to blazor web app. Noob in Razor and JS stuff.

How can I make this yolodotnet library detects object when working with JS webcam?

What I have tried:

Tried to implement my c# code through razor pages but getting errors, also how will boxes be drawn on webcam canvas when it is on JS.