Blazor Barcode Scanner Tutorial Using IronBarcode

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.

How to Use Barcode Scanner in Blazor

Install C# library to scan barcode in Blazor
Create Blazor server project and add new Razor component
Enable webcam using JavaScript
Configure image capturing method to send the image to server
Decode barcodes utilizing QuicklyReadOneBarcode method and other intuitive APIs

Create Blazor Project

Open Visual Studio => Create New Project => Choose Blazor Server 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. 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>

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

<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);
}

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. The code below turn this Blazor project into barcode scanner. From the scanned image we perform preprocessing and feed it into FromStream method. Pass the Image object into a method in BarcodeReader class to scan the barcode in Blazor. The resulting barcode value is then accessible from Value property of BarcodeResult object.

[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.Read(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.Read(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.Read(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.