Using IronBarcode with Blazor

IronBarcode supports running over the Blazor project and the following tutorial shows how to use IronBarcode with Blazor.

You can easily capture a QR or Barcode image from a user's webcam. With Blazor and Javascript, the real power comes when you transfer the QR or Barcode image back to your C# code, enabling you to use IronBarcode library to Extract the image Code Value. In this tutorial, we will be using Blazor and IronBarcode to extract the captured image for a QR or Barcodes Value from a user's webcam.

Lets start.

Create Blazor Project

Open Visual Studio => Create New Project => Choose Blazor WebAssembly App.

Set a Name

Select framework .NET 6

And we are ready

Add new Razor component for cam

Give it a name

Add JavaScript to Enable WebCam

Since this app is working with a user's webcam, I prefer to keep everything client-side for privacy. Lucky for us, a Blazor WebAssembly App satisfies this requirement beautifully. Add javascript file for all webcam functions and name it webcam.js.

Don't forget to include javascript file inside index.html file.

    <script src="webcam.js"></script>
HTML

Add javascript WebCam Initilization function to webcam.js file.

    // current video stream
    let videoStream;
    async function initializeCamera() 
    {
        const canvas = document.querySelector("#canvas");
        const video = document.querySelector("#video");
        if (
            !"mediaDevices" in navigator ||
            !"getUserMedia" in navigator.mediaDevices
            )
            {
                alert("Camera API is not available in your browser");
                return;
            }

        // video constraints
        const constraints = {
            video: {
                width: {
                    min: 180
                },
                height: {
                    min: 120
                },
            },
        };

        constraints.video.facingMode = useFrontCamera ? "user" : "environment";

        try {
                videoStream = await navigator.mediaDevices.getUserMedia (constraints);    
                video.srcObject = videoStream;
            } 
            catch (err) 
            {
                alert("Could not access the camera" + err);
            }
    }
    // current video stream
    let videoStream;
    async function initializeCamera() 
    {
        const canvas = document.querySelector("#canvas");
        const video = document.querySelector("#video");
        if (
            !"mediaDevices" in navigator ||
            !"getUserMedia" in navigator.mediaDevices
            )
            {
                alert("Camera API is not available in your browser");
                return;
            }

        // video constraints
        const constraints = {
            video: {
                width: {
                    min: 180
                },
                height: {
                    min: 120
                },
            },
        };

        constraints.video.facingMode = useFrontCamera ? "user" : "environment";

        try {
                videoStream = await navigator.mediaDevices.getUserMedia (constraints);    
                video.srcObject = videoStream;
            } 
            catch (err) 
            {
                alert("Could not access the camera" + err);
            }
    }
' current video stream
	Private videoStream As let
	Async Function initializeCamera() As [function]
		const canvas = document.querySelector("#canvas")
		const video = document.querySelector("#video")
		If (Not "mediaDevices") in navigator OrElse (Not "getUserMedia") in navigator.mediaDevices Then
				alert("Camera API is not available in your browser")
				Return
		End If

		' video constraints
		const constraints = {
			video: {
				width: { min: 180 },
				height: { min: 120 }
			}
		}

		constraints.video.facingMode = If(useFrontCamera, "user", "environment")

		Try
				videoStream = Await navigator.mediaDevices.getUserMedia(constraints)
				video.srcObject = videoStream
			Catch e1 As err
				alert("Could not access the camera" & err)
			End Try
	End Function
VB   C#

We need to start the user's webcam. Go ahead and do this when the page loads by overriding the OnInitializedAsync() method of Index.razor. Invoke the javascript initializeCamera function you previously wrote.

    protected override async Task OnInitializedAsync()
    {
        await JSRuntime.InvokeVoidAsync("initializeCamera");
    }
    protected override async Task OnInitializedAsync()
    {
        await JSRuntime.InvokeVoidAsync("initializeCamera");
    }
Protected Overrides Async Function OnInitializedAsync() As Task
		Await JSRuntime.InvokeVoidAsync("initializeCamera")
End Function
VB   C#

Now add html tags that will play the video.

    <section class="section">
        <video autoplay id="video" width="320"></video>
    </section>
HTML

Capture the Image

To capture a frame from the webcam video feed, let's write another javascript function in webcam.js. This function will draw the current frame from the source video to the canvas destination.

function getFrame(dotNetHelper) 
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    let dataUrl = canvas.toDataURL("image/png");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
HTML

