Utilisation d'IronBarcode avec Blazor
Cet article pratique contient des instructions détaillées sur comment intégrer IronBarcode dans un projet Blazor. À titre d'exemple, nous allons utiliser IronBarcode dans une application Blazor pour scanner les codes-barres/QR capturés à partir de la webcam d'un utilisateur.
Comment utiliser le scanner de codes-barres dans Blazor
- Installer la bibliothèque C# pour scanner les codes-barres dans Blazor
- Créez un projet de serveur Blazor et ajoutez un nouveau composant Razor
- Activer la webcam à l'aide de JavaScript
- Configurer le capture d'images méthode pour envoyer des images au serveur
- Décoder les codes-barres en utilisant le BarcodeReader.Read méthode
Créer un projet Blazor
Ouvrez Visual Studio => Créez un nouveau projet => Application Blazor Server :
Définissez un nom et un emplacement pour le projet :
Sélectionnez le framework .NET 6(ou toute autre version moderne de .NET Standard):
Et nous sommes prêts :
Pour ajouter la prise en charge de la webcam, ajoutez un nouveau composant Razor :
Nommez-le, puis cliquez sur Ajouter:
Activer la fonctionnalité de webcam avec JavaScript
Étant donné que cette application utilise la webcam de l'utilisateur, elle devrait effectuer le traitement côté client pour garantir la confidentialité. Ajoutez un fichier JavaScript au projet pour gérer la fonctionnalité de la webcam et nommez-le webcam.js :
N'oubliez pas d'inclure une référence à webcam.js dans index.html :
<script src="webcam.js"></script> <script src="webcam.js"></script>Ajoutez le code suivant à 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);
}
}Nous devons ouvrir la webcam de l'utilisateur. Allez-y et faites cela lorsque la page se charge en remplaçant le OnInitializedAsync()méthode de Index.razor. Appeler le JavaScript initializeCamera()` fonction que vous avez précédemment écrite.
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 FunctionAjoutez maintenant les balises HTML qui exécuteront le flux vidéo de la webcam :
<section class="section">
<video autoplay id="video" width="320"></video>
</section><section class="section">
<video autoplay id="video" width="320"></video>
</section>Capturer l'image
Pour capturer une image du flux vidéo de la webcam, écrivons une autre fonction JavaScript dans webcam.js. Cette fonction permet de dessiner l'image actuelle de la vidéo source vers la destination du canevas.
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);
}Cette fonction capturera une image, l'encodera en base64, puis enverra l'image encodée à une méthode en C# appelée ProcessImage.(). La méthodeProcessImage()méthode est la suivante : elle envoie l'image encodée à l'API côté serveur pour la traiter.
[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 SubIl gère l'envoi de l'image encodée depuis getFrame.()en JavaScript vers une API côté serveur pour traitement.
Ensuite, nous devons appeler cette fonction JavaScript lorsque le bouton Capture Frame est cliqué. N'oubliez pas, notre bouton recherche une fonction de gestionnaire appelée 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 Extraction d'une image capturée
Ajoutez le package NuGet IronBarcode au projet serveur :
Install-Package BarCode
Maintenant, dans le projet serveur, ajoutez une méthode API pour traiter l'image encodée et extraire la valeur du Code-barres/QR. Le code ci-dessous ajoute la fonctionnalité de lecture de codes-barres au projet Blazor. À partir de l'image numérisée, nous effectuons un prétraitement de l'image et l'entrons dans la méthode FromStream. Passez l'objet Image dans une méthode de la classe BarcodeReader pour scanner le code-barres dans Blazor. La valeur du code-barres résultant est ensuite accessible depuis la propriété Value de l'objet 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 ClassVous pouvez trouver le projet exempleici.
