Blazor와 함께 IronBarcode 사용

Q: 웹캠에 접속하려면 어떤 JavaScript 코드가 필요합니까?

JavaScript 코드에는 navigator.mediaDevices.getUserMedia 사용하여 카메라 접근 권한을 요청하고 HTML 비디오 요소로 비디오를 스트리밍하는 initializeCamera() 와 같은 함수가 포함되어야 합니다.

Q: Blazor에서 캡처한 이미지를 서버로 전송하는 방법은 무엇인가요?

캡처한 이미지를 서버로 전송하려면 JavaScript에서 DotNetObjectReference 사용하여 이미지 데이터와 함께 C# 메서드를 호출합니다. 이 메서드는 base64로 인코딩된 이미지 문자열을 전달합니다.

Curtis Chau

Updated: 2026년 6월 29일

이 방법 설명서에는 Blazor 프로젝트 내에서 IronBarcode를 통합하는 방법에 대한 자세한 지침이 포함되어 있습니다. 예제로써, Blazor 앱에서 사용자의 웹캠으로 캡처된 바코드/QR을 스캔하기 위해 IronBarcode를 사용할 것입니다.

Blazor에서 바코드 스캐너를 사용하는 방법

Blazor에서 바코드를 스캔하기 위해 C# 라이브러리 설치
Blazor 서버 프로젝트를 생성하고 새 Razor 컴포넌트를 추가합니다.
JavaScript를 사용하여 웹캠 활성화
이미지를 서버로 보낼 수 있도록 이미지 캡처 방법을 구성하세요.
BarcodeReader.Read 메소드를 사용하여 바코드를 디코드합니다.

Blazor 프로젝트 생성

Visual Studio 열기 => 새 프로젝트 생성 => Blazor Server App:

프로젝트 이름과 위치 설정:

.NET 6 프레임워크(또는 다른 최신 표준 .NET 버전)를 선택:

그리고 준비 완료:

웹캠 지원을 추가하려면 새로운 Razor 컴포넌트를 추가하세요:

이름을 지정한 후 _Add_를 클릭하십시오:

JavaScript로 웹캠 기능 활성화

이 앱은 사용자의 웹캠을 다루기 때문에 고객의 개인정보 보호를 위해 클라이언트 측에서 처리해야 합니다. 프로젝트에 JavaScript 파일을 추가하여 웹캠 기능을 처리하고, 이름을 webcam.js로 지정하세요:

절대 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");
}

Protected Overrides Async Function OnInitializedAsync() As Task
	Await JSRuntime.InvokeVoidAsync("initializeCamera")
End Function

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>

HTML

이미지 캡처

웹캠 비디오 피드에서 프레임을 캡처하려면, 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);
}

JavaScript

이 함수는 프레임을 캡처하고 base64로 인코딩한 다음, 인코딩된 이미지를 C#의 ProcessImage() 메서드로 보냅니다. 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(imageString As String) As Task
    ' Create an image object containing the base64 data
    Dim imageObject As 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

<JSInvokable>
Public Async Function ProcessImage(imageString As String) As Task
    ' Create an image object containing the base64 data
    Dim imageObject As 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

Private Async Function CaptureFrame() As Task
	Await JSRuntime.InvokeAsync(Of String)("getFrame", DotNetObjectReference.Create(Me))
End Function

IronBarcode 캡처 이미지 추출

서버 프로젝트에 IronBarcode NuGet 패키지를 추가하십시오:

> dotnet add package IronBarCode

dotnet add package IronBarCode

이제 서버 프로젝트에서 인코딩된 이미지를 처리하고 바코드/QR 값을 추출하는 API 메서드를 추가하십시오. 다음 코드가 Blazor 프로젝트에 바코드 읽기 기능을 추가합니다. 스캔된 이미지에서 이미지를 전처리하고 FromStream 메서드로 피드합니다. Blazor에서 바코드를 스캔하기 위해 BarcodeReader 클래스의 메서드에 Image 개체를 전달하세요. 결과 바코드 값은 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

<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를 사용하여 웹캠 지원을 활성화하고, 이미지를 캡처한 다음, 라이브러리의 바코드 읽기 메서드를 사용하여 이미지를 디코딩해야 합니다.

Blazor 앱에서 웹캠 지원을 활성화하는 방법은 무엇인가요?

웹캠 지원을 활성화하려면 Blazor 프로젝트에 JavaScript 파일을 추가하세요. 이 파일에는 웹캠 비디오에 접근하고 스트리밍하는 함수가 포함되어야 하며, Blazor에서 JavaScript 상호 운용성을 사용하여 호출할 수 있어야 합니다.

웹캠에 접속하려면 어떤 JavaScript 코드가 필요합니까?

JavaScript 코드에는 navigator.mediaDevices.getUserMedia 사용하여 카메라 접근 권한을 요청하고 HTML 비디오 요소로 비디오를 스트리밍하는 initializeCamera() 와 같은 함수가 포함되어야 합니다.

Blazor에서 웹캠의 프레임을 캡처하고 처리하는 방법은 무엇인가요?

현재 비디오 프레임을 캡처하고, 이를 base64로 인코딩된 이미지로 변환한 후, Blazor의 JavaScript 상호 운용 기능을 사용하여 C# 메서드로 전송하는 JavaScript 함수를 작성하세요. C# 메서드는 이 이미지를 처리하여 바코드를 판독할 수 있습니다.

Blazor 프로젝트에서 바코드를 읽는 방법은 무엇인가요?

바코드 라이브러리의 리더 클래스를 사용하여 서버 측 API 메서드에서 base64로 인코딩된 이미지 문자열을 디코딩하면 바코드를 읽을 수 있습니다. 이 클래스는 이미지에서 바코드 값을 추출합니다.

Blazor에서 바코드 라이브러리를 사용하기 위한 필수 조건은 무엇입니까?

Blazor 서버 프로젝트가 설정되어 있고, 필요한 NuGet 패키지가 설치되어 있으며, 웹캠 입력을 처리하도록 JavaScript가 구성되어 있는지 확인하십시오. 또한 바코드 라이브러리에 대한 유효한 라이선스 키가 필요합니다.

Blazor에서 캡처한 이미지를 서버로 전송하는 방법은 무엇인가요?

캡처한 이미지를 서버로 전송하려면 JavaScript에서 DotNetObjectReference 사용하여 이미지 데이터와 함께 C# 메서드를 호출합니다. 이 메서드는 base64로 인코딩된 이미지 문자열을 전달합니다.

이 바코드 라이브러리는 QR 코드를 처리할 수 있나요?

예, 바코드 라이브러리는 Blazor로 개발된 애플리케이션을 포함하여 .NET 애플리케이션 내에서 바코드와 QR 코드를 모두 생성, 읽기 및 관리할 수 있습니다.

바코드 라이브러리를 사용하는 Blazor 샘플 프로젝트는 어디에서 찾을 수 있나요?

바코드 라이브러리를 사용하는 Blazor 샘플 프로젝트는 기사 결론 부분에 제공된 링크에서 다운로드할 수 있습니다.

Curtis Chau

지금 바로 엔지니어링 팀과 채팅하세요

기술 문서 작성자

커티스 차우는 칼턴 대학교에서 컴퓨터 과학 학사 학위를 취득했으며, Node.js, TypeScript, JavaScript, React를 전문으로 하는 프론트엔드 개발자입니다. 직관적이고 미적으로 뛰어난 사용자 인터페이스를 만드는 데 열정을 가진 그는 최신 프레임워크를 활용하고, 잘 구성되고 시각적으로 매력적인 매뉴얼을 제작하는 것을 즐깁니다.

...

더 읽어보기