BlazorでIronBarcodeを使用する

Translated

View the article in English

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

Blazorでバーコードスキャナを使用する方法

BlazorでバーコードをスキャンするためのC#ライブラリをインストールする
Blazorサーバープロジェクトを作成し、新しいRazorコンポーネントを追加します。
JavaScriptを使用してWebカメラを有効にする
構成する画像キャプチャサーバーに画像を送信するメソッド
バーコードをデコードする際に使用する 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プロジェクトを作成

Webカメラのサポートを追加するには、新しいRazorコンポーネントを追加します。

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

名前を付けて、_追加_をクリックします。

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

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

このアプリはユーザーのウェブカメラと連携しているため、プライバシーの観点からクライアント側で処理を行うべきです。プロジェクトにWebカメラの機能を処理するための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;
async function initializeCamera() 
{
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");
    if (
        !"mediaDevices" in navigator 

        !"getUserMedia" in navigator.mediaDevices
        )
        {
            alert("Camera API is not available in your browser");
            return;
        }

    // video constraints
    const constraints = {
        video: {
            width: {
                min: 180
            },
            height: {
                min: 120
            },
        },
    };

    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try
    {
        videoStream = await navigator.mediaDevices.getUserMedia (constraints);    
        video.srcObject = videoStream;
    } 
    catch (err) 
    {
        alert("Could not access the camera" + err);
    }
}

// current video stream
let videoStream;
async function initializeCamera() 
{
    const canvas = document.querySelector("#canvas");
    const video = document.querySelector("#video");
    if (
        !"mediaDevices" in navigator 

        !"getUserMedia" in navigator.mediaDevices
        )
        {
            alert("Camera API is not available in your browser");
            return;
        }

    // video constraints
    const constraints = {
        video: {
            width: {
                min: 180
            },
            height: {
                min: 120
            },
        },
    };

    constraints.video.facingMode = useFrontCamera ? "user" : "environment";

    try
    {
        videoStream = await navigator.mediaDevices.getUserMedia (constraints);    
        video.srcObject = videoStream;
    } 
    catch (err) 
    {
        alert("Could not access the camera" + err);
    }
}

JAVASCRIPT

ユーザーのウェブカメラを開く必要があります。ページが読み込まれたときに OnInitializedAsync をオーバーライドしてこれを実行します。()Index.razorのmethod。 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

VB C#

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

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

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

HTML

画像をキャプチャ

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

function getFrame(dotNetHelper) 
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    let dataUrl = canvas.toDataURL("image/png");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}

function getFrame(dotNetHelper) 
{
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    canvas.getContext('2d').drawImage(video, 0, 0);
    let dataUrl = canvas.toDataURL("image/png");
    //Invoke ProcessImage Function and send DataUrl as a parameter to it 
    dotNetHelper.invokeMethodAsync('ProcessImage', dataUrl);
}

JAVASCRIPT

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

[JSInvokable]
public async void ProcessImage(string imageString)
{

    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    //Do image processing here
    var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
        StateHasChanged();
    }
}

[JSInvokable]
public async void ProcessImage(string imageString)
{

    var imageObject = new CamImage();
    imageObject.imageDataBase64 = imageString;
    var jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject);
    //Do image processing here
    var barcodeeResult = await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject);
    if (barcodeeResult.StatusCode == System.Net.HttpStatusCode.OK)
    {
        QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result;
        StateHasChanged();
    }
}

<JSInvokable>
Public Async Sub ProcessImage(ByVal imageString As String)

	Dim imageObject = New CamImage()
	imageObject.imageDataBase64 = imageString
	Dim jsonObj = System.Text.Json.JsonSerializer.Serialize(imageObject)
	'Do image processing here
	Dim barcodeeResult = Await Http.PostAsJsonAsync($"Ironsoftware/ReadBarCode", imageObject)
	If barcodeeResult.StatusCode = System.Net.HttpStatusCode.OK Then
		QRCodeResult = barcodeeResult.Content.ReadAsStringAsync().Result
		StateHasChanged()
	End If
End Sub

VB C#

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

次に、Capture Frame ボタンがクリックされたときに、この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

VB C#

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

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

Install-Package BarCode

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

[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
        {
            var splitObject = imageData.imageDataBase64.Split(',');
            byte [] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject [1] : splitObject [0]);
            IronBarCode.License.LicenseKey = "Key";

            using (var ms = new MemoryStream(imagebyteData))
            {
                Image barcodeImage = Image.FromStream(ms);
                var result = BarcodeReader.Read(barcodeImage);
                if (result == null 
 result.Value == null)
                {
                    return $"{DateTime.Now} : Barcode is Not Detetced";
                }

                return $"{DateTime.Now} : Barcode is ({result.Value})";
            }

        }
    catch (Exception ex)
        {
            return $"Exception is {ex.Message}";
        }
}

//Post Object 
public class CamImage
{
    public string imageDataBase64 { get; set; }
}

[HttpPost]
[Route("ReadBarCode")]
public string ReadBarCode(CamImage imageData)
{
    try
        {
            var splitObject = imageData.imageDataBase64.Split(',');
            byte [] imagebyteData = Convert.FromBase64String((splitObject.Length > 1) ? splitObject [1] : splitObject [0]);
            IronBarCode.License.LicenseKey = "Key";

            using (var ms = new MemoryStream(imagebyteData))
            {
                Image barcodeImage = Image.FromStream(ms);
                var result = BarcodeReader.Read(barcodeImage);
                if (result == null 
 result.Value == null)
                {
                    return $"{DateTime.Now} : Barcode is Not Detetced";
                }

                return $"{DateTime.Now} : Barcode is ({result.Value})";
            }

        }
    catch (Exception ex)
        {
            return $"Exception is {ex.Message}";
        }
}

//Post Object 
public class CamImage
{
    public string imageDataBase64 { get; set; }
}

<HttpPost>
<Route("ReadBarCode")>
Public Function ReadBarCode(ByVal imageData As CamImage) As String
	Try
			Dim splitObject = imageData.imageDataBase64.Split(","c)
			Dim imagebyteData() As Byte = Convert.FromBase64String(If(splitObject.Length > 1, splitObject (1), splitObject (0)))
			IronBarCode.License.LicenseKey = "Key"

			Using ms = New MemoryStream(imagebyteData)
				Dim barcodeImage As Image = Image.FromStream(ms)
				Dim result = BarcodeReader.Read(barcodeImage)
				If result Is Nothing result.Value Is Nothing Then
					Return $"{DateTime.Now} : Barcode is Not Detetced"
				End If

				Return $"{DateTime.Now} : Barcode is ({result.Value})"
			End Using

	Catch ex As Exception
			Return $"Exception is {ex.Message}"
	End Try
End Function

'Post Object 
Public Class CamImage
	Public Property imageDataBase64() As String
End Class

VB C#

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