Blazor WebAssembly로 웹 바코드 및 QR 코드 리더를 구축하는 방법

Blazor는 Microsoft에서 개발한 웹 프레임워크입니다. 이를 통해 개발자는 C# 및 HTML을 사용하여 웹 앱을 만들 수 있습니다. 하지만 Blazor 프로젝트를 개발하는 과정에서 기존 JavaScript API 호출은 불가피합니다. 이 문서는 Blazor WebAssembly 및 Dynamsoft JavaScript Barcode SDK을 사용하여 웹 바코드 및 QR 코드 판독기 앱을 구축하려는 웹 개발자에게 도움이 됩니다.

Dynamsoft JavaScript 바코드 SDK 사용 방법

HTML 파일에 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>를 포함합니다.

SDK를 활성화하려면 30-day trial license을 신청하십시오.

Dynamsoft.DBR.BarcodeReader.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==";

Blazor 아키텍처 개요

Blazor는 Blazor WebAssembly 및 Blazor Server라는 두 가지 템플릿을 제공합니다.

블레이저 웹어셈블리

블레이저 서버

Blazor 서버는 서버 측에서 클라이언트 측 UI 로직을 실행하고 Websocket을 통해 UI 변경 사항을 보냅니다. JavaScript interop 호출을 편리하게 처리하기 위해 Blazor WebAssembly를 선택하여 웹 바코드 및 QR 코드 판독기를 구현합니다.

Blazor WebAssembly 프로젝트의 새로운 기능

Blazor WebAssembly 템플릿을 사용하여 Blazor 앱을 만듭니다.

dotnet new blazorwasm -o BlazorBarcodeSample

그런 다음 프로젝트에 새 페이지를 추가합니다.

cd BlazorBarcodeSample
dotnet new razorcomponent -n BarcodeReader -o Pages

그런 다음 BarcodeReader 속성을 Pages/Index.razor에 추가합니다.

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

<SurveyPrompt Title="How is Blazor working for you?" />
<BarcodeReader />

지금까지 앱을 실행하고 홈페이지를 볼 수 있습니다.

dotnet run

앱을 처음 실행할 때 개발자 콘솔을 열어 진행 상황을 관찰할 수 있습니다.

dotnet.wasm 파일 및 일부 *.dll 파일이 웹 브라우저에서 가져와 캐시됩니다.

몇 가지 사항을 변경하고 프로젝트를 다시 빌드하면 BlazorBarcodeSample.dll만 다시 가져온 것을 확인할 수 있습니다.

Blazor WebAssembly에서 바코드 및 QR 코드 읽기

Dynamsoft JavaScript Barcode SDK을 wwwroot/index.html에 추가한 다음 JavaScript와 .NET 간의 상호 운용을 위해 jsInterop.js 파일을 만듭니다.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>BlazorBarcodeSample</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="BlazorBarcodeSample.styles.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/dbr.js"></script>
</head>

<body>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="jsInterop.js"></script>
</body>

</html>

jsInterop.js에서 Dynamsoft Barcode Reader를 초기화하고 JavaScript 변수를 사용하여 .NET 개체의 참조를 저장합니다.

let barcodescanner = null;
let dotnetRef = null;
window.jsFunctions = {
    init: function(obj) {
        let result = true;
        try {
            Dynamsoft.DBR.BarcodeReader.license = "DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAxLTE2NDk4Mjk3OTI2MzUiLCJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSIsInNlc3Npb25QYXNzd29yZCI6IndTcGR6Vm05WDJrcEQ5YUoifQ==";
            barcodescanner = await Dynamsoft.DBR.BarcodeScanner.createInstance();
            await barcodescanner.updateRuntimeSettings("balance");
            dotnetRef = obj;
        } catch (e) {
            console.log(e);
            result = false;
        }
        return result;
    },
};

JavaScriptinit() 함수는 OnInitialized()의 BarcodeReader.razor 메서드에 의해 트리거됩니다.

@inject IJSRuntime JSRuntime

@if (initialized == false)
{
    <p>Initializing...</p>
}
else
{
}

