Hi @Mercurial, this is really a wonderful control .... much needed in the Blazor world.

The control itself is working fine for streaming of video data. However my requirement is to take a photo from webcam upon clicking a button. Here is my code ....

<VideoMedia @ref="CameraControl" Width="480" Height="270" RecordAudio="false"></VideoMedia>
<br />
<button @onclick="@TakePhoto">Take Photo</button>

@code {

    public VideoMedia CameraControl { get; set; }

    protected async Task TakePhoto()
    {
        //CameraControl.ReceiveData();
    }
}

I see the control has a ReceiveData() method, however it needs an input of int array. Can you please suggest on how do I capture the photo using this control?

First off, thanks for building this component! Looks very useful.

I've started with your demo app, and integrated the component into a Blazor page in my app.

The component starts up fine, and I can see myself in the webcam picture.

Problem is, the OnData callback is only getting 1 byte in array about 99% of the time. A few times I see 300-500 bytes, but never anything more than that. Also, it seems to hang the Blazor page, and the page shows the 'reconnecting' error at the top. (Also, I'm not getting any calls to OnError.

I've tried on the latest Chrome and Edge (beta), and both are the same.

Have you ever seen this issue?

fail on build blazor app :

Severity Code Description Project File Line Suppression State
Error TS18003 Build: No entries were found in the configuration file "C: /Users/Administrator/.nuget/packages/blazormedia/0.2.333.326/contentFiles/any/netstandard2.0/tsconfig.json". The include paths were "[" ** / * "]", the exclude paths were "[]". Mobile H: \ Programming \ Mobile \ Mobile \ tsc 1

please help me

The component has worked really well for me and has a lot of useful stuff, thanks for publishing it.

I am currently trying to implement a Barcode-Reader into my blazor website. I've already written a class a while back that can read barcodes from images (System.Drawing.Images or Bitmaps).

So now I only need a way to retrieve all streamed images so I can check them for barcodes.

I thought this would be quite easy because the VideoMedia component has an OnData event, that also gives a byte[] with it. I tried converting this byte array to a System.Drawing.Image forever until I finally figured out that the given array isn't actually a valid image.

The given data depends on the set Timeslice in the component. The higher it is set, the more data will be given, but it also takes longer to raise the event.

So now I'm stuck here with a ton of data that I can't do anything with and ask myself, why does that OnData event even exist? What's the purpose of it? It seems to me that the only way this could be used is the one implemented in the demo - showing the user how much data is received per second.

Is there no way to get each frame of the stream in any reliable way? Like an OnNewFrew event, that would fire each time the image of the stream is updated.

I got one solution working, but it is very ugly and the stream will lag very badly when using it.

I set a Timeslice of 250, so in my understanding, each 250ms the OnData event is fired. With the following code, I managed to get the images as System.Drawing.image:

private async void OnData()
{
    Image img = null;

    // Get the base64 code of the current image
    string data = await CameraControl.CaptureImageAsync();

    // Remove the first 22 characters ('data:image/png;base64,')
    data = data.Remove(0, 22);

    // Convert the valid image string to a byte[]
    byte[] dataArr = Convert.FromBase64String(data);

    // Convert the byte[] to a System.Drawing.Image using a MemoryStream
    using (MemoryStream ms = new(dataArr))
    {
        img = Image.FromStream(ms);
    }

    // Here I check the img for barcodes with my own class (not relevant for the post)
}

tsc : error TS18003: Build:No inputs were found in config file 'C:/Users/DEV/.nuget/packages/blazormedia/0.3.0.5/contentFiles/any/netstandard2.1/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '[]'.

Hi,

I'm trying to create a Blazor WebAssembly Hosted app in which a user can use their PC's webcam or connected webcams to take a picture and then save it. Based on the available features, BlazorMedia is exactly what I want, and thank you for creating this.

When I try to just display the camera stream in the page and take a photo, it works perfectly fine. However, if I want to give the user the option to select which camera they want to use, it doesn't work correctly. As you can see in the below image, the selected camera in the dropdown is my USB webcam, whereas the video actually being displayed is from my laptop's webcam (please ignore that placeholder image, my laptop's webcam has a privacy shutter which is closed in this pic).

When I switch cameras in the dropdown, it doesn't seem to change the video source either. The sample project was a bit too big to just upload normally here, so I've shared a Google Drive link to the zipped project folder.

https://drive.google.com/file/d/1Azzirwp8WHDeaHicIwgOnsCadFafnD1m/view?usp=sharing

Can you please let me know what I'm doing wrong here, or how I can fix it to make it work the way I want it?

Thanks,
Rajkishan

Would be useful to allow selection of codecs, as shown in this example:
https://github.com/addpipe/Media-Recorder-API-Demo/blob/master/js/main.js

if (MediaRecorder.isTypeSupported('video/webm;codecs=vp9')) { var options = {mimeType: 'video/webm;codecs=vp9'}; } else if (MediaRecorder.isTypeSupported('video/webm;codecs=h264')) { var options = {mimeType: 'video/webm;codecs=h264'}; } else if (MediaRecorder.isTypeSupported('video/webm;codecs=vp8')) { var options = {mimeType: 'video/webm;codecs=vp8'}; } log('Using '+options.mimeType); mediaRecorder = new MediaRecorder(localStream, options);