1. IronBarcode
  2. 始める
  3. BlazorでのIronBarcodeの使用
Blazorでバーコードスキャナーを使用する方法 | IronBarcode

Blazor で IronBarcode を使用する

カーティス・チャウ
カーティス・チャウ
更新日:
This article was translated from English: Does it need improvement?
Translated
View the article in English

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

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

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

Blazorプロジェクトを作成

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

CreateBlazorProject related to Blazorプロジェクトを作成

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

ProjectName related to Blazorプロジェクトを作成

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

SelectFramework related to Blazorプロジェクトを作成

そして準備完了です：

MainScreen related to Blazorプロジェクトを作成

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

NewRazorComponent related to Blazorプロジェクトを作成

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

NewRazorComponentName related to Blazorプロジェクトを作成

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

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

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

index.html に 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

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

protected override async Task OnInitializedAsync()
{
    await JSRuntime.InvokeVoidAsync("initializeCamera");
}
protected override async Task OnInitializedAsync()
{
    await JSRuntime.InvokeVoidAsync("initializeCamera");
}
$vbLabelText   $csharpLabel

次に、ウェブカメラのビデオストリームを実行する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();
    }
}
$vbLabelText   $csharpLabel

これは、 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));
}
$vbLabelText   $csharpLabel

IronBarcodeでキャプチャした画像を抽出

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

dotnet add package IronBarCode

次に、サーバープロジェクトでAPIメソッドを追加し、エンコードされた画像を処理し、バーコード/QR値を抽出します。 以下のコードはBlazorプロジェクトにバーコード読み取り機能を追加します。 スキャンした画像から画像の前処理を実行し、FromStream メソッドに入力します。 Blazorでバーコードをスキャンするには、 Imageオブジェクトを 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; }
}
$vbLabelText   $csharpLabel

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

よくある質問

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

開発以外にも、CurtisはIoT（Internet of Things）への強い関心を持ち、ハードウェアとソフトウェアの統合方法を模索しています。余暇には、ゲームをしたりDiscordボットを作成したりして、技術に対する愛情と創造性を組み合わせています。

準備はできましたか？
Nuget ダウンロード 2,121,847 | バージョン: 2026.3 リリース
Still Scrolling Icon

まだスクロールしていますか?

すぐに証拠が欲しいですか? PM > Install-Package BarCode
サンプルを実行する 文字列が BarCode になるのを見る。