1. IronBarcode
  2. Commencer
  3. Utilisation de IronBarcode avec Blazor
Comment utiliser un scanner de code-barres dans Blazor | IronBarcode

Using IronBarcode With Blazor

Curtis Chau
Curtis Chau
Mis à jour:
This article was translated from English: Does it need improvement?
Translated
View the article in English

Cet article pratique contient des instructions détaillées sur comment intégrer IronBarcode dans un projet Blazor. À titre d'exemple, nous utiliserons IronBarcode dans une application Blazor pour scanner des codes-barres/QR capturés à partir de la webcam d'un utilisateur.

class="hsg-featured-snippet">

Comment Utiliser le Scanner de Codes-Barres dans Blazor

  1. Installer la bibliothèque C# pour scanner les codes-barres dans Blazor
  2. Créer un projet serveur Blazor et ajouter un nouveau composant Razor
  3. Activer la webcam à l'aide de JavaScript
  4. Configurer la méthode de capture d'image pour envoyer des images au serveur
  5. Décoder les codes-barres en utilisant la méthode BarcodeReader.Read

Créer un Projet Blazor

Ouvrir Visual Studio => Créer un Nouveau Projet => Application Serveur Blazor :

CreateBlazorProject related to Créer un Projet Blazor

Définir un nom et un emplacement pour le projet :

ProjectName related to Créer un Projet Blazor

Sélectionner le framework .NET 6 (ou toute autre version .NET Standard moderne) :

SelectFramework related to Créer un Projet Blazor

Et nous sommes prêts :

MainScreen related to Créer un Projet Blazor

Pour ajouter la prise en charge de la webcam, ajoutez un nouveau composant Razor :

NewRazorComponent related to Créer un Projet Blazor

Donnez-lui un nom, puis cliquez sur Ajouter :

NewRazorComponentName related to Créer un Projet Blazor

Activer la Fonctionnalité de Webcam Avec JavaScript

Étant donné que cette application travaille avec la webcam d'un utilisateur, elle doit effectuer le traitement côté client pour des raisons de confidentialité. Ajoutez un fichier JavaScript au projet pour gérer la fonctionnalité de la webcam et nommez-le webcam.js :

JavascriptFileLocation related to Activer la Fonctionnalité de Webcam Avec JavaScript

N'oubliez pas d'inclure une référence à webcam.js dans index.html :

<script src="webcam.js"></script>
<script src="webcam.js"></script>
HTML

Ajoutez le code suivant à webcam.js :

// Current video stream
let videoStream;

// Function to initialize camera access and stream it to a video element
async function initializeCamera() {
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");

    // Check if navigator supports media devices
    if (!("mediaDevices" in navigator) || !("getUserMedia" in navigator.mediaDevices)) {
        alert("Camera API is not available in your browser");
        return;
    }

    // Define video constraints
    const constraints = {
        video: {
            width: { min: 180 },
            height: { min: 120 }
        },
    };

    // Set camera facing mode: "user" for front camera, "environment" for back camera
    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try {
        // Request camera access
        videoStream = await navigator.mediaDevices.getUserMedia(constraints);
        video.srcObject = videoStream;
    } catch (err) {
        alert("Could not access the camera: " + err);
    }
}
// Current video stream
let videoStream;

// Function to initialize camera access and stream it to a video element
async function initializeCamera() {
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");

    // Check if navigator supports media devices
    if (!("mediaDevices" in navigator) || !("getUserMedia" in navigator.mediaDevices)) {
        alert("Camera API is not available in your browser");
        return;
    }

    // Define video constraints
    const constraints = {
        video: {
            width: { min: 180 },
            height: { min: 120 }
        },
    };

    // Set camera facing mode: "user" for front camera, "environment" for back camera
    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try {
        // Request camera access
        videoStream = await navigator.mediaDevices.getUserMedia(constraints);
        video.srcObject = videoStream;
    } catch (err) {
        alert("Could not access the camera: " + err);
    }
}
JAVASCRIPT

Nous devons ouvrir la webcam de l'utilisateur. Allez-y et faites cela lorsque la page se charge en redéfinissant la méthode OnInitializedAsync() de Index.razor. Invoquez la fonction JavaScript initializeCamera() que vous avez écrite précédemment.

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
$vbLabelText   $csharpLabel

Ajoutez maintenant des 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>
HTML

Capturer l'Image

Pour capturer une image à partir du flux vidéo de la webcam, écrivons une autre fonction JavaScript dans webcam.js. Cette fonction dessinera l'image actuelle de la vidéo source à la destination du canvas.

