Using IronBarcode With Blazor

Updated: July 6, 2026

This how-to article contains detailed instructions on how to integrate IronBarcode within a Blazor project. As an example, we will use IronBarcode in a Blazor app to scan barcodes/QRs captured from a user's webcam.

How to Use Barcode Scanner in Blazor

Install C# library to scan barcodes in Blazor
Create a Blazor server project and add a new Razor component
Enable webcam using JavaScript
Configure the image capturing method to send images to the server
Decode barcodes utilizing the BarcodeReader.Read method

Create Blazor Project

Open Visual Studio => Create New Project => Blazor Server App:

Set a project name and location:

Select the .NET 6 framework (or any other modern Standard .NET version):

And we are ready:

To add webcam support, add a new Razor component:

Give it a name, then click Add:

Enable Webcam Functionality With JavaScript

Since this app is working with a user's webcam, it should perform the handling on the client-side for privacy. Add a JavaScript file to the project to handle webcam functionality and name it webcam.js:

Don't forget to include a reference to webcam.js in index.html:

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

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

HTML

Add the following code to webcam.js:

// Current video stream
let videoStream;

// Function to initialize camera access and stream it to a video element
async function initializeCamera() {
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");
    
    // Check if navigator supports media devices
    if (!("mediaDevices" in navigator) || !("getUserMedia" in navigator.mediaDevices)) {
        alert("Camera API is not available in your browser");
        return;
    }

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

    // Set camera facing mode: "user" for front camera, "environment" for back camera
    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try {
        // Request camera access
        videoStream = await navigator.mediaDevices.getUserMedia(constraints);
        video.srcObject = videoStream;
    } catch (err) {
        alert("Could not access the camera: " + err);
    }
}

// Current video stream
let videoStream;

// Function to initialize camera access and stream it to a video element
async function initializeCamera() {
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");
    
    // Check if navigator supports media devices
    if (!("mediaDevices" in navigator) || !("getUserMedia" in navigator.mediaDevices)) {
        alert("Camera API is not available in your browser");
        return;
    }

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

    // Set camera facing mode: "user" for front camera, "environment" for back camera
    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try {
        // Request camera access
        videoStream = await navigator.mediaDevices.getUserMedia(constraints);
        video.srcObject = videoStream;
    } catch (err) {
        alert("Could not access the camera: " + err);
    }
}

JavaScript

We need to open 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

Protected Overrides Async Function OnInitializedAsync() As Task
	Await JSRuntime.InvokeVoidAsync("initializeCamera")
End Function

Now add HTML tags that will run the webcam video stream:

<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 to capture a frame from the video and send it to the server via Blazor
function getFrame(dotNetHelper) {
    // Set canvas dimensions to match video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    // Draw the current video frame onto the canvas
    canvas.getContext('2d').drawImage(video, 0, 0);
    
    // Convert the canvas content to a base64 encoded PNG image
    let dataUrl = canvas.toDataURL("image/png");
    
    // Send the image data to the C# method `ProcessImage`
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}

// Function to capture a frame from the video and send it to the server via Blazor
function getFrame(dotNetHelper) {
    // Set canvas dimensions to match video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    // Draw the current video frame onto the canvas
    canvas.getContext('2d').drawImage(video, 0, 0);
    
    // Convert the canvas content to a base64 encoded PNG image
    let dataUrl = canvas.toDataURL("image/png");
    
    // Send the image data to the C# method `ProcessImage`
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}

JavaScript

This function will capture a frame, encode it to base64, then send the encoded image to a method in C# called ProcessImage(). The ProcessImage() method is the following: which sends the encoded image to a server-side API to process it.

[JSInvokable]
public async Task ProcessImage(string imageString)
{
    // Create an image object containing the base64 data
    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    
    // Serialize image object to JSON
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    
    // Send image data to server-side API for processing
    var barcodeeResult = await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = await barcodeeResult.Content.ReadAsStringAsync();
        StateHasChanged();
    }
}

[JSInvokable]
public async Task ProcessImage(string imageString)
{
    // Create an image object containing the base64 data
    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    
    // Serialize image object to JSON
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    
    // Send image data to server-side API for processing
    var barcodeeResult = await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = await barcodeeResult.Content.ReadAsStringAsync();
        StateHasChanged();
    }
}

<JSInvokable>
Public Async Function ProcessImage(imageString As String) As Task
    ' Create an image object containing the base64 data
    Dim imageObject As New CamImage()
    imageObject.imageDataBase64 = imageString

    ' Serialize image object to JSON
    Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)

    ' Send image data to server-side API for processing
    Dim barcodeeResult = Await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject)
    If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
        QRCodeResult = Await barcodeeResult.Content.ReadAsStringAsync()
        StateHasChanged()
    End If
End Function

<JSInvokable>
Public Async Function ProcessImage(imageString As String) As Task
    ' Create an image object containing the base64 data
    Dim imageObject As New CamImage()
    imageObject.imageDataBase64 = imageString

    ' Serialize image object to JSON
    Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)

    ' Send image data to server-side API for processing
    Dim barcodeeResult = Await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject)
    If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
        QRCodeResult = Await barcodeeResult.Content.ReadAsStringAsync()
        StateHasChanged()
    End If
End Function