@code {
    Boolean initialized = false;

    protected override void OnInitialized()
    {
        Init();
    }

    public async void Init()
    {
        initialized = await JSRuntime.InvokeAsync<Boolean>("jsFunctions.init", DotNetObjectReference.Create(this));
        StateHasChanged();
    }

}

디스크 드라이브에서 이미지 파일을 선택하려면 InputFile component을 사용합니다.

<InputFile OnChange="LoadImage" />
@code {
    private async Task LoadImage(InputFileChangeEventArgs e)
    {
        var imageFile = e.File;
        var jsImageStream = imageFile.OpenReadStream(1024 * 1024 * 20);
        var dotnetImageStream = new DotNetStreamReference(jsImageStream);
        await JSRuntime.InvokeVoidAsync("jsFunctions.setImageUsingStreaming", 
            "image", dotnetImageStream);
    }
}

이미지가 로드되면 setImageUsingStreaming()에서 jsInterop.js 메서드를 호출하여 이미지 데이터를 전달합니다.

function returnResultsAsString(results) {
    let txts = [];
    try {
        for (let i = 0; i < results.length; ++i) {
            txts.push(results[i].barcodeText);
        }
        let barcoderesults = txts.join(', ');
        if (txts.length == 0) {
            barcoderesults = 'No barcode found';
        }
        if (dotnetRef) {
            dotnetRef.invokeMethodAsync('ReturnBarcodeResultsAsync', barcoderesults);
        }
    } catch (e) {
    }
}

setImageUsingStreaming: async function setImageUsingStreaming(imageElementId, imageStream) {
        const arrayBuffer = await imageStream.arrayBuffer();
        const blob = new Blob([arrayBuffer]);
        const url = URL.createObjectURL(blob);
        document.getElementById(imageElementId).src = url;
        document.getElementById(imageElementId).style.display = 'block';

        if (barcodescanner) {
            try {
                let results = await barcodescanner.decode(blob);
                returnResultsAsString(results);
            } catch (ex) {
                alert(ex.message);
                throw ex;
            }
        }

      },

그 동안 decode() 메서드를 호출하여 이미지 버퍼에서 바코드 및 QR 코드를 읽은 다음 결과를 ReturnBarcodeResultsAsync()의 BarcodeReader.razor 메서드로 전달합니다.

[JSInvokable]
public void ReturnBarcodeResultsAsync(String text)
{
    result = text;
    StateHasChanged();
}

이제 일부 바코드 및 QR 코드 이미지로 Blazor WebAssembly 앱을 테스트할 수 있습니다.

카메라를 이용한 라이브 스캔 바코드 및 QR 코드

정적 파일에서 바코드 및 QR 코드를 디코딩하는 것 외에도 연결된 카메라로 실시간 스캔도 할 수 있습니다.
BarcodeReader.razor 파일에 라이브 스캔 버튼을 추가합니다.

<button class="btn btn-primary" @onclick="LiveScan">Live Scan</button>

@code {
    public async Task LiveScan()
    {
        await JSRuntime.InvokeVoidAsync(
                "jsFunctions.liveScan");
    }
}

그런 다음 jsInterop.js에 해당 JavaScript 함수를 추가합니다.

liveScan: async function () {
    if (barcodescanner) {
        barcodescanner.onFrameRead = async results => {
            if (results.length > 0) {
                console.log("onFrameRead");
                returnResultsAsString(results);
            }
        };
        await barcodescanner.show();
    } else {
        alert("The barcode reader is still initializing.");
    }
},

버튼을 클릭하면 카메라 미리보기와 카메라 소스 목록이 포함된 팝업 창이 나타납니다.

프로젝트의 최종 모습은 다음과 같습니다.

소스 코드

https://github.com/yushulx/blazor-barcode-qrcode-reader-scanner

Reference

이 문제에 관하여(Blazor WebAssembly로 웹 바코드 및 QR 코드 리더를 구축하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/yushulx/how-to-build-web-barcode-and-qr-code-reader-with-blazor-webassembly-2p2n

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)