Blazor で IronBarcode を使用する
この記事では、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 という名前を付けます。

index.html に webcam.js への参照を含めることを忘れないでください。
<script src="webcam.js"></script>
<script src="webcam.js"></script>
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);
}
}
ユーザーのウェブカメラを開く必要があります。 先に進み、Index.razor の 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
次に、ウェブカメラのビデオストリームを実行するHTMLタグを追加します:
<section class="section">
<video autoplay id="video" width="320"></video>
</section>
<section class="section">
<video autoplay id="video" width="320"></video>
</section>
画像をキャプチャ
ウェブカメラのビデオフィードからフレームをキャプチャするには、webcam.js に別の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);
}
この関数はフレームをキャプチャし、それを 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(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
これは、 JavaScriptの getFrame() からエンコードされた画像をサーバー側 API に送信して処理する処理を行います。
次に、この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
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; }
}
<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プロジェクトがあります。

