1. IronBarcode
  2. Loslegen
  3. Verwendung von IronBarcode mit Blazor
Wie man einen Barcode-Scanner in Blazor verwendet | IronBarcode

Using IronBarcode With Blazor

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

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

class="hsg-featured-snippet">

Wie man einen Barcode-Scanner in Blazor verwendet

  1. C#-Bibliothek installieren, um Barcodes in Blazor zu scannen
  2. Erstellen Sie ein Blazor-Serverprojekt und fügen Sie eine neue Razor-Komponente hinzu
  3. Aktivieren Sie die Webcam mit JavaScript
  4. Konfigurieren Sie die Bildaufnahme-Methode, um Bilder an den Server zu senden
  5. Dekodieren Sie Barcodes 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

Geben Sie einen Projektnamen und einen Speicherort an:

ProjectName related to Blazor-Projekt erstellen

Wählen Sie das .NET 6 Framework (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, dann klicken Sie 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 clientseitig aus Datenschutzgründen erfolgen. Fügen Sie dem Projekt eine JavaScript-Datei hinzu, um die Webcam-Funktionalität zu verarbeiten, 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 aufzunehmen:

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

// 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

Wir müssen die Webcam des Benutzers öffnen. Tun Sie dies beim Laden der Seite, indem Sie die OnInitializedAsync()-Methode von Index.razor überschreiben. Rufen Sie die zuvor geschriebene JavaScript-Funktion initializeCamera() auf.

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

Nun fügen Sie 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

Das Bild aufnehmen

Um ein Bild aus dem Webcam-Videostream aufzunehmen, schreiben wir eine weitere JavaScript-Funktion in webcam.js. Diese Funktion zeichnet das aktuelle Bild vom Quellvideo auf die Ziel-Leinwand.

// 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

Diese Funktion nimmt ein Bild auf, kodiert es in Base64 und sendet das kodierte Bild dann an eine C#-Methode namens ProcessImage(). Die ProcessImage()-Methode ist die folgende: Sie sendet das kodierte Bild an eine serverseitige API zur Verarbeitung.

[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

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

Als nächstes müssen wir diese JavaScript-Funktion aufrufen, wenn die Frame aufnehmen-Taste geklickt wird. Denken Sie daran, unsere Schaltfläche sucht nach einer Handlerfunktion 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
$vbLabelText   $csharpLabel

IronBarcode entnimmt das aufgenommene Bild

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

dotnet add package IronBarCode

Fügen Sie nun im Serverprojekt eine API-Methode hinzu, um das kodierte Bild zu verarbeiten und den Barcode/QR-Wert zu extrahieren. Der untenstehende Code fügt dem Blazor-Projekt die Barcode-Lesefunktionalität hinzu. Aus dem gescannten Bild führen wir eine Bildvorverarbeitung durch und geben es in die FromStream-Methode ein. Geben Sie das Bild-Objekt in eine Methode in der BarcodeReader-Klasse ein, 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
    {
        // 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

Sie können das Beispielprojekt hier finden.

Häufig gestellte Fragen

Wie kann ich eine Barcode-Bibliothek in ein Blazor-Projekt integrieren?

Um eine Barcode-Bibliothek in ein Blazor-Projekt zu integrieren, installieren Sie das entsprechende NuGet-Paket, richten Sie ein Blazor-Serverprojekt ein, aktivieren Sie die Webcam-Unterstützung mit JavaScript, erfassen Sie Bilder und dekodieren Sie diese mit den Barcode-Lesemethoden der Bibliothek.

Wie kann ich die Webcam-Unterstützung in einer Blazor-App aktivieren?

Aktivieren Sie die Webcam-Unterstützung, indem Sie eine JavaScript-Datei zu Ihrem Blazor-Projekt hinzufügen. Die Datei sollte Funktionen enthalten, um das Video der Webcam zuzugreifen und zu streamen, die von Blazor mit JS-Interop aufgerufen werden können.

Welche JavaScript-Funktionalitäten benötigt man für den Webcam-Zugriff?

Das JavaScript sollte eine Funktion wie initializeCamera() enthalten, die navigator.mediaDevices.getUserMedia verwendet, um Kamerazugriff anzufordern und das Video in ein HTML-Videoelement zu streamen.

Wie erfasse und verarbeite ich einen Rahmen von der Webcam in Blazor?

Schreiben Sie eine JavaScript-Funktion, die den aktuellen Video-Frame erfasst, in ein base64-kodiertes Bild konvertiert und an eine C#-Methode über Blazor's JS-Interop sendet. Die C#-Methode kann dann das Bild zur Barcode-Lesung verarbeiten.

Wie kann ich Barcodes in einem Blazor-Projekt lesen?

Sie können Barcodes lesen, indem Sie eine base64-Bildzeichenfolge in einer serverseitigen API-Methode mit einer Barcode-Bibliothek klassenweise dekodieren, die den Barcode-Wert aus dem Bild extrahiert.

Welche Voraussetzungen gibt es, um eine Barcode-Bibliothek in Blazor zu verwenden?

Stellen Sie sicher, dass Sie ein Blazor-Serverprojekt eingerichtet haben, das erforderliche NuGet-Paket installiert ist und JavaScript konfiguriert ist, um Webcameingaben zu verarbeiten. Sie benötigen auch einen gültigen Lizenzschlüssel für die Barcode-Bibliothek.

Wie kann ich erfasste Bilder in Blazor an den Server senden?

Senden Sie erfasste Bilder an den Server, indem Sie eine C#-Methode mit den Bilddaten unter Verwendung von DotNetObjectReference in JavaScript aufrufen, was die Methode mit der base64-Bildzeichenfolge aufruft.

Kann diese Barcode-Bibliothek QR-Codes verarbeiten?

Ja, die Barcode-Bibliothek kann sowohl Barcodes als auch QR-Codes innerhalb von .NET-Anwendungen erstellen, lesen und verwalten, einschließlich solcher, die mit Blazor erstellt wurden.

Wo finde ich ein Beispiel-Blazor-Projekt mit einer Barcode-Bibliothek?

Ein Beispiel-Blazor-Projekt mit der Barcode-Bibliothek steht zum Download im bereitgestellten Link im Abschlussteil des Artikels zur Verfügung.

Curtis Chau
Curtis Chau
  Jetzt mit dem Ingenieurteam chatten
Technischer Autor

Curtis Chau hat einen Bachelor-Abschluss in Informatik von der Carleton University und ist spezialisiert auf Frontend-Entwicklung mit Expertise in Node.js, TypeScript, JavaScript und React. Leidenschaftlich widmet er sich der Erstellung intuitiver und ästhetisch ansprechender Benutzerschnittstellen und arbeitet gerne mit modernen Frameworks sowie der Erstellung gut strukturierter, optisch ansprechender ...

Weiterlesen
Bereit anzufangen?
Nuget Downloads 1,935,276 | Version: 2025.11 gerade veröffentlicht