I have a project in C# that is performing object detection.

This model has been trained in yolo and then converted to onnx model to be used in this project.

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:UsersfaizanDownloadsbarcode.onnx", false);
            _Yolo = new Yolo(onnxModel: @"C:UsersarsalPycharmProjectstestobjDetectsevensegment.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)
        {

        }
    }
}

and this is XAML UI for c# application.

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

But right now i am working in Blazor web App. New to blazor or front end development.

Right now in Blazor button click I am opening Webcam through javascript, now how can i pass webcam frames to my c# code above that can run on front end and then process those frames and draw bounding boxes or do object detection after processing through c# and display it back on webcam javascript.

Is it possible to do it or whole process needs to be done in Javascript.

Tried to call c# from webcam but not working.
Right now moving to javascript object detection fully instead of c# in process.