1. IronBarcode
  2. Cómo Hacer
  3. Uso de IronBarcode con Blazor

Tutorial de escáner de código de barras Blazor con IronBarcode

IronBarcode soporta la ejecución sobre el proyecto Blazor y el siguiente tutorial muestra cómo utilizar IronBarcode con Blazor.

Puede capturar fácilmente una imagen QR o de código de barras desde la webcam de un usuario. Con Blazor y JavaScript, el verdadero poder viene cuando se transfiere la imagen QR o código de barras de nuevo a su código C #, lo que le permite utilizar la biblioteca IronBarcode para extraer el valor del código de la imagen. En este tutorial, vamos a utilizar Blazor y IronBarcode para extraer la imagen capturada para un QR o Barcodes Value desde la webcam de un usuario.

Cómo utilizar el escáner de códigos de barras en Blazor

  1. Instalar librería C# para escanear código de barras en Blazor
  2. Cree un proyecto de servidor Blazor y añada un nuevo componente Razor
  3. Activar la cámara web mediante JavaScript
  4. Configure captura de imágenes para enviar la imagen al servidor
  5. Descodificar códigos de barras utilizando QuicklyReadOneBarcode y otras API intuitivas

Crear proyecto Blazor

Abra Visual Studio => Crear Nuevo Proyecto => Elija Blazor Server App.

Establecer un nombre

Seleccione el marco .NET 6

Y estamos listos

Añadir nuevo componente Razor para cam

Dale un nombre

Añadir JavaScript para activar la WebCam

Dado que esta aplicación funciona con la cámara web del usuario, prefiero mantener todo en el lado del cliente por motivos de privacidad. Añade un archivo javascript para todas las funciones de la webcam y nómbralo webcam.js.

No olvide incluir el archivo javascript dentro del archivo index.html.

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

Añade la función javascript WebCam Initilization al archivo webcam.js.

//  flujo de vídeo actual
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;
        }

    //  restricciones de vídeo
    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);
    }
}
//  flujo de vídeo actual
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;
        }

    //  restricciones de vídeo
    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);
    }
}
'  flujo de vídeo actual
Private videoStream As let
Async Function initializeCamera() As [function]
	const canvas = document.querySelector("#canvas")
	const video = document.querySelector("#video")
	If (Not "mediaDevices") in navigator (Not "getUserMedia") in navigator.mediaDevices Then
			alert("Camera API is not available in your browser")
			Return
	End If

	'  restricciones de vídeo
	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#

Necesitamos iniciar la webcam del usuario. Hazlo cuando se cargue la página anulando el comando OnInitializedAsync() de Index.razor. Invoca la función javascript initializeCamera que escribiste 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
VB   C#

Ahora añade las etiquetas html que reproducirán el vídeo.

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

Captar la imagen

Para capturar un fotograma del vídeo de la webcam, escribamos otra función javascript en webcam.js. Esta función dibujará el fotograma actual desde el vídeo de origen al destino del lienzo.

function getFrame(dotNetHelper) 
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    let dataUrl = canvas.toDataURL("image/png");
    //Invocar la función ProcessImage y enviarle DataUrl como parámetro 
    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");
    //Invocar la función ProcessImage y enviarle DataUrl como parámetro 
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
HTML

Capturará un fotograma, lo codificará en base 64 bits y enviará la imagen codificada a la función ProcessImage, que enviará la imagen codificada a la API del servidor para procesarla.

[JSInvokable]
public async void ProcessImage(string imageString)
{

    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    //Procese la imagen aquí
    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);
    //Procese la imagen aquí
    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)
	'Procese la imagen aquí
	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#

Ahora, necesitamos llamar a esta función js cuando el botón Capturar Cuadro sea presionado. Recuerda, nuestro botón está buscando un método manejador llamado 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 Extracción de imagen capturada

Añadir IronBarcode al Proyecto Servidor.

Install-Package BarCode

Ahora, en el Proyecto Servidor añada API para procesar la imagen codificada y extraer el valor del QR o Código de Barras. El siguiente código convierte este proyecto Blazor en un escáner de código de barras. A partir de la imagen escaneada realizamos un preprocesado y la introducimos en el método FromStream. Pase el objeto Image a un método de la clase BarcodeReader para escanear el código de barras en Blazor. El valor del código de barras resultante es accesible desde la propiedad Value del objeto BarcodeResult.

[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}";
        }
}

//Puesto Objeto 
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}";
        }
}

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

'Puesto Objeto 
Public Class CamImage
	Public Property imageDataBase64() As String
End Class
VB   C#

Puede encontrar un proyecto de ejemplo aquí.