1. IronBarcode
  2. Comenzar
  3. Usando IronBarcode con Blazor
Cómo Usar un Escáner de Códigos de Barras en Blazor | IronBarcode

Uso de IronBarcode con Blazor

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

Este artículo contiene instrucciones detalladas sobre cómo integrar IronBarcode dentro de un proyecto Blazor. Como ejemplo, utilizaremos IronBarcode en una aplicación Blazor para escanear códigos de barras/QR capturados desde la cámara web de un usuario.

Cómo usar el escáner de código de barras en Blazor

  1. Instalar la biblioteca C# para escanear códigos de barras en Blazor
  2. Cree un proyecto de servidor Blazor y agregue un nuevo componente Razor
  3. Habilitar la cámara web usando JavaScript
  4. Configurar el método de captura de imágenes para enviar imágenes al servidor
  5. Decodificar códigos de barras utilizando el método BarcodeReader.Read

Crear un proyecto Blazor

Abrir Visual Studio => Crear Nuevo Proyecto => Blazor Server App:

CreateBlazorProject related to Crear un proyecto Blazor

Establecer un nombre y ubicación para el proyecto:

ProjectName related to Crear un proyecto Blazor

Seleccionar el marco de trabajo .NET 6 (o cualquier otra versión moderna de Standard .NET):

SelectFramework related to Crear un proyecto Blazor

Y ya estamos listos:

MainScreen related to Crear un proyecto Blazor

Para agregar soporte a la cámara web, agregue un nuevo componente Razor:

NewRazorComponent related to Crear un proyecto Blazor

Asigne un nombre, luego haga clic en Add:

NewRazorComponentName related to Crear un proyecto Blazor

Habilitar la funcionalidad de la cámara web con JavaScript

Dado que esta aplicación trabaja con la cámara web de un usuario, debe realizar el manejo del lado del cliente para la privacidad. Agregue un archivo JavaScript al proyecto para manejar la funcionalidad de la cámara web y nómbrelo webcam.js:

JavascriptFileLocation related to Habilitar la funcionalidad de la cámara web con JavaScript

No olvide incluir una referencia a webcam.js en index.html:

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

Agregue el siguiente 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

Necesitamos abrir la cámara web del usuario. Proceda a hacer esto cuando la página cargue sobrescribiendo el método OnInitializedAsync() de Index.razor. Invoque la función JavaScript initializeCamera() que escribió previamente.

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
$vbLabelText   $csharpLabel

Ahora agregue etiquetas HTML que ejecutarán la transmisión de video de la cámara web:

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

Captura la imagen

Para capturar un fotograma del flujo de video de la cámara web, escribamos otra función JavaScript en webcam.js. Esta función dibujará el fotograma actual del video fuente al destino del lienzo.

// 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 función capturará un fotograma, lo codificará en base64, luego enviará la imagen codificada a un método en C# llamado ProcessImage(). El método ProcessImage() es el siguiente: que envía la imagen codificada a una API del lado del servidor para procesarla.

[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(ByVal imageString As String) As Task
	' Create an image object containing the base64 data
	Dim imageObject = 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
$vbLabelText   $csharpLabel

Maneja el envío de la imagen codificada desde getFrame() en JavaScript a una API del lado del servidor para su procesamiento.

A continuación, necesitamos llamar a esta función JavaScript cuando se haga clic en el botón Capturar Fotograma. Recuerde, nuestro botón está buscando una función manejadora llamada 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
$vbLabelText   $csharpLabel

IronBarcode: extracción de imágenes capturadas

Agregue el paquete NuGet de IronBarcode al proyecto del servidor:

dotnet add package IronBarCode

Ahora, en el proyecto del servidor, añada un método API para procesar la imagen codificada y extraer el valor del Código de Barras/QR. El siguiente código agrega funcionalidad de lectura de códigos de barras al proyecto Blazor. De la imagen escaneada, realizamos preprocesamiento de imagen y la alimentamos al método FromStream. Pase el objeto Image a un método en la clase BarcodeReader para escanear el código de barras en Blazor. El valor resultante del código de barras es luego accesible desde la propiedad Value del 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
$vbLabelText   $csharpLabel

Puede encontrar el proyecto de ejemplo aquí.

Preguntas Frecuentes

¿Cómo puedo integrar una biblioteca de códigos de barras en un proyecto Blazor?

Para integrar una biblioteca de códigos de barras en un proyecto Blazor, instale el paquete NuGet apropiado, configure un proyecto de servidor Blazor, habilite el soporte de cámara web con JavaScript, capture imágenes y decódelas usando los métodos de lectura de códigos de barras de la biblioteca.

¿Cómo habilito el soporte de cámara web en una aplicación Blazor?

Habilite el soporte de cámara web agregando un archivo JavaScript a su proyecto Blazor. El archivo debe contener funciones para acceder y transmitir el video de la cámara web, que se puede invocar desde Blazor usando la interoperabilidad de JS.

¿Qué JavaScript se necesita para acceder a la cámara web?

El JavaScript debe incluir una función como initializeCamera() que use navigator.mediaDevices.getUserMedia para solicitar acceso a la cámara y transmitir el video a un elemento de video HTML.

¿Cómo capturo y proceso un marco de la cámara web en Blazor?

Escriba una función JavaScript para capturar el marco de video actual, conviértalo en una imagen codificada en base64 y envíelo a un método C# usando la interoperabilidad de JS de Blazor. El método C# puede entonces procesar la imagen para leer códigos de barras.

¿Cómo puedo leer códigos de barras en un proyecto Blazor?

Puede leer códigos de barras decodificando una cadena de imagen base64 en un método API del lado del servidor usando la clase de lector de una biblioteca de códigos de barras, que extrae el valor del código de barras de la imagen.

¿Cuáles son los requisitos previos para usar una biblioteca de códigos de barras en Blazor?

Asegúrese de tener un proyecto de servidor Blazor configurado, el paquete NuGet necesario instalado y JavaScript configurado para manejar la entrada de la cámara web. También necesita una clave de licencia válida para la biblioteca de códigos de barras.

¿Cómo envío imágenes capturadas al servidor en Blazor?

Envíe imágenes capturadas al servidor invocando un método C# con los datos de la imagen usando DotNetObjectReference en JavaScript, que llama al método con la cadena de imagen en base64.

¿Esta biblioteca maneja códigos QR?

Sí, la biblioteca de códigos de barras puede crear, leer y gestionar tanto códigos de barras como códigos QR dentro de aplicaciones .NET, incluyendo aquellas construidas con Blazor.

¿Dónde puedo encontrar un proyecto de ejemplo Blazor usando una biblioteca de códigos de barras?

Un proyecto de ejemplo Blazor usando la biblioteca de códigos de barras está disponible para descargar desde el enlace proporcionado en la sección de conclusión del artículo.

Curtis Chau
Curtis Chau
  Chatea con el equipo de ingeniería ahora
Escritor Técnico

Curtis Chau tiene una licenciatura en Ciencias de la Computación (Carleton University) y se especializa en el desarrollo front-end con experiencia en Node.js, TypeScript, JavaScript y React. Apasionado por crear interfaces de usuario intuitivas y estéticamente agradables, disfruta trabajando con frameworks modernos y creando manuales bien ...

Leer más
¿Listo para empezar?
Nuget Descargas 1,979,979 | Version: 2025.11 recién lanzado