Korzystanie z IronBarcode w Blazorze

Q: Jaki kod JavaScript jest potrzebny, aby uzyskać dostęp do kamery internetowej?

Kod JavaScript powinien zawierać funkcję typu initializeCamera() , która wykorzystuje navigator.mediaDevices.getUserMedia do uzyskania dostępu do kamery i przesyłania strumienia wideo do elementu wideo HTML.

Curtis Chau

Updated: 29 czerwca 2026

Ten artykuł instruktażowy zawiera szczegółowe wskazówki dotyczące integracji IronBarcode z projektem Blazor. Jako przykład wykorzystamy IronBarcode w aplikacji Blazor do skanowania kodów kreskowych/QR uchwyconych przez kamerę internetową użytkownika.

Jak korzystać ze skanera kodów kreskowych w Blazor

Zainstaluj bibliotekę C# do skanowania kodów kreskowych w Blazor
Utwórz projekt serwera Blazor i dodaj nowy komponent Razor
Włącz kamerę internetową za pomocą JavaScript
Skonfiguruj metodę przechwytywania obrazów, aby wysyłać obrazy na serwer
Odczytuj kody kreskowe za pomocą metody BarcodeReader.Read

Utwórz projekt Blazor

Otwórz Visual Studio => Utwórz nowy projekt => Aplikacja serwerowa Blazor:

Ustal nazwę i lokalizację projektu:

Wybierz platformę .NET Framework 6 (lub dowolną inną nowoczesną wersję .NET Standard):

I gotowi:

Aby dodać obsługę kamery internetowej, dodaj nowy komponent Razor:

Nadaj mu nazwę, a następnie kliknij Dodaj:

Włączanie funkcji kamery internetowej za pomocą JavaScript

Ponieważ ta aplikacja współpracuje z kamerą internetową użytkownika, ze względu na prywatność powinna obsługiwać dane po stronie klienta. Dodaj plik JavaScript do projektu, aby obsluzyc funkcjonalnosc kamery internetowej i nazwij go webcam.js:

Nie zapomnij dolaczyc odniesienia do webcam.js w index.html:

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

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

HTML

Dodaj nastepujacy kod do 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

Musimy uruchomić kamerę internetową użytkownika. Wykonaj to, gdy strona sie laduje, przeciazajac metode OnInitializedAsync() klasy Index.razor. Wywolaj funkcje JavaScript initializeCamera(), ktora napisales wczesniej.

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

Teraz dodaj tagi HTML, które uruchomią strumień wideo z kamery internetowej:

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

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

HTML

Uchwyć obraz

Aby przechwycic klatke z wideo z kamery internetowej, napiszmy kolejna funkcje JavaScript w webcam.js. Ta funkcja narysuje bieżącą klatkę z filmu źródłowego na obszarze docelowym.

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

Ta funkcja przechwyci klatke, zakoduje ja w base64, a nastepnie wysle zakodowany obraz do metody w C# o nazwie ProcessImage(). Metoda ProcessImage() jest nastepujaca: wysyla zakodowany obraz do API po stronie serwera w celu jego przetworzenia.

