Verwendung von IronBarcode mit Blazor

Translated

View the article in English

Dieser Anleitung enthält detaillierte Anweisungen zur Integration von IronBarcode in ein Blazor-Projekt. Als Beispiel verwenden wir IronBarcode in einer Blazor-App, um Barcodes/QR-Codes zu scannen, die von der Webcam eines Nutzers erfasst wurden.

Verwendung des Barcode-Scanners in Blazor

Installieren Sie die C#-Bibliothek, um Barcodes in Blazor zu scannen.
Erstellen Sie ein Blazor-Serverprojekt und fügen Sie eine neue Razor-Komponente hinzu.
Aktivieren der Webcam mit JavaScript
Konfigurieren Sie die bildaufzeichnung Methode, um Bilder an den Server zu senden
Barcode-Dekodierung unter Verwendung der BarcodeReader.Read methode

Blazor-Projekt erstellen

Öffnen Sie Visual Studio => Neues Projekt erstellen => Blazor Server-App:

CreateBlazorProject related to Blazor-Projekt erstellen

Legen Sie einen Projektnamen und einen Speicherort fest:

ProjectName related to Blazor-Projekt erstellen

Wählen Sie das .NET 6-Framework aus.(oder eine andere moderne Standard-.NET-Version):

SelectFramework related to Blazor-Projekt erstellen

Und wir sind bereit:

MainScreen related to Blazor-Projekt erstellen

Um Webcam-Unterstützung hinzuzufügen, fügen Sie eine neue Razor-Komponente hinzu:

NewRazorComponent related to Blazor-Projekt erstellen

Geben Sie ihm einen Namen und klicken Sie dann auf Hinzufügen:

NewRazorComponentName related to Blazor-Projekt erstellen

Webcam-Funktionalität mit JavaScript aktivieren

Da diese App mit der Webcam eines Benutzers arbeitet, sollte die Verarbeitung zur Wahrung der Privatsphäre auf der Client-Seite erfolgen. Fügen Sie dem Projekt eine JavaScript-Datei hinzu, um die Webcam-Funktionalität zu verwalten, und benennen Sie sie webcam.js:

JavascriptFileLocation related to Webcam-Funktionalität mit JavaScript aktivieren

Vergessen Sie nicht, einen Verweis auf webcam.js in index.html einzufügen:

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

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

HTML

Fügen Sie den folgenden Code zu webcam.js hinzu:

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

JAVASCRIPT

Wir müssen die Webcam des Benutzers öffnen. Führen Sie dies beim Laden der Seite aus, indem Sie die OnInitializedAsync überschreiben.()Methode vonIndex.razor. Rufen Sie das JavaScript initializeCamera auf()` Funktion, die Sie zuvor geschrieben haben.

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#

Fügen Sie nun HTML-Tags hinzu, die den Webcam-Videostream ausführen:

<section class="section">
    <video autoplay id="video" width="320"></video>
</section>

<section class="section">
    <video autoplay id="video" width="320"></video>
</section>

HTML

Erfassen Sie das Bild

Um ein Bild aus dem Webcam-Videostream zu erfassen, schreiben wir eine weitere JavaScript-Funktion in webcam.js. Mit dieser Funktion wird das aktuelle Bild von der Videoquelle auf die Leinwand gezeichnet.

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

JAVASCRIPT

Diese Funktion wird einen Frame aufnehmen, ihn in Base64 kodieren und dann das kodierte Bild an eine Methode in C# namens ProcessImage senden.(). DerProcessImage()Methode ist die folgende: Sie sendet das codierte Bild an die Server-Side-API, um es zu verarbeiten.

[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#

Es übernimmt das Senden des codierten Bildes von getFrame() in JavaScript an eine serverseitige API zur Verarbeitung.

Als Nächstes müssen wir diese JavaScript-Funktion aufrufen, wenn die Capture Frame-Schaltfläche geklickt wird. Denken Sie daran, unser Button sucht nach einer Handler-Funktion namens 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 Erfasstes Bild extrahieren

Fügen Sie das IronBarcode NuGet-Paket zum Serverprojekt hinzu:

Install-Package BarCode

Fügen Sie nun im Serverprojekt eine API-Methode hinzu, um das kodierte Bild zu verarbeiten und den Barcode/QR-Wert zu extrahieren. Der folgende Code fügt dem Blazor-Projekt eine Barcode-Lesefunktion hinzu. Aus dem gescannten Bild führen wir eine Bildvorverarbeitung durch und geben es in die FromStream-Methode ein. Übergeben Sie das Image-Objekt an eine Methode in der BarcodeReader-Klasse, um den Barcode in Blazor zu scannen. Der resultierende Barcode-Wert ist dann über die Value-Eigenschaft des BarcodeResult-Objekts zugänglich.

[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 Class

VB C#

Sie können das Beispielprojekt findenhier.