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
- Instalar librería C# para escanear código de barras en Blazor
- Cree un proyecto de servidor Blazor y añada un nuevo componente Razor
- Activar la cámara web mediante JavaScript
- Configure captura de imágenes para enviar la imagen al servidor
- 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 .NET Framework 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>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.comNecesitamos 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 FunctionAhora 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>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);
}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();
}
}IRON VB CONVERTER ERROR developers@ironsoftware.comAhora, 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 FunctionIronBarcode 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; }
}<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
'Post Object
Public Class CamImage
Public Property imageDataBase64() As String
End ClassPuede encontrar un proyecto de ejemplo aquí.