[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

Obsluguje wysylanie zakodowanego obrazu z getFrame() w JavaScript do API po stronie serwera w celu przetworzenia.

Następnie musimy wywołać tę funkcję JavaScript po kliknięciu przycisku Capture Frame. Pamietaj, nasz przycisk szuka funkcji obslugujacej o nazwie 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 – wyodrębnianie uchwyconego obrazu

Dodaj pakiet IronBarcode NuGet do projektu serwera:

> dotnet add package IronBarCode

dotnet add package IronBarCode

Teraz w projekcie serwera dodaj metodę API do przetwarzania zakodowanego obrazu i wyodrębniania wartości BarCode/QR. Poniższy kod dodaje funkcję odczytu kodów kreskowych do projektu Blazor. Z zeskanowanego obrazu wykonujemy wstepne przetwarzanie obrazow i przekazujemy go do metody FromStream. Przekaz obiekt Image do metody w klasie BarcodeReader, aby zeskanowac kod kreskowy w Blazor. Wynikowa wartość kodu kreskowego jest następnie dostępna za pośrednictwem właściwości Value obiektu 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

Przykładowy projekt można znaleźć [tutaj](/static-assets/barcode/faq/blazor/Blazor IronBarcodeWithCAM.zip).

Często Zadawane Pytania

Jak zintegrować bibliotekę kodów kreskowych z projektem Blazor?

Aby zintegrować bibliotekę kodów kreskowych z projektem Blazor, zainstaluj odpowiedni pakiet NuGet, skonfiguruj projekt serwera Blazor, włącz obsługę kamery internetowej za pomocą JavaScript, przechwytuj obrazy i dekoduj je przy użyciu metod odczytu kodów kreskowych biblioteki.

Jak włączyć obsługę kamery internetowej w aplikacji Blazor?

Włącz obsługę kamery internetowej, dodając plik JavaScript do swojego projektu Blazor. Plik powinien zawierać funkcje umożliwiające dostęp do obrazu z kamery internetowej i jego strumieniowanie, które można wywołać z Blazor za pomocą interopu JS.

Jaki kod JavaScript jest potrzebny, aby uzyskać dostęp do kamery internetowej?

Kod JavaScript powinien zawierać funkcję typu initializeCamera(), która wykorzystuje navigator.mediaDevices.getUserMedia do uzyskania dostępu do kamery i przesyłania strumienia wideo do elementu wideo HTML.

Jak przechwycić i przetworzyć klatkę z kamery internetowej w Blazorze?

Napisz funkcję JavaScript, która przechwytuje bieżącą klatkę wideo, konwertuje ją na obraz zakodowany w base64 i wysyła do metody C# przy użyciu interoperacyjności JS w Blazorze. Metoda C# może następnie przetworzyć obraz w celu odczytania kodu BARCODE.

Jak odczytać kody kreskowe w projekcie Blazor?

BARCODE można odczytać poprzez dekodowanie ciągu obrazu base64 w metodzie API po stronie serwera przy użyciu klasy czytnika biblioteki BARCODE, która wyodrębnia wartość kodu BARCODE z obrazu.

Jakie są wymagania wstępne dotyczące korzystania z biblioteki kodów kreskowych w Blazorze?

Upewnij się, że masz skonfigurowany projekt serwera Blazor, zainstalowany niezbędny pakiet NuGet oraz skonfigurowany JavaScript do obsługi danych z kamery internetowej. Potrzebny jest również ważny klucz licencyjny do biblioteki BarCode.

Jak wysłać przechwycone obrazy na serwer w Blazorze?

Wyślij przechwycone obrazy na serwer, wywołując metodę C# z danymi obrazu przy użyciu DotNetObjectReference w JavaScript, która wywołuje metodę z ciągiem obrazu w formacie base64.

Czy ta biblioteka BarCode obsługuje kody QR?

Tak, biblioteka kodów kreskowych umożliwia tworzenie, odczytywanie i zarządzanie zarówno kodami kreskowymi, jak i kodami QR w aplikacjach .NET, w tym w tych zbudowanych przy użyciu Blazor.

Gdzie mogę znaleźć przykładowy projekt Blazor wykorzystujący bibliotekę BARCODE?

Przykładowy projekt Blazor wykorzystujący bibliotekę BarCode można pobrać, klikając link podany w sekcji podsumowania artykułu.

Curtis Chau

Czat z zespołem inżynierów teraz

Autor tekstów technicznych

Curtis Chau posiada tytuł licencjata z informatyki (Uniwersytet Carleton) i specjalizuje się w front-endowym rozwoju, z ekspertką w Node.js, TypeScript, JavaScript i React. Pasjonuje się tworzeniem intuicyjnych i estetycznie przyjemnych interfejsów użytkownika, Curtis cieszy się pracą z nowoczesnymi frameworkami i tworzeniem dobrze zorganizowanych, atrakcyjnych wizualnie podręczników.

...

Czytaj więcej