// Function to capture a frame from the video and send it to the server via Blazor
function getFrame(dotNetHelper) {
    // Set canvas dimensions to match video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw the current video frame onto the canvas
    canvas.getContext('2d').drawImage(video, 0, 0);

    // Convert the canvas content to a base64 encoded PNG image
    let dataUrl = canvas.toDataURL("image/png");

    // Send the image data to the C# method `ProcessImage`
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
// Function to capture a frame from the video and send it to the server via Blazor
function getFrame(dotNetHelper) {
    // Set canvas dimensions to match video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;

    // Draw the current video frame onto the canvas
    canvas.getContext('2d').drawImage(video, 0, 0);

    // Convert the canvas content to a base64 encoded PNG image
    let dataUrl = canvas.toDataURL("image/png");

    // Send the image data to the C# method `ProcessImage`
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}
JAVASCRIPT

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éthode ProcessImage() est la suivante : elle envoie l'image encodée à une API côté serveur pour la traiter.

[JSInvokable]
public async Task ProcessImage(string imageString)
{
    // Create an image object containing the base64 data
    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;

    // Serialize image object to JSON
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);

    // Send image data to server-side API for processing
    var barcodeeResult = await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = await barcodeeResult.Content.ReadAsStringAsync();
        StateHasChanged();
    }
}
[JSInvokable]
public async Task ProcessImage(string imageString)
{
    // Create an image object containing the base64 data
    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;

    // Serialize image object to JSON
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);

    // Send image data to server-side API for processing
    var barcodeeResult = await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = await barcodeeResult.Content.ReadAsStringAsync();
        StateHasChanged();
    }
}
<JSInvokable>
Public Async Function ProcessImage(ByVal imageString As String) As Task
	' Create an image object containing the base64 data
	Dim imageObject = New CamImage()
	imageObject.imageDataBase64 = imageString

	' Serialize image object to JSON
	Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)

	' Send image data to server-side API for processing
	Dim barcodeeResult = Await Http.PostAsJsonAsync("Ironsoftware/ReadBarCode", imageObject)
	If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
		QRCodeResult = Await barcodeeResult.Content.ReadAsStringAsync()
		StateHasChanged()
	End If
End Function
$vbLabelText   $csharpLabel

Elle gère l'envoi de l'image encodée de getFrame() en JavaScript à une API côté serveur pour le traitement.

Ensuite, nous devons appeler cette fonction JavaScript lorsque le bouton Capturer l'Image est cliqué. Souvenez-vous, notre bouton recherche une fonction de gestion 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 Function
$vbLabelText   $csharpLabel

Extraction de l'Image Capturée avec IronBarcode

Ajoutez le package NuGet IronBarcode au projet serveur :

dotnet add package IronBarCode

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 scannée, nous effectuons un prétraitement de l'image et l'envoyons à 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 alors accessible à partir de la propriété Value de l'objet BarcodeResult.

[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
    {
        // Decode the base64 image data
        var splitObject = imageData.imageDataBase64.Split(',');
        byte[] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

        // Set IronBarcode license key (replace 'Key' with actual key)
        IronBarCode.License.LicenseKey = "Key";

        using (var ms = new MemoryStream(imagebyteData))
        {
            // Convert byte array to Image
            Image barcodeImage = Image.FromStream(ms);
            // Read barcode from Image
            var result = BarcodeReader.Read(barcodeImage);
            if (result == null || result.Value == null)
            {
                return $"{DateTime.Now}: Barcode is Not Detected";
            }

            return $"{DateTime.Now}: Barcode is ({result.Value})";
        }
    }
    catch (Exception ex)
    {
        return $"Exception: {ex.Message}";
    }
}

// Model to encapsulate the base64 image data
public class CamImage
{
    public string imageDataBase64 { get; set; }
}
[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
    {
        // Decode the base64 image data
        var splitObject = imageData.imageDataBase64.Split(',');
        byte[] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject[1] : splitObject[0]);

        // Set IronBarcode license key (replace 'Key' with actual key)
        IronBarCode.License.LicenseKey = "Key";

        using (var ms = new MemoryStream(imagebyteData))
        {
            // Convert byte array to Image
            Image barcodeImage = Image.FromStream(ms);
            // Read barcode from Image
            var result = BarcodeReader.Read(barcodeImage);
            if (result == null || result.Value == null)
            {
                return $"{DateTime.Now}: Barcode is Not Detected";
            }

            return $"{DateTime.Now}: Barcode is ({result.Value})";
        }
    }
    catch (Exception ex)
    {
        return $"Exception: {ex.Message}";
    }
}

