Blazor で IronBarcode を使用する

Q: Webカメラにアクセスするには、ど for JavaScriptが必要ですか？

JavaScriptには、カメラへのアクセスをリクエストし、ビデオをHTMLビデオ要素にストリームするために navigator.mediaDevices.getUserMedia を使用する initializeCamera() のような関数を含める必要があります。

Q: Blazorでキャプチャした画像をサーバーに送信する方法は？

キャプチャした画像をJavaScriptでの DotNetObjectReference を使用して画像データを含むC#メソッドを呼び出すことでサーバーに送信し、base64画像文字列をメソッドに呼び出します。

Curtis Chau

Updated: 2026年6月29日

この操作方法記事には、Blazorプロジェクト内でIronBarcodeを統合するための詳細な手順が含まれています。例として、Blazorアプリでユーザーのウェブカメラからキャプチャされたバーコード/QRをスキャンするためにIronBarcodeを使用します。

Blazorでバーコードスキャナーを使う方法

Blazor でバーコードをスキャンするための C# ライブラリをインストールする
Blazorサーバープロジェクトを作成し、新しいRazorコンポーネントを追加します
JavaScriptを使用してWebカメラを有効にする
画像をサーバーに送信するための画像キャプチャ方法を設定します
BarcodeReader.Readメソッドを使用してバーコードをデコードする

Blazorプロジェクトを作成

Visual Studioを開く => 新しいプロジェクトを作成 => Blazorサーバーアプリ：

プロジェクト名と場所を設定：

.NET 6フレームワーク（または他の最新の標準.NETバージョン）を選択：

そして準備完了です：

ウェブカメラサポートを追加するには、新しいRazorコンポーネントを追加：

名前をつけて、_Add_をクリック：

JavaScriptでウェブカメラ機能を有効にする

このアプリはユーザーのウェブカメラを使用するため、プライバシーのためにクライアント側で処理を行う必要があります。プロジェクトにJavaScriptファイルを追加してウェブカメラ機能を処理し、webcam.jsと名付けます:

webcam.jsの参照を含めるのを忘れないでください:

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

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

HTML

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

ユーザーのウェブカメラを開く必要があります。ページが読み込まれるときにこれを実行するため、OnInitializedAsync()メソッドをオーバーライドしてください。前に書いたJavaScriptのinitializeCamera()関数を呼び出します。

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

次に、ウェブカメラのビデオストリームを実行するHTMLタグを追加します：

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

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

HTML

画像をキャプチャ

ウェブカメラのビデオフィードからフレームをキャプチャするために、webcam.jsで別 for JavaScript関数を書きましょう。この関数はソースビデオからキャンバスに現在のフレームを描画します。

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

この関数はフレームをキャプチャし、それをbase64にエンコードしてから、ProcessImage()と呼ばれるC#のメソッドにエンコードされた画像を送信します。 ProcessImage()メソッドは次のとおりです: エンコードされた画像をサーバーサイドのAPIに送信して処理します。

[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

JavaScriptのgetFrame()からサーバーサイドのAPIにエンコードされた画像を送信して処理します。

次に、こ for JavaScript関数をフレームをキャプチャボタンがクリックされたときに呼び出す必要があります。我々のボタンは、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でキャプチャした画像を抽出

サーバープロジェクトにIronBarcode NuGetパッケージを追加します：

> dotnet add package IronBarCode

dotnet add package IronBarCode

次に、サーバープロジェクトでAPIメソッドを追加し、エンコードされた画像を処理し、バーコード/QR値を抽出します。以下のコードはBlazorプロジェクトにバーコード読み取り機能を追加します。スキャンした画像から、画像の前処理を行い、FromStreamメソッドに入力します。 Imageオブジェクトを、BlazorでバーコードをスキャンするためにBarcodeReaderクラス内のメソッドに渡します。 BarcodeResultオブジェクトのValueプロパティから結果のバーコード値にアクセスできます。

[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

サンプルプロジェクトはここで見つけることができます。

よくある質問

Blazorプロジェクトにバーコードライブラリを統合する方法は？

Blazorプロジェクトにバーコードライブラリを統合するには、適切なNuGetパッケージをインストールし、Blazorサーバープロジェクトをセットアップし、JavaScriptでWebカメラサポートを有効にして、画像をキャプチャしてライブラリのバーコード読み取りメソッドを使用してデコードします。

BlazorアプリでWebカメラサポートを有効にする方法は？

JavaScriptファイルをBlazorプロジェクトに追加してWebカメラサポートを有効にします。このファイルには、Webカメラビデオをアクセスおよびストリームするための関数が含まれ、BlazorからJSインタープリタで呼び出すことができます。

Webカメラにアクセスするには、ど for JavaScriptが必要ですか？

JavaScriptには、カメラへのアクセスをリクエストし、ビデオをHTMLビデオ要素にストリームするためにnavigator.mediaDevices.getUserMediaを使用するinitializeCamera()のような関数を含める必要があります。

BlazorでWebカメラからフレームをキャプチャして処理する方法は？

現在のビデオフレームをキャプチャし、base64エンコードされた画像に変換して、それを使用してC#メソッドに送信するJavaScript関数を記述します。その後、C#メソッドで画像をバーコードリーティングのために処理できます。

Blazorプロジェクトでバーコードを読み取る方法は？

サーバーサイドのAPIメソッドでbase64画像文字列をデコードし、バーコードライブラリのリーダークラスを使用して画像からバーコード値を抽出することで、バーコードを読み取ることができます。

Blazorでバーコードライブラリを使用するための前提条件は何ですか？

Blazorサーバープロジェクトをセットアップし、必要なNuGetパッケージをインストールし、Webカメラ入力を処理するJavasciptを設定します。また、バーコードライブラリの有効なライセンスキーが必要です。

Blazorでキャプチャした画像をサーバーに送信する方法は？

キャプチャした画像をJavaScriptでのDotNetObjectReferenceを使用して画像データを含むC#メソッドを呼び出すことでサーバーに送信し、base64画像文字列をメソッドに呼び出します。

このバーコードライブラリはQRCodeを処理できますか？

はい、バーコードライブラリは.NETアプリケーションでバーコードとQRCodeの両方を作成、読み取り、管理できます。

バーコードライブラリを使用したBlazorプロジェクトのサンプルはどこで見つけられますか？

記事の結論セクションに提供されたリンクからダウンロード可能なバーコードライブラリを使用したサンプルBlazorプロジェクトがあります。

Curtis Chau

今すぐエンジニアリングチームとチャット

テクニカルライター

Curtis Chauは、カールトン大学でコンピュータサイエンスの学士号を取得し、Node.js、TypeScript、JavaScript、およびReactに精通したフロントエンド開発を専門としています。直感的で美しいユーザーインターフェースを作成することに情熱を持ち、Curtisは現代のフレームワークを用いた開発や、構造の良い視覚的に魅力的なマニュアルの作成を楽しんでいます。

...

詳しく読む