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

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

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

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.

CreateBlazorProject related to Crear proyecto Blazor

Establecer un nombre

ProjectName related to Crear proyecto Blazor

Seleccione el .NET Framework 6

SelectFramework related to Crear proyecto Blazor

Y estamos listos

MainScreen related to Crear proyecto Blazor

Añadir nuevo componente Razor para cam

NewRazorComponent related to Crear proyecto Blazor

Dale un nombre

NewRazorComponentName related to Crear proyecto Blazor

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.

JavascriptFileLocation related to Añadir JavaScript para activar la WebCam

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.

// current video stream
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;
        }

    // video constraints
    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);
    }
}
// current video stream
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;
        }

    // video constraints
    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);
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
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");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    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");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    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);
    //Do image processing here
    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);
    //Do image processing here
    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)
	'Do image processing here
	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}";
        }
}

//Post Object 
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}";
        }
}

//Post Object 
public class CamImage
{
    public string imageDataBase64 { get; set; }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Puede encontrar un proyecto de ejemploaquí.