// Model to encapsulate the base64 image data
public class CamImage
{
    public string imageDataBase64 { get; set; }
}
<HttpPost>
<Route("ReadBarCode")>
Public Function ReadBarCode(ByVal imageData As CamImage) As String
	Try
		' Decode the base64 image data
		Dim splitObject = imageData.imageDataBase64.Split(","c)
		Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject(1), splitObject(0)))

		' Set IronBarcode license key (replace 'Key' with actual key)
		IronBarCode.License.LicenseKey = "Key"

		Using ms = New MemoryStream(imagebyteData)
			' Convert byte array to Image
			Dim barcodeImage As Image = Image.FromStream(ms)
			' Read barcode from Image
			Dim result = BarcodeReader.Read(barcodeImage)
			If result Is Nothing OrElse result.Value Is Nothing Then
				Return $"{DateTime.Now}: Barcode is Not Detected"
			End If

			Return $"{DateTime.Now}: Barcode is ({result.Value})"
		End Using
	Catch ex As Exception
		Return $"Exception: {ex.Message}"
	End Try
End Function

' Model to encapsulate the base64 image data
Public Class CamImage
	Public Property imageDataBase64() As String
End Class
$vbLabelText   $csharpLabel

Vous pouvez trouver le projet d'exemple ici.

Questions Fréquemment Posées

Comment puis-je intégrer une bibliothèque de codes-barres dans un projet Blazor ?

Pour intégrer une bibliothèque de codes-barres dans un projet Blazor, installez le package NuGet approprié, configurez un projet serveur Blazor, activez la prise en charge de la webcam avec JavaScript, capturez des images, et décodez-les en utilisant les méthodes de lecture de code-barres de la bibliothèque.

Comment puis-je activer la prise en charge de la webcam dans une application Blazor ?

Activez la prise en charge de la webcam en ajoutant un fichier JavaScript à votre projet Blazor. Le fichier doit contenir des fonctions pour accéder et diffuser la vidéo de la webcam, qui peuvent être invoquées depuis Blazor en utilisant l'interopérabilité JS.

Quel JavaScript est nécessaire pour accéder à la webcam ?

Le JavaScript devrait inclure une fonction comme initializeCamera() qui utilise navigator.mediaDevices.getUserMedia pour demander l'accès à la caméra et diffuser la vidéo à un élément vidéo HTML.

Comment capturer et traiter une image de la webcam dans Blazor ?

Écrivez une fonction JavaScript pour capturer l'image vidéo actuelle, la convertir en image codée en base64, et l'envoyer à une méthode C# en utilisant l'interopérabilité JS de Blazor. La méthode C# peut alors traiter l'image pour la lecture des codes-barres.

Comment puis-je lire des codes-barres dans un projet Blazor ?

Vous pouvez lire des codes-barres en décodant une chaîne d'image base64 dans une méthode API côté serveur en utilisant la classe de lecteur de bibliothèque de codes-barres, qui extrait la valeur du code-barres de l'image.

Quelles sont les conditions préalables à l'utilisation d'une bibliothèque de codes-barres dans Blazor ?

Assurez-vous d'avoir configuré un projet serveur Blazor, d'avoir installé le package NuGet nécessaire, et d'avoir configuré JavaScript pour gérer l'entrée de la webcam. Vous avez également besoin d'une clé de licence valide pour la bibliothèque de codes-barres.

Comment envoyer les images capturées au serveur dans Blazor ?

Envoyez des images capturées au serveur en invoquant une méthode C# avec les données de l'image en utilisant DotNetObjectReference en JavaScript, ce qui appelle la méthode avec la chaîne d'image base64.

Cette bibliothèque de codes-barres peut-elle gérer des QR codes ?

Oui, la bibliothèque de codes-barres peut créer, lire et gérer à la fois les codes-barres et les QR codes dans des applications .NET, y compris celles construites avec Blazor.

Où puis-je trouver un exemple de projet Blazor utilisant une bibliothèque de codes-barres ?

Un exemple de projet Blazor utilisant la bibliothèque de codes-barres est disponible en téléchargement à partir du lien fourni dans la section conclusion de l'article.

Curtis Chau
Curtis Chau
  Discutez maintenant avec l'équipe d'ingénierie
Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes ...

Lire la suite
Prêt à commencer?
Nuget Téléchargements 1,935,276 | Version : 2025.11 vient de sortir