1. IronBarcode
  2. Comment faire
  3. Utilisation d'IronBarcode avec Blazor

Tutoriel sur le scanner de codes-barres Blazor utilisant IronBarcode

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronBarcode est compatible avec le projet Blazor et le tutoriel suivant montre comment utiliser IronBarcode avec Blazor.

Vous pouvez facilement capturer une image de QR ou de code-barres à partir de la webcam d'un utilisateur. Avec Blazor et JavaScript, la véritable puissance intervient lorsque vous transférez l'image du QR ou du code-barres dans votre code C#, ce qui vous permet d'utiliser la bibliothèque IronBarcode pour extraire la valeur du code de l'image. Dans ce tutoriel, nous utiliserons Blazor et IronBarcode pour extraire l'image capturée pour une valeur QR ou un code-barres à partir de la webcam d'un utilisateur.

Comment utiliser le scanner de codes-barres dans Blazor

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

Créer un projet Blazor

Ouvrez Visual Studio => Créez un nouveau projet => Choisissez Blazor Server App.

CreateBlazorProject related to Créer un projet Blazor

Définir un nom

ProjectName related to Créer un projet Blazor

Sélectionner le Framework .NET 6

SelectFramework related to Créer un projet Blazor

Et nous sommes prêts

MainScreen related to Créer un projet Blazor

Ajout d'un nouveau composant Razor pour la came

NewRazorComponent related to Créer un projet Blazor

Donnez-lui un nom

NewRazorComponentName related to Créer un projet Blazor

Ajouter JavaScript pour activer la webcam

Comme cette application fonctionne avec la webcam de l'utilisateur, je préfère que tout se passe côté client pour des raisons de confidentialité. Ajoutez un fichier javascript pour toutes les fonctions de la webcam et nommez-le webcam.js.

JavascriptFileLocation related to Ajouter JavaScript pour activer la webcam

N'oubliez pas d'inclure le fichier javascript dans le fichier index.html.

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

Ajouter la fonction javascript d'initialisation de la webcam au fichier 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.com
VB   C#

Nous devons démarrer la webcam de l'utilisateur. Allez-y et faites-le au chargement de la page en surchargeant la fonction 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
VB   C#

Ajoutez maintenant les balises html qui permettront de lire la vidéo.

<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 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);
}
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);
}
HTML

Il capture une image, l'encode en 64 bits de base et envoie l'image encodée à la fonction ProcessImage qui 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 Sub
VB   C#

Nous devons maintenant appeler cette fonction js lorsque le bouton Capture Frame est cliqué. Rappelez-vous que notre bouton recherche une méthode de traitement nommé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
VB   C#

IronBarcode Extraction d'une image capturée

Ajouter IronBarcode au projet de serveur.

Install-Package BarCode

Maintenant, dans le projet serveur, ajoutez l'API pour traiter l'image encodée et extraire la valeur du code QR ou du code-barres. Le code ci-dessous transforme ce projet Blazor en lecteur de codes-barres. À partir de l'image numérisée, nous effectuons un prétraitement et l'introduisons 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
        {
            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; }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Vous pouvez trouver un exemple de projetici.