Usando IronBarcode Com Blazor

Q: Que JavaScript é necessário para acessar a webcam?

O JavaScript deve incluir uma função como initializeCamera() que usa navigator.mediaDevices.getUserMedia para solicitar acesso à câmera e transmitir o vídeo para um elemento de vídeo HTML.

Curtis Chau

Updated: 29 de junho de 2026

Este artigo de instruções contém instruções detalhadas sobre como integrar o IronBarcode em um projeto Blazor. Como exemplo, usaremos o IronBarcode em um aplicativo Blazor para escanear códigos de barras/QRs capturados da webcam de um usuário.

Como Usar Scanner de Códigos de Barras no Blazor

Instalar biblioteca C# para escanear códigos de barras no Blazor
Crie um projeto de servidor Blazor e adicione um novo componente Razor.
Ativar webcam usando JavaScript
Configure o método de captura de imagem para enviar imagens ao servidor
Decodifique códigos de barras utilizando o método BarcodeReader.Read

Criar Projeto Blazor

Abra o Visual Studio => Criar Novo Projeto => Blazor Server App:

Defina um nome e localização para o projeto:

Selecione o framework .NET 6 (ou qualquer outra versão moderna Standard .NET):

E estamos prontos:

Para adicionar suporte a webcam, adicione um novo componente Razor:

Dê um nome a ele, depois clique em Adicionar:

Habilitar Funcionalidade de Webcam Com JavaScript

Como este aplicativo está trabalhando com a webcam de um usuário, ele deve realizar o tratamento no lado do cliente para privacidade. Adicione um arquivo JavaScript ao projeto para lidar com funcionalidade de webcam e nomeie-o webcam.js:

Não se esqueça de incluir uma referência ao webcam.js em index.html:

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

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

HTML

Adicione o seguinte código a 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

Precisamos abrir a webcam do usuário. Vá em frente e faça isso quando a página carregar sobrescrevendo o método OnInitializedAsync() de Index.razor. Invoque a função JavaScript initializeCamera() que você escreveu anteriormente.

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

Agora, adicione tags HTML que executarão a transmissão de vídeo da webcam:

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

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

HTML

Capturar a Imagem

Para capturar um quadro do feed de vídeo da webcam, vamos escrever outra função JavaScript em webcam.js. Essa função desenhará o quadro atual do vídeo de origem para o destino do canvas.

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

Esta função capturará um quadro, codificará em base64 e enviará a imagem codificada para um método em C# chamado ProcessImage(). O método ProcessImage() é o seguinte: envia a imagem codificada para uma API do lado do servidor para processá-la.

[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

Ele lida com o envio da imagem codificada de getFrame() em JavaScript para uma API do lado do servidor para processamento.

Em seguida, precisamos chamar essa função JavaScript quando o botão Capturar Quadro for clicado. Lembre-se, nosso botão está procurando por uma função handler chamada 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 Extraindo Imagem Capturada

Adicione o pacote NuGet IronBarcode ao projeto do servidor:

> dotnet add package IronBarCode

dotnet add package IronBarCode

Agora, no projeto do servidor, adicione um método de API para processar a imagem codificada e extrair o valor do Código de Barras/QR. O código abaixo adiciona funcionalidade de leitura de código de barras ao projeto Blazor. Da imagem digitalizada, executamos o pré-processamento de imagem e a alimentamos no método FromStream. Passe o objeto Imagem em um método da classe BarcodeReader para escanear o código de barras no Blazor. O valor resultante do código de barras fica então acessível na propriedade Value do objeto BarcodeResult.

[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);
            if (result == null || result.Value == null)
            {
                return $"{DateTime.Now}: Barcode is Not Detected";
            }

            return $"{DateTime.Now}: Barcode is ({result.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);
            if (result == null || result.Value == null)
            {
                return $"{DateTime.Now}: Barcode is Not Detected";
            }

            return $"{DateTime.Now}: Barcode is ({result.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 Function ReadBarCode(ByVal imageData As CamImage) As String
	Try
		' Decode the base64 image data
		Dim splitObject = imageData.imageDataBase64.Split(","c)
		Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject(1), splitObject(0)))

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

		Using ms = New MemoryStream(imagebyteData)
			' Convert byte array to Image
			Dim barcodeImage As Image = Image.FromStream(ms)
			' Read barcode from Image
			Dim result = BarcodeReader.Read(barcodeImage)
			If result Is Nothing OrElse result.Value Is Nothing Then
				Return $"{DateTime.Now}: Barcode is Not Detected"
			End If

			Return $"{DateTime.Now}: Barcode is ({result.Value})"
		End Using
	Catch ex As Exception
		Return $"Exception: {ex.Message}"
	End Try