It handles sending the encoded image from getFrame() in JavaScript to a server-side API for processing.

Next, we need to call this JavaScript function when the Capture Frame button is clicked. Remember, our button is looking for a handler function called 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

Private Async Function CaptureFrame() As Task
	Await JSRuntime.InvokeAsync(Of String)("getFrame", DotNetObjectReference.Create(Me))
End Function

IronBarcode Extracting Captured Image

Add the IronBarcode NuGet package to the server project:

> dotnet add package IronBarCode

dotnet add package IronBarCode

Now, in the server project, add an API method to process the encoded image and extract the Barcode/QR value. The code below adds barcode reading functionality to the Blazor project. From the scanned image, we perform image pre-processing and feed it into the FromStream method. Pass the Image object into a method in the BarcodeReader class to scan the barcode in Blazor. The resulting barcode value is then accessible from the Value property of the BarcodeResult object.

[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
    {
        // Decode the base64 image data
        var splitObject = imageData.imageDataBase64.Split(',');
        byte[] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

        // Set IronBarcode license key (replace 'Key' with actual key)
        IronBarCode.License.LicenseKey = "Key";

        using (var ms = new MemoryStream(imagebyteData))
        {
            // Convert byte array to Image
            Image barcodeImage = Image.FromStream(ms);
            // Read barcode from Image
            var result = BarcodeReader.Read(barcodeImage);
            var barcode = result.FirstOrDefault();
            if (barcode == null || barcode.Value == null)
            {
                return $"{DateTime.Now}: Barcode is Not Detected";
            }

            return $"{DateTime.Now}: Barcode is ({barcode.Value})";
        }
    }
    catch (Exception ex)
    {
        return $"Exception: {ex.Message}";
    }
}

// Model to encapsulate the base64 image data
public class CamImage
{
    public string imageDataBase64 { get; set; }
}

[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
    {
        // Decode the base64 image data
        var splitObject = imageData.imageDataBase64.Split(',');
        byte[] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

        // Set IronBarcode license key (replace 'Key' with actual key)
        IronBarCode.License.LicenseKey = "Key";

        using (var ms = new MemoryStream(imagebyteData))
        {
            // Convert byte array to Image
            Image barcodeImage = Image.FromStream(ms);
            // Read barcode from Image
            var result = BarcodeReader.Read(barcodeImage);
            var barcode = result.FirstOrDefault();
            if (barcode == null || barcode.Value == null)
            {
                return $"{DateTime.Now}: Barcode is Not Detected";
            }

            return $"{DateTime.Now}: Barcode is ({barcode.Value})";
        }
    }
    catch (Exception ex)
    {
        return $"Exception: {ex.Message}";
    }
}

// Model to encapsulate the base64 image data
public class CamImage
{
    public string imageDataBase64 { get; set; }
}

You can find the sample project here.

Frequently Asked Questions

How do I integrate IronBarcode in a Blazor project?

To integrate IronBarcode in a Blazor project, you'll need to create a Blazor server app, add a Razor component to enable webcam functionality using JavaScript, and utilize IronBarcode's decoding capabilities to process images captured from the webcam.

Can IronBarcode be used to scan QR codes in Blazor?

Yes, IronBarcode can be used in Blazor projects to scan QR codes, utilizing webcam-captured images to decode QR content through IronBarcode's BarcodeReader functionalities.

What is required to enable webcam support in a Blazor app?

To enable webcam support in a Blazor app, you need to add a JavaScript file to manage webcam functionality, include it in your project, and ensure the webcam's video feed can be accessed and processed on the client-side.

Is the barcode processing performed client-side or server-side in a Blazor app using IronBarcode?

The barcode processing in a Blazor app using IronBarcode is performed server-side. After the image is captured with client-side JavaScript, it is sent to the server where IronBarcode processes it to decode barcodes.

What are the steps for capturing a frame from a webcam in a Blazor project?

To capture a frame, add a function in your JavaScript to draw the current frame onto a canvas, convert it to a base64 image, and then send this data to a C# method for further processing with IronBarcode.

What is the role of the 'ProcessImage' C# method in the Blazor IronBarcode integration?

The 'ProcessImage' C# method receives base64-encoded image data from JavaScript, processes it using IronBarcode to decode barcodes, and interacts with a server-side API to extract the barcode values.

How is IronBarcode licensed within a Blazor project?

IronBarcode requires setting a license key in the Blazor project's server-side code to function without limitations, ensuring that the barcode functions can execute properly.

How do you install IronBarcode in a Blazor project?

IronBarcode can be installed in a Blazor project by adding the IronBarcode NuGet package to the server project using the command: 'dotnet add package IronBarCode'.

What framework versions can Blazor projects use when integrating IronBarcode?

While creating a Blazor project for integrating IronBarcode, you can use .NET 6 or any other modern Standard .NET version as the project framework.

Curtis Chau

Chat with engineering team now

Technical Writer

Curtis Chau holds a Bachelor’s degree in Computer Science (Carleton University) and specializes in front-end development with expertise in Node.js, TypeScript, JavaScript, and React. Passionate about crafting intuitive and aesthetically pleasing user interfaces, Curtis enjoys working with modern frameworks and creating well-structured, visually appealing manuals.

...