1. IronBarcode
  2. Comece agora
  3. Usando IronBarcode com Blazor
Como usar um leitor de código de barras no Blazor | IronBarcode

Usando IronBarcode Com Blazor

Curtis Chau
Curtis Chau
Atualizado:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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
  1. Instalar biblioteca C# para escanear códigos de barras no Blazor
  2. Crie um projeto de servidor Blazor e adicione um novo componente Razor.
  3. Ativar webcam usando JavaScript
  4. Configure o método de captura de imagem para enviar imagens ao servidor
  5. Decodifique códigos de barras utilizando o método BarcodeReader.Read

Criar Projeto Blazor

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

CreateBlazorProject related to Criar Projeto Blazor

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

ProjectName related to Criar Projeto Blazor

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

SelectFramework related to Criar Projeto Blazor

E estamos prontos:

MainScreen related to Criar Projeto Blazor

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

NewRazorComponent related to Criar Projeto Blazor

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

NewRazorComponentName related to Criar Projeto Blazor

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 a funcionalidade da webcam e nomeie-o webcam.js:

JavascriptFileLocation related to Habilitar Funcionalidade de Webcam Com JavaScript

Não se esqueça de incluir uma referência para 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, substituindo 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");
}
$vbLabelText   $csharpLabel

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, codificá-lo-á em base64, e então enviará a imagem codificada para um método em C# chamado ProcessImage(). O método ProcessImage() é o seguinte: que 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();
    }
}
$vbLabelText   $csharpLabel

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 de manipulação 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));
}
$vbLabelText   $csharpLabel

IronBarcode Extraindo Imagem Capturada

Adicione o pacote NuGet IronBarcode ao projeto do servidor:

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. A partir da imagem escaneada, realizamos pré-processamento de imagem e a alimentamos no método FromStream. Passe o objeto Imagem para um método na 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; }
}
$vbLabelText   $csharpLabel

Você pode encontrar o projeto de exemplo aqui.

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

Leia mais
Pronto para começar?
Nuget Downloads 2,108,094 | Versão: 2026.3 acaba de ser lançado
Still Scrolling Icon

Ainda está rolando a tela?

Quer provas rápidas? PM > Install-Package BarCode
executar um exemplo Veja seu fio se transformar em um código de barras.