It will capture a frame then encode it to base 64bit and send encoded image to ProcessImage Function which sends the encoded image to server Side API to process it.

    [JSInvokable]
    public async void ProcessImage(string imageString)
    {

        var imageObject = new CamImage();
        imageObject.imageDataBase64 = imageString;
        var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
        //Do image processing here
        var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
        if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
        {
            QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
            StateHasChanged();
        }
    }
    [JSInvokable]
    public async void ProcessImage(string imageString)
    {

        var imageObject = new CamImage();
        imageObject.imageDataBase64 = imageString;
        var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
        //Do image processing here
        var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
        if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
        {
            QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
            StateHasChanged();
        }
    }
<JSInvokable>
Public Async Sub ProcessImage(ByVal imageString As String)

		Dim imageObject = New CamImage()
		imageObject.imageDataBase64 = imageString
		Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)
		'Do image processing here
		Dim barcodeeResult = Await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject)
		If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
			QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result
			StateHasChanged()
		End If
End Sub
VB   C#

Now, we need to call this js function when the Capture Frame button is clicked. Remember, our button is looking for a handler method named CaptureFrame.

    private async Task CaptureFrame()
    {
        await JSRuntime.InvokeAsync<String>("getFrame", DotNetObjectReference.Create(this));
    }
    private async Task CaptureFrame()
    {
        await JSRuntime.InvokeAsync<String>("getFrame", DotNetObjectReference.Create(this));
    }
Private Async Function CaptureFrame() As Task
		Await JSRuntime.InvokeAsync(Of String)("getFrame", DotNetObjectReference.Create(Me))
End Function
VB   C#

IronBarcode Extracting Captured Image

Add IronBarcode to Server Project.

PM> Install-Package BarCode

Now, in the Server Project add API to process the encoded image and extract the QR or Barcode value.

    [HttpPost]
    [Route("ReadBarCode")]
    public string ReadBarCode(CamImage imageData)
    {
        try
            {
                var splitObject = imageData.imageDataBase64.Split(',');
                byte[] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject[1] : splitObject[0]);
                IronBarCode.License.LicenseKey = "Key";

                using (var ms = new MemoryStream(imagebyteData))
                {
                    Image barcodeImage = Image.FromStream(ms);
                    var result = IronBarCode.BarcodeReader.QuicklyReadOneBarcode(barcodeImage);
                    if (result == null || result.Value == null)
                    {
                        return $"{DateTime.Now} : Barcode is Not Detetced";
                    }

                    return $"{DateTime.Now} : Barcode is ({result.Value})";
                }

            }
        catch (Exception ex)
            {
                return $"Exception is {ex.Message}";
            }
    }

    //Post Object 
    public class CamImage
    {
        public string imageDataBase64 { get; set; }
    }
    [HttpPost]
    [Route("ReadBarCode")]
    public string ReadBarCode(CamImage imageData)
    {
        try
            {
                var splitObject = imageData.imageDataBase64.Split(',');
                byte[] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject[1] : splitObject[0]);
                IronBarCode.License.LicenseKey = "Key";

                using (var ms = new MemoryStream(imagebyteData))
                {
                    Image barcodeImage = Image.FromStream(ms);
                    var result = IronBarCode.BarcodeReader.QuicklyReadOneBarcode(barcodeImage);
                    if (result == null || result.Value == null)
                    {
                        return $"{DateTime.Now} : Barcode is Not Detetced";
                    }

                    return $"{DateTime.Now} : Barcode is ({result.Value})";
                }

            }
        catch (Exception ex)
            {
                return $"Exception is {ex.Message}";
            }
    }

    //Post Object 
    public class CamImage
    {
        public string imageDataBase64 { get; set; }
    }
<HttpPost>
<Route("ReadBarCode")>
Public Function ReadBarCode(ByVal imageData As CamImage) As String
		Try
				Dim splitObject = imageData.imageDataBase64.Split(","c)
				Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject(1), splitObject(0)))
				IronBarCode.License.LicenseKey = "Key"

				Using ms = New MemoryStream(imagebyteData)
					Dim barcodeImage As Image = Image.FromStream(ms)
					Dim result = IronBarCode.BarcodeReader.QuicklyReadOneBarcode(barcodeImage)
					If result Is Nothing OrElse result.Value Is Nothing Then
						Return $"{DateTime.Now} : Barcode is Not Detetced"
					End If

					Return $"{DateTime.Now} : Barcode is ({result.Value})"
				End Using

		Catch ex As Exception
				Return $"Exception is {ex.Message}"
		End Try
End Function

	'Post Object 
	Public Class CamImage
		Public Property imageDataBase64() As String
	End Class
VB   C#

You can find sample project here.

Previous Tutorial