1. IronBarcode
  2. ハウツー
  3. BlazorでIronBarcodeを使用する

IronBarcodeを使用したBlazorバーコードスキャナーチュートリアル

This article was translated from English: Does it need improvement?
Translated
View the article in English

IronBarcodeはBlazorプロジェクト上での実行をサポートしており、以下のチュートリアルはBlazorでIronBarcodeを使用する方法を示しています。

ユーザーのウェブカメラからQRコードやバーコードの画像を簡単にキャプチャできます。 BlazorとJavaScriptを使用することで、QRコードやバーコード画像をC#コードに転送し、IronBarcodeライブラリを利用して画像のコード値を抽出することが可能になります。 このチュートリアルでは、BlazorとIronBarcodeを使用して、ユーザーのウェブカメラからQRコードまたはバーコードの値を抽出する方法を説明します。

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

  1. BlazorでバーコードをスキャンするためのC#ライブラリをインストール
  2. Blazor サーバープロジェクトを作成し、新しい Razor コンポーネントを追加します。
  3. JavaScriptを使用してWebカメラを有効にする
  4. 設定する 画像キャプチャ サーバーに画像を送信する方法
  5. バーコードを解読するには QuicklyReadOneBarcode (クイックリーリードワンバーコード) メソッドおよびその他の直感的なAPI

Blazorプロジェクトを作成

Visual Studio を開く => 新しいプロジェクトを作成 => Blazor Server App を選択。

名前を設定

フレームワーク .NET 6 を選択

準備が整いました

カメラ用の新しいRazorコンポーネントを追加

名前を付けてください

ウェブカメラを有効にするためのJavaScriptを追加

このアプリはユーザーのウェブカメラを使用しているため、プライバシー保護のためにすべてをクライアントサイドに保持することを希望します。 すべてのウェブカメラ機能に対応するJavaScriptファイルを追加し、名前をwebcam.jsとしてください。

index.html ファイル内に JavaScript ファイルを含めるのを忘れないでください。

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

javascriptのWebカメラ初期化関数を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);
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

ユーザーのウェブカメラを起動する必要があります。 ページが読み込まれたときにこれを実行するには、OnInitializedAsyncをオーバーライドしてください。() Index.razorのメソッド 以前作成した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#

これで、ビデオを再生する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);
}
HTML

それはフレームをキャプチャし、次にそれをベース64ビットにエンコードし、エンコードされた画像を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#

フレームキャプチャボタンがクリックされたときに、この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を追加する。

Install-Package BarCode

さて、サーバープロジェクトにAPIを追加し、エンコードされた画像を処理してQRコードまたはバーコードの値を抽出します。 以下のコードは、このBlazorプロジェクトをバーコードスキャナーに変換します。 スキャンされた画像から前処理を行い、FromStream メソッドに入力します。 Blazorでバーコードをスキャンするために、BarcodeReaderクラスのメソッドにImageオブジェクトを渡します。 生成されたバーコードの値は、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 = IronBarCode.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 = IronBarCode.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; }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

以下のリンクからサンプルプロジェクトを見つけることができます これ.