Utilisation d'IronBarcode avec Blazor

Q: 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.

Curtis Chau

Updated: 29 juin 2026

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.

Comment utiliser un lecteur de codes-barres dans Blazor

Installer la bibliothèque C# pour scanner les codes-barres dans Blazor
Créez un projet serveur Blazor et ajoutez un nouveau composant Razor
Activez la webcam à l'aide de JavaScript
Configurez la méthode de capture d'images pour envoyer les images au serveur.
Décodez les codes-barres à l'aide de la méthode BarcodeReader.Read

Créer un Projet Blazor

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

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

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

Et nous sommes prêts :

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

Donnez-lui un nom, puis cliquez sur Ajouter :

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 :

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 remplaçant 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

Protected Overrides Async Function OnInitializedAsync() As Task
	Await JSRuntime.InvokeVoidAsync("initializeCamera")
End Function

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 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(imageString As String) As Task
    ' Create an image object containing the base64 data
    Dim imageObject As 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

<JSInvokable>
Public Async Function ProcessImage(imageString As String) As Task
    ' Create an image object containing the base64 data
    Dim imageObject As 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

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

Ensuite, nous devons appeler cette fonction JavaScript lorsque le bouton Capturer l'Image est cliqué. Rappelez-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

Private Async Function CaptureFrame() As Task
	Await JSRuntime.InvokeAsync(Of String)("getFrame", DotNetObjectReference.Create(Me))
End Function

Extraction de l'Image Capturée avec IronBarcode

Ajoutez le package NuGet IronBarcode au projet serveur :

> dotnet add package IronBarCode

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'intégrons 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 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

<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

Vous pouvez trouver le projet d'exemple [ici](/static-assets/barcode/faq/blazor/Blazor IronBarcodeWithCAM.zip).

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

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 et créer des manuels bien structurés et visuellement attrayants.

...