1. IronBarcode
  2. Anleitungen
  3. Verwendung von IronBarcode mit Blazor

Blazor Barcode Scanner Tutorial mit IronBarcode

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

IronBarcode unterstützt die Ausführung über das Blazor-Projekt und das folgende Tutorial zeigt, wie IronBarcode mit Blazor verwendet werden kann.

Sie können ganz einfach ein QR- oder Barcode-Bild von der Webcam eines Benutzers erfassen. Mit Blazor und JavaScript, die wirkliche Macht kommt, wenn Sie die QR-oder Barcode-Bild zurück zu Ihrem C#-Code, so dass Sie IronBarcode Bibliothek verwenden, um das Bild Code-Wert zu extrahieren. In diesem Tutorial werden wir Blazor und IronBarcode verwenden, um das erfasste Bild für einen QR- oder Barcode-Wert von der Webcam eines Benutzers zu extrahieren.

Verwendung des Barcode-Scanners in Blazor

  1. C#-Bibliothek zum Scannen von Barcodes in Blazor installieren
  2. Blazor-Server-Projekt erstellen und neue Razor-Komponente hinzufügen
  3. Aktivieren der Webcam mit JavaScript
  4. Konfigurieren Sie bildaufzeichnung methode zum Senden des Bildes an den Server
  5. Dekodieren von Barcodes unter Verwendung von QuicklyReadOneBarcode methode und andere intuitive APIs

Blazor-Projekt erstellen

Visual Studio öffnen => Neues Projekt erstellen => Blazor Server App auswählen.

Einen Namen festlegen

Rahmenwerk .NET 6 auswählen

Und wir sind bereit

Neue Razor-Komponente für Nocken hinzufügen

Geben Sie ihm einen Namen

JavaScript zum Aktivieren der WebCam hinzufügen

Da diese Anwendung mit der Webcam des Benutzers arbeitet, ziehe ich es vor, alles auf der Client-Seite zu halten, um die Privatsphäre zu schützen. Fügen Sie eine Javascript-Datei für alle Webcam-Funktionen hinzu und nennen Sie sie webcam.js.

Vergessen Sie nicht, die Javascript-Datei in die Datei index.html einzubinden.

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

Fügen Sie der Datei webcam.js die Javascript-Funktion WebCam Initilization hinzu.

// 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#

Wir müssen die Webcam des Benutzers starten. Führen Sie dies aus, wenn die Seite geladen wird, indem Sie die OnInitializedAsync-Funktion überschreiben() methode von Index.razor. Rufen Sie die Javascript-Funktion initializeCamera auf, die Sie zuvor geschrieben haben.

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#

Fügen Sie nun die HTML-Tags hinzu, die das Video abspielen sollen.

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

Erfassen Sie das Bild

Um ein Bild aus dem Webcam-Videofeed zu erfassen, schreiben wir eine weitere Javascript-Funktion in webcam.js. Mit dieser Funktion wird das aktuelle Bild von der Videoquelle auf die Leinwand gezeichnet.

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

Sie erfasst ein Bild und kodiert es dann in Base 64bit und sendet das kodierte Bild an die ProcessImage-Funktion, die das kodierte Bild an die serverseitige API sendet, um es zu verarbeiten.

[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();
    }
}
IRON VB CONVERTER ERROR developers@ironsoftware.com
VB   C#

Nun müssen wir diese js-Funktion aufrufen, wenn die Schaltfläche Capture Frame angeklickt wird. Denken Sie daran, dass unsere Schaltfläche nach einer Handler-Methode namens CaptureFrame sucht.

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 Erfasstes Bild extrahieren

IronBarcode zum Server-Projekt hinzufügen.

Install-Package BarCode

Fügen Sie nun im Server-Projekt eine API hinzu, um das kodierte Bild zu verarbeiten und den QR- oder Barcode-Wert zu extrahieren. Der folgende Code verwandelt dieses Blazor-Projekt in einen Barcode-Scanner. Das gescannte Bild wird vorverarbeitet und in die Methode "FromStream" eingespeist. Übergeben Sie das Bild-Objekt an eine Methode der Klasse BarcodeReader, um den Barcode in Blazor zu scannen. Der resultierende Barcodewert ist dann über die Eigenschaft Value des Objekts BarcodeResult zugänglich.

[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; }
}
<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 = IronBarCode.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#

Sie können ein Beispielprojekt findenhier.