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
- Instalar la biblioteca de C# para escanear códigos de barras en Blazor
- Cree un proyecto de servidor Blazor y agregue un nuevo componente Razor
- Activar la cámara web mediante JavaScript
- Configure el captura de imágenes método para enviar imágenes al servidor
- Decodificar códigos de barras utilizando el BarcodeReader.Read método
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 framework .NET 6(o cualquier otra versión moderna de .NET estándar):
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. Adelante y haz esto cuando se cargue la página sobrescribiendo el OnInitializedAsync.()método deIndex.razor` Invocar el JavaScriptinitializeCamera()` función 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 de la transmisión de 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.(). LaProcessImage()`método es el siguiente: que envía la imagen codificada al 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 SubManeja 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 Capturar Fotograma. Recuerda, 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. Desde la imagen escaneada, realizamos el preprocesamiento de imágenes 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 = 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 ClassPuede encontrar el proyecto de muestra aquí.