End Function

' Model to encapsulate the base64 image data
Public Class CamImage
	Public Property imageDataBase64() As String
End Class

<HttpPost>
<Route("ReadBarCode")>
Public Function ReadBarCode(ByVal imageData As CamImage) As String
	Try
		' Decode the base64 image data
		Dim splitObject = imageData.imageDataBase64.Split(","c)
		Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject(1), splitObject(0)))

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

		Using ms = New MemoryStream(imagebyteData)
			' Convert byte array to Image
			Dim barcodeImage As Image = Image.FromStream(ms)
			' Read barcode from Image
			Dim result = BarcodeReader.Read(barcodeImage)
			If result Is Nothing OrElse result.Value Is Nothing Then
				Return $"{DateTime.Now}: Barcode is Not Detected"
			End If

			Return $"{DateTime.Now}: Barcode is ({result.Value})"
		End Using
	Catch ex As Exception
		Return $"Exception: {ex.Message}"
	End Try
End Function

' Model to encapsulate the base64 image data
Public Class CamImage
	Public Property imageDataBase64() As String
End Class

Você pode encontrar o projeto de exemplo [aqui](/static-assets/barcode/faq/blazor/Blazor IronBarcodeWithCAM.zip).

Perguntas frequentes

Como posso integrar uma biblioteca de código de barras em um projeto Blazor?

Para integrar uma biblioteca de código de barras em um projeto Blazor, instale o pacote NuGet apropriado, configure um projeto de servidor Blazor, habilite o suporte à webcam com JavaScript, capture imagens e decodifique-as usando os métodos de leitura de código de barras da biblioteca.

Como faço para habilitar o suporte à webcam em um aplicativo Blazor?

Habilite o suporte à webcam adicionando um arquivo JavaScript ao seu projeto Blazor. O arquivo deve conter funções para acessar e transmitir o vídeo da webcam, que podem ser invocadas a partir do Blazor usando a interoperabilidade com JavaScript.

Que JavaScript é necessário para acessar a webcam?

O JavaScript deve incluir uma função como initializeCamera() que usa navigator.mediaDevices.getUserMedia para solicitar acesso à câmera e transmitir o vídeo para um elemento de vídeo HTML.

Como faço para capturar e processar um frame da webcam no Blazor?

Escreva uma função em JavaScript para capturar o quadro de vídeo atual, convertê-lo em uma imagem codificada em base64 e enviá-la para um método em C# usando a interoperabilidade JavaScript do Blazor. O método em C# poderá então processar a imagem para leitura de código de barras.

Como posso ler códigos de barras em um projeto Blazor?

É possível ler códigos de barras decodificando uma string de imagem em base64 em um método de API do lado do servidor, utilizando a classe leitora de uma biblioteca de códigos de barras, que extrai o valor do código de barras da imagem.

Quais são os pré-requisitos para usar uma biblioteca de código de barras em Blazor?

Certifique-se de ter um projeto de servidor Blazor configurado, o pacote NuGet necessário instalado e o JavaScript configurado para lidar com a entrada da webcam. Você também precisa de uma chave de licença válida para a biblioteca de código de barras.

Como faço para enviar imagens capturadas para o servidor em Blazor?

Envie as imagens capturadas para o servidor invocando um método C# com os dados da imagem usando DotNetObjectReference em JavaScript, que chama o método com a string de imagem em base64.

Esta biblioteca de códigos de barras consegue lidar com códigos QR?

Sim, a biblioteca de código de barras pode criar, ler e gerenciar códigos de barras e códigos QR em aplicativos .NET, incluindo aqueles criados com Blazor.

Onde posso encontrar um projeto Blazor de exemplo que utilize uma biblioteca de código de barras?

Um projeto Blazor de exemplo que utiliza a biblioteca de código de barras está disponível para download no link fornecido na seção de conclusão do artigo.

Curtis Chau

Converse agora mesmo com a equipe de engenharia.

Redator Técnico

Curtis Chau é bacharel em Ciência da Computação (Universidade Carleton) e se especializa em desenvolvimento front-end, com experiência em Node.js, TypeScript, JavaScript e React. Apaixonado por criar interfaces de usuário intuitivas e esteticamente agradáveis, Curtis gosta de trabalhar com frameworks modernos e criar manuais bem estruturados e visualmente atraentes.

...