Verwendung von IronBarcode mit Blazor

Q: Welches JavaScript wird benötigt, um auf die Webcam zuzugreifen?

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.

Curtis Chau

Updated: 29. Juni 2026

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.

Verwendung von BarCode Scanner in Blazor

Installation einer C#-Bibliothek zum Scannen von BarCodes in Blazor
Erstellen Sie ein Blazor-Serverprojekt und fügen Sie eine neue Razor-Komponente hinzu
Aktivieren Sie die Webcam mit JavaScript
Konfigurieren Sie die Methode Bilderfassung, um Bilder an den Server zu senden
Dekodieren Sie BarCodes mit der Methode BarcodeReader.Read

Blazor-Projekt erstellen

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

Geben Sie Projektnamen und Speicherort an:

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

Und wir sind bereit:

Fügen Sie eine neue Razor-Komponente für Webcam-Unterstützung hinzu:

Benennen Sie es und klicken Sie auf Hinzufügen:

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 eine JavaScript-Datei zum Projekt hinzu, um die Webcam-Funktionalität zu verwalten, und benennen Sie sie webcam.js:

Vergessen Sie nicht, einen Verweis auf webcam.js in index.html einzuschließen:

<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. Gehen Sie vor und tun Sie dies, wenn die Seite lädt, indem Sie die OnInitializedAsync()-Methode von Index.razor überschreiben. Rufen Sie die JavaScript-Funktion initializeCamera() auf, 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

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

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 einen Rahmen 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 einen Rahmen auf, kodiert ihn in base64 und sendet das kodierte Bild dann an eine Methode in C# namens ProcessImage(). Die Methode ProcessImage() ist die folgende: Sie sendet das kodierte Bild an eine serverseitige API, um es zu verarbeiten.

[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

Es behandelt 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, 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

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

IronBarcode entnimmt das aufgenommene Bild

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

> dotnet add package IronBarCode

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 Methode FromStream ein. Übergeben Sie das Bild-Objekt an eine Methode in der Klasse BarcodeReader, 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

<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

Sie können das Beispielprojekt [hier](/static-assets/barcode/faq/blazor/Blazor IronBarcodeWithCAM.zip) 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.

Welches JavaScript wird benötigt, um auf die Webcam zuzugreifen?

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 dekodieren, die die Lese-Klasse einer Barcode-Bibliothek verwendet, um den Barcode-Wert aus dem Bild zu extrahieren.

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

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 Handbücher.

...