Usando IronBarcode Con Blazor
Este artículo de instrucciones contiene instrucciones detalladas sobre cómo integrar IronBarcode en 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 utilizar el escáner de códigos de barras en Blazor
- Install C# library to scan barcodes in Blazor
- Cree un proyecto de servidor Blazor y agregue un nuevo componente Razor
- Habilitar la cámara web usando JavaScript
- Configure el método de captura de imágenes para enviar imágenes al servidor.
- Decodifica códigos de barras utilizando el método BarcodeReader.Read
Crear proyecto Blazor
Abra Visual Studio => Crear nuevo proyecto => Aplicación de servidor Blazor:
Establezca un nombre y una ubicación para el proyecto:
Seleccione el marco .NET 6 (o cualquier otra versión moderna de .NET Standard):
Y estamos listos:
Para agregar soporte para la cámara web, agregue un nuevo componente Razor:
Dale un nombre, luego haz clic en Agregar:
Habilitar la Funcionalidad de la Cámara Web con JavaScript
Dado que esta aplicación trabaja con la webcam del usuario, debería realizar el manejo en el lado del cliente por motivos de privacidad. Agregue un archivo JavaScript al proyecto para manejar la funcionalidad de la cámara web y nómbrelo webcam.js:
No olvides incluir una referencia a webcam.js en index.html:
<script src="webcam.js"></script> <script src="webcam.js"></script>Agrega el siguiente código a 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);
}
}Necesitamos abrir la cámara web del usuario. Ve adelante y haz esto cuando se cargue la página, anulando el método OnInitializedAsync() de Index.razor. Invoca la función de 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 FunctionAhora añade etiquetas HTML que ejecutarán la transmisión de vídeo 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>Captar la imagen
Para capturar un fotograma del video de la cámara web, escribamos otra función de 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);
}Esta función capturará un fotograma, lo codificará en base64 y luego enviará la imagen codificada a un método en C# llamado ProcessImage(). El método ProcessImage() es el siguiente: envía la imagen codificada a la API del lado 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 SubGestiona 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 de JavaScript cuando se haga clic en el botón Capture Frame. 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 FunctionIronBarcode Extracción de imagen capturada
Agrega el paquete NuGet de IronBarcode al proyecto del servidor:
Install-Package BarCode
Ahora, en el proyecto del servidor, agrega un método API para procesar la imagen codificada y extraer el valor del Código de Barras/QR. El código siguiente añade funcionalidad de lectura de códigos de barras al proyecto Blazor. A partir de la imagen escaneada, realizamos un preprocesamiento de imagen y la introducimos en el 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 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 = 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 = 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 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 = 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
'Post Object
Public Class CamImage
Public Property imageDataBase64() As String
End ClassPuedes encontrar el proyecto de ejemplo aquí.
