ASP.NET Barcode-Scanner: Datei-Upload und REST-API mit IronBarcode

Installation über NuGet Package Manager

Öffnen Sie die Paketmanager-Konsole in Visual Studio und führen Sie den Befehl aus:

Install-Package BarCode

Install-Package BarCode

Alternativ können Sie die .NET -Befehlszeilenschnittstelle verwenden:

dotnet add package BarCode

dotnet add package BarCode

Oder suchen Sie in der Benutzeroberfläche des Visual Studio NuGet -Paketmanagers nach "BarCode" und klicken Sie auf "Installieren". Das Paket verwaltet automatisch alle Abhängigkeiten.

Für plattformspezifische Bereitstellungen sollten Sie die Verwendung plattformspezifischer NuGet Pakete in Betracht ziehen, die für Ihre Zielumgebung optimiert sind. Die Bibliothek bietet sowohl Standard- als auch BarCode.Slim-Pakete für unterschiedliche Einsatzszenarien. Eine vollständige Installationsanleitung finden Sie im IronBarcode Installationshandbuch .

Konfigurieren Ihres Projekts

Nach der Installation fügen Sie die notwendige using-Anweisung zu Ihren C#-Dateien hinzu:

using IronBarCode;

using IronBarCode;

Dieser Import ermöglicht Ihnen den Zugriff auf alle Barcode-Lese- und Generierungsfunktionen von IronBarcode. Die Bibliothek unterstützt über 30 Barcode-Formate, darunter QR-Code, Code 128, Code 39, Data Matrix und PDF417. Die vollständige Liste der unterstützten Barcode-Formate finden Sie hier. Prüfen Sie, ob diese mit Ihrem Anwendungsfall kompatibel sind.

Bei Installationsproblemen konsultieren Sie bitte den Leitfaden zur Fehlerbehebung der NuGet Pakete oder stellen Sie eine technische Anfrage für spezialisierte Unterstützung.

Das richtige Architekturmuster auswählen

Bei der Implementierung des Barcode-Scannens in ASP.NET gibt es zwei primäre Architekturansätze. Das Verständnis dieser Muster hilft Ihnen bei der Auswahl der richtigen Barcode-Lesegeräteeinstellungen für jeden Anwendungsfall:

// Server-side processing -- recommended for most ASP.NET scenarios
var options = new BarcodeReaderOptions
{
    Speed = ReadingSpeed.Balanced,
    ExpectMultipleBarcodes = true,
    UseConfidenceThreshold = true,
    ConfidenceThreshold = 0.85
};

var results = BarcodeReader.Read(stream, options);

foreach (var barcode in results)
{
    Console.WriteLine($"Type: {barcode.BarcodeType}, Value: {barcode.Text}");
}

// Server-side processing -- recommended for most ASP.NET scenarios
var options = new BarcodeReaderOptions
{
    Speed = ReadingSpeed.Balanced,
    ExpectMultipleBarcodes = true,
    UseConfidenceThreshold = true,
    ConfidenceThreshold = 0.85
};

var results = BarcodeReader.Read(stream, options);

foreach (var barcode in results)
{
    Console.WriteLine($"Type: {barcode.BarcodeType}, Value: {barcode.Text}");
}

Der serverseitige Ansatz bietet Ihnen maximale Kontrolle über die Bildverarbeitung und funktioniert konsistent auf allen Browsern. Wenn der Server jedes Bild verarbeitet, erhalten Sie auch einen sauberen Prüfpfad: Jeder gescannte Barcode durchläuft Ihre Anwendungsschicht, wo Sie ihn protokollieren, mit einer Datenbank abgleichen oder nachgelagerte Arbeitsabläufe auslösen können. Dieses Muster eignet sich besonders gut für regulierte Branchen wie das Gesundheitswesen, die Logistik und die Fertigungsindustrie, wo jeder Scan protokolliert werden muss.

Für die clientseitige Kameraintegration unterstützen moderne Browser die MediaDevices API für den Kamerazugriff. Diese lässt sich mit der serverseitigen Verarbeitung von IronBarcode über eine REST-API kombinieren – ein ausführlicheres Thema dazu später in diesem Leitfaden. Die serverseitige Verarbeitung vereinfacht zudem Ihr Sicherheitsmodell: Sensible Verarbeitungslogik wird dem Browser nicht zugänglich gemacht, und die gesamte Validierung erfolgt außerhalb Ihrer Anwendung.

Erstellung des Upload-Formulars

Erstellen Sie ein responsives HTML-Formular in Ihrer ASP.NET Ansicht:

@* Razor view -- barcode upload form *@
<form method="post" enctype="multipart/form-data" id="barcodeForm">
    <div class="form-group">
        <label for="barcodeFile">Select Barcode Image:</label>
        <input type="file" name="barcodeFile" id="barcodeFile"
               accept="image/*,.pdf" class="form-control"
               capture="environment" />
    </div>
    <button type="submit" class="btn btn-primary" id="scanBtn">
        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
        Scan Barcode
    </button>
</form>
<div id="results">
    @ViewBag.BarcodeResult
</div>

@* Razor view -- barcode upload form *@
<form method="post" enctype="multipart/form-data" id="barcodeForm">
    <div class="form-group">
        <label for="barcodeFile">Select Barcode Image:</label>
        <input type="file" name="barcodeFile" id="barcodeFile"
               accept="image/*,.pdf" class="form-control"
               capture="environment" />
    </div>
    <button type="submit" class="btn btn-primary" id="scanBtn">
        <span class="spinner-border spinner-border-sm d-none" role="status"></span>
        Scan Barcode
    </button>
</form>
<div id="results">
    @ViewBag.BarcodeResult
</div>

Das Attribut capture="environment" aktiviert die Rückkamera auf Mobilgeräten und bietet Benutzern ein natives Kameraerlebnis ohne JavaScript.

Implementierung einer sicheren Backend-Verarbeitung

Die Controller-Aktion übernimmt die Dateivalidierung, die Verarbeitung des Speicherstroms und die Ergebnisformatierung:

[HttpPost]
[ValidateAntiForgeryToken]
[RequestSizeLimit(10_000_000)] // 10MB limit
public async Task<IActionResult> ScanBarcode(IFormFile barcodeFile)
{
    var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif",
                                    ".tiff", ".bmp", ".pdf" };
    var extension = Path.GetExtension(barcodeFile.FileName).ToLowerInvariant();

    if (!allowedExtensions.Contains(extension))
    {
        ModelState.AddModelError("", "Invalid file type");
        return View();
    }

    if (barcodeFile != null && barcodeFile.Length > 0)
    {
        using var stream = new MemoryStream();
        await barcodeFile.CopyToAsync(stream);
        stream.Position = 0;

        var options = new BarcodeReaderOptions
        {
            Speed = ReadingSpeed.Balanced,
            ExpectMultipleBarcodes = true,
            ExpectBarcodeTypes = BarcodeEncoding.AllOneDimensional |
                                BarcodeEncoding.QRCode |
                                BarcodeEncoding.DataMatrix,
            ImageFilters = new ImageFilterCollection
            {
                new SharpenFilter(),
                new ContrastFilter()
            }
        };

        var results = BarcodeReader.Read(stream, options);

        ViewBag.BarcodeResult = results.Any()
            ? string.Join("<br/>", results.Select(r => $"<strong>{r.BarcodeType}:</strong> {r.Text}"))
            : "No barcodes found in the image.";
    }

    return View();
}

[HttpPost]
[ValidateAntiForgeryToken]
[RequestSizeLimit(10_000_000)] // 10MB limit
public async Task<IActionResult> ScanBarcode(IFormFile barcodeFile)
{
    var allowedExtensions = new[] { ".jpg", ".jpeg", ".png", ".gif",
                                    ".tiff", ".bmp", ".pdf" };
    var extension = Path.GetExtension(barcodeFile.FileName).ToLowerInvariant();

    if (!allowedExtensions.Contains(extension))
    {
        ModelState.AddModelError("", "Invalid file type");
        return View();
    }

    if (barcodeFile != null && barcodeFile.Length > 0)
    {
        using var stream = new MemoryStream();
        await barcodeFile.CopyToAsync(stream);
        stream.Position = 0;

        var options = new BarcodeReaderOptions
        {
            Speed = ReadingSpeed.Balanced,
            ExpectMultipleBarcodes = true,
            ExpectBarcodeTypes = BarcodeEncoding.AllOneDimensional |
                                BarcodeEncoding.QRCode |
                                BarcodeEncoding.DataMatrix,
            ImageFilters = new ImageFilterCollection
            {
                new SharpenFilter(),
                new ContrastFilter()
            }
        };

        var results = BarcodeReader.Read(stream, options);

        ViewBag.BarcodeResult = results.Any()
            ? string.Join("<br/>", results.Select(r => $"<strong>{r.BarcodeType}:</strong> {r.Text}"))
            : "No barcodes found in the image.";
    }

    return View();
}

Diese Implementierung validiert den Dateityp vor der Verarbeitung, liest Barcodes aus einem Speicherstream und gibt alle erkannten Ergebnisse zurück. IronBarcode verarbeitet verschiedene Bildformate , darunter mehrseitige TIFF- und GIF- Dokumente sowie PDF-Dokumente , wodurch formatspezifischer Verarbeitungscode entfällt.

Wie die gescannten Eingabe- und Ausgabedaten aussehen

Das obige Beispiel zeigt einen Standard-Code-128-Barcode – ein gängiges Format in Versand- und Lagerverwaltungsanwendungen. Nach dem Scanvorgang bestätigt der Ergebnisbildschirm den dekodierten Wert zusammen mit den zugehörigen Konfidenz-Metadaten:

IronBarcode gibt für jeden im hochgeladenen Bild erkannten Barcode den Barcode-Typ, den dekodierten Wert, den Konfidenzwert und die Positionsdaten zurück.

Sicherheitsaspekte für Barcode-APIs

Bevor Sie den Controller schreiben, planen Sie die Sicherheitsschicht. Barcode-Daten können beliebigen Inhalt enthalten, daher sollten Eingaben immer validiert werden. Befolgen Sie die Sicherheitsrichtlinien von IronBarcode für einen vollständigen Schutz:

• Eingabevalidierung : Barcode-Inhalte vor dem Speichern oder Verarbeiten bereinigen.
• Ratenbegrenzung : Verwenden Sie die in ASP.NET Core integrierte Middleware zur Ratenbegrenzung, um API-Missbrauch zu verhindern.
• Authentifizierung : Sichern Sie Endpunkte mit JWT-Tokens oder API-Schlüsseln
• HTTPS-Erzwingung : Der gesamte Datenverkehr der Barcode-API muss über TLS übertragen werden.
• CORS-Richtlinie : Beschränken Sie, welche Ursprünge Ihren Scan-Endpunkt aufrufen dürfen.
• Lizenzschlüsselverwaltung : Lizenzschlüssel korrekt anwenden und in der web.config-Datei für den Produktivbetrieb konfigurieren .

Erstellung des Produktions-API-Controllers

[ApiController]
[Route("api/[controller]")]
public class BarcodeController : ControllerBase
{
    private readonly ILogger<BarcodeController> _logger;
    private readonly IMemoryCache _cache;

    public BarcodeController(ILogger<BarcodeController> logger, IMemoryCache cache)
    {
        _logger = logger;
        _cache = cache;
    }

    [HttpPost("scan")]
    [ProducesResponseType(typeof(BarcodeResponse), 200)]
    [ProducesResponseType(typeof(ErrorResponse), 400)]
    public async Task<IActionResult> ScanBarcode([FromBody] BarcodeRequest request)
    {
        try
        {
            if (string.IsNullOrEmpty(request.ImageBase64))
                return BadRequest(new ErrorResponse { Error = "Image data is required" });

            var cacheKey = $"barcode_{request.ImageBase64.GetHashCode()}";
            if (_cache.TryGetValue(cacheKey, out BarcodeResponse cachedResult))
                return Ok(cachedResult);

            byte[] imageBytes = Convert.FromBase64String(request.ImageBase64);

            if (imageBytes.Length > 10 * 1024 * 1024)
                return BadRequest(new ErrorResponse { Error = "Image size exceeds 10MB limit" });

            var options = new BarcodeReaderOptions
            {
                Speed = ReadingSpeed.Faster,
                ExpectMultipleBarcodes = request.ExpectMultiple ?? false,
                UseConfidenceThreshold = true,
                ConfidenceThreshold = 0.8
            };

            var results = await Task.Run(() => BarcodeReader.Read(imageBytes, options));

            var response = new BarcodeResponse
            {
                Success = true,
                Barcodes = results.Select(r => new BarcodeData
                {
                    Type = r.BarcodeType.ToString(),
                    Value = r.Text,
                    Confidence = r.Confidence,
                    Position = new BarcodePosition
                    {
                        X = r.Points.Select(p => p.X).Min(),
                        Y = r.Points.Select(p => p.Y).Min(),
                        Width = r.Width,
                        Height = r.Height
                    }
                }).ToList()
            };

            _cache.Set(cacheKey, response, TimeSpan.FromMinutes(5));
            return Ok(response);
        }
        catch (FormatException)
        {
            return BadRequest(new ErrorResponse { Error = "Invalid base64 image data" });
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Error processing barcode scan");
            return StatusCode(500, new ErrorResponse { Error = "Internal server error" });
        }
    }
}

public record BarcodeRequest(string ImageBase64, bool? ExpectMultiple);

public record BarcodeResponse
{
    public bool Success { get; init; }
    public List<BarcodeData> Barcodes { get; init; } = new();
}

public record BarcodeData
{
    public string Type { get; init; }
    public string Value { get; init; }
    public double Confidence { get; init; }
    public BarcodePosition Position { get; init; }
}

public record BarcodePosition(int X, int Y, int Width, int Height);

public record ErrorResponse
{
    public bool Success => false;
    public string Error { get; init; }
}

[ApiController]
[Route("api/[controller]")]
public class BarcodeController : ControllerBase
{
    private readonly ILogger<BarcodeController> _logger;
    private readonly IMemoryCache _cache;

    public BarcodeController(ILogger<BarcodeController> logger, IMemoryCache cache)
    {
        _logger = logger;
        _cache = cache;
    }

    [HttpPost("scan")]
    [ProducesResponseType(typeof(BarcodeResponse), 200)]
    [ProducesResponseType(typeof(ErrorResponse), 400)]
    public async Task<IActionResult> ScanBarcode([FromBody] BarcodeRequest request)
    {
        try
        {
            if (string.IsNullOrEmpty(request.ImageBase64))
                return BadRequest(new ErrorResponse { Error = "Image data is required" });

            var cacheKey = $"barcode_{request.ImageBase64.GetHashCode()}";
            if (_cache.TryGetValue(cacheKey, out BarcodeResponse cachedResult))
                return Ok(cachedResult);

            byte[] imageBytes = Convert.FromBase64String(request.ImageBase64);

            if (imageBytes.Length > 10 * 1024 * 1024)
                return BadRequest(new ErrorResponse { Error = "Image size exceeds 10MB limit" });

            var options = new BarcodeReaderOptions
            {
                Speed = ReadingSpeed.Faster,
                ExpectMultipleBarcodes = request.ExpectMultiple ?? false,
                UseConfidenceThreshold = true,
                ConfidenceThreshold = 0.8
            };

            var results = await Task.Run(() => BarcodeReader.Read(imageBytes, options));

            var response = new BarcodeResponse
            {
                Success = true,
                Barcodes = results.Select(r => new BarcodeData
                {
                    Type = r.BarcodeType.ToString(),
                    Value = r.Text,
                    Confidence = r.Confidence,
                    Position = new BarcodePosition
                    {
                        X = r.Points.Select(p => p.X).Min(),
                        Y = r.Points.Select(p => p.Y).Min(),
                        Width = r.Width,
                        Height = r.Height
                    }
                }).ToList()
            };

            _cache.Set(cacheKey, response, TimeSpan.FromMinutes(5));
            return Ok(response);
        }
        catch (FormatException)
        {
            return BadRequest(new ErrorResponse { Error = "Invalid base64 image data" });
        }
        catch (Exception ex)
        {
            _logger.LogError(ex, "Error processing barcode scan");
            return StatusCode(500, new ErrorResponse { Error = "Internal server error" });
        }
    }
}

public record BarcodeRequest(string ImageBase64, bool? ExpectMultiple);

public record BarcodeResponse
{
    public bool Success { get; init; }
    public List<BarcodeData> Barcodes { get; init; } = new();
}

public record BarcodeData
{
    public string Type { get; init; }
    public string Value { get; init; }
    public double Confidence { get; init; }
    public BarcodePosition Position { get; init; }
}

public record BarcodePosition(int X, int Y, int Width, int Height);

public record ErrorResponse
{
    public bool Success => false;
    public string Error { get; init; }
}

Dieser Endpunkt akzeptiert Base64-kodierte Bilder – das Standardformat für die Übertragung von Bildern über HTTP. Die Antwort enthält Barcode-Typ, dekodierten Wert, Konfidenzwert und Position. Bei Szenarien mit hohem Durchsatz sollten Sie die Optionen zur Stapelverarbeitung von Barcodes und zur Optimierung der Lesegeschwindigkeit prüfen.

Wie verarbeitet die API mehrere Barcodes?

IronBarcode verarbeitet mehrere Barcodes in einem einzigen Bild in einem einzigen Aufruf und gibt ein Array von Ergebnissen zurück. Jeder Eintrag in der Antwort enthält Positionsdaten, damit die Client-Anwendung erkannte Barcodes auf dem Bildschirm hervorheben kann.

Die strukturierte JSON-Antwort liefert Clientanwendungen alles, was sie zur Verarbeitung und Anzeige von Barcode-Ergebnissen benötigen, ohne dass zusätzliche Abfragen erforderlich sind.

Häufige Scanprobleme diagnostizieren

Bevor Sie Korrekturen vornehmen, ermitteln Sie, in welche Kategorie Ihr Problem fällt. Die meisten Scanfehler in der Produktion lassen sich in eine von fünf Gruppen einteilen: Probleme mit der Bildqualität (Unschärfe, Rauschen, niedrige Auflösung), geometrische Probleme (Drehung, Schräglage, perspektivische Verzerrung), Beschädigungsprobleme (zerrissene Etiketten, verschmierte Tinte), Umweltprobleme (Blendung, Schatten, ungleichmäßige Beleuchtung) und Fehlalarme, bei denen der Leser einen nicht vorhandenen Barcode findet.

Die Kenntnis der Bildkategorie hilft Ihnen, die richtige Filterkombination und Lesegeschwindigkeit auszuwählen, ohne unnötige Bearbeitungsschritte für jedes Bild durchführen zu müssen. Für die meisten Webanwendungsszenarien deckt die Verwendung von ReadingSpeed.Balanced und AutoRotate = true den Großteil der Fälle ab. Nur dann auf ExtremeDetail eskalieren, wenn der erste Durchlauf keine Ergebnisse liefert.

Der im folgenden Code dargestellte mehrstufige Ansatz implementiert diese gestaffelte Strategie. Der schnelle erste Durchlauf verarbeitet typische Bilder zügig, wodurch die mittlere Latenz im Normalfall niedrig bleibt. Der detaillierte zweite Durchlauf wird nur dann ausgelöst, wenn der erste Durchlauf fehlschlägt. Dadurch wird sichergestellt, dass Sie die zusätzlichen Verarbeitungskosten nur dann bezahlen, wenn sie tatsächlich erforderlich sind. Dieses Muster sorgt dafür, dass Ihr ASP.NET Endpunkt unter normaler Last reaktionsfähig bleibt und gleichzeitig schwierige Sonderfälle zuverlässig bewältigt.

Implementierung der Mehrpass-Bildverarbeitung

Bei anspruchsvollen Bildern liefert ein gestaffeltes Verarbeitungsverfahren die besten Ergebnisse, ohne die Leistung bei einfachen Bildern zu beeinträchtigen:

public class AdvancedBarcodeProcessor
{
    private readonly ILogger<AdvancedBarcodeProcessor> _logger;

    public async Task<List<ScannedBarcode>> ProcessChallengingImage(Stream imageStream)
    {
        // First pass -- fast, minimal processing
        var fastOptions = new BarcodeReaderOptions
        {
            Speed = ReadingSpeed.Balanced,
            ExpectMultipleBarcodes = true,
            AutoRotate = false,
            UseConfidenceThreshold = true,
            ConfidenceThreshold = 0.85
        };

        var results = BarcodeReader.Read(imageStream, fastOptions);

        if (!results.Any())
        {
            // Second pass -- aggressive image correction
            imageStream.Position = 0;

            var detailedOptions = new BarcodeReaderOptions
            {
                Speed = ReadingSpeed.ExtremeDetail,
                ExpectMultipleBarcodes = true,
                AutoRotate = true,
                RemoveFalsePositive = true,
                UseConfidenceThreshold = true,
                ConfidenceThreshold = 0.6,
                Multithreaded = true,
                ExpectBarcodeTypes = BarcodeEncoding.All,
                ImageFilters = new ImageFilterCollection
                {
                    new SharpenFilter(2.5f),
                    new ContrastFilter(2.0f),
                    new BrightnessFilter(1.2f),
                    new InvertFilter()
                }
            };

            results = BarcodeReader.Read(imageStream, detailedOptions);
            _logger.LogInformation("Second pass detected {Count} barcodes", results.Count());
        }

        return results.Select(r => new ScannedBarcode
        {
            Value = r.Text,
            BarcodeType = r.BarcodeType.ToString(),
            Confidence = r.Confidence,
            RotationAngle = r.RotationAngle,
            PageNumber = r.PageNumber
        }).ToList();
    }
}

public record ScannedBarcode
{
    public string Value { get; init; }
    public string BarcodeType { get; init; }
    public double Confidence { get; init; }
    public float RotationAngle { get; init; }
    public int PageNumber { get; init; }
}

public class AdvancedBarcodeProcessor
{
    private readonly ILogger<AdvancedBarcodeProcessor> _logger;

    public async Task<List<ScannedBarcode>> ProcessChallengingImage(Stream imageStream)
    {
        // First pass -- fast, minimal processing
        var fastOptions = new BarcodeReaderOptions
        {
            Speed = ReadingSpeed.Balanced,
            ExpectMultipleBarcodes = true,
            AutoRotate = false,
            UseConfidenceThreshold = true,
            ConfidenceThreshold = 0.85
        };

        var results = BarcodeReader.Read(imageStream, fastOptions);

        if (!results.Any())
        {
            // Second pass -- aggressive image correction
            imageStream.Position = 0;

            var detailedOptions = new BarcodeReaderOptions
            {
                Speed = ReadingSpeed.ExtremeDetail,
                ExpectMultipleBarcodes = true,
                AutoRotate = true,
                RemoveFalsePositive = true,
                UseConfidenceThreshold = true,
                ConfidenceThreshold = 0.6,
                Multithreaded = true,
                ExpectBarcodeTypes = BarcodeEncoding.All,
                ImageFilters = new ImageFilterCollection
                {
                    new SharpenFilter(2.5f),
                    new ContrastFilter(2.0f),
                    new BrightnessFilter(1.2f),
                    new InvertFilter()
                }
            };

            results = BarcodeReader.Read(imageStream, detailedOptions);
            _logger.LogInformation("Second pass detected {Count} barcodes", results.Count());
        }

        return results.Select(r => new ScannedBarcode
        {
            Value = r.Text,
            BarcodeType = r.BarcodeType.ToString(),
            Confidence = r.Confidence,
            RotationAngle = r.RotationAngle,
            PageNumber = r.PageNumber
        }).ToList();
    }
}

public record ScannedBarcode
{
    public string Value { get; init; }
    public string BarcodeType { get; init; }
    public double Confidence { get; init; }
    public float RotationAngle { get; init; }
    public int PageNumber { get; init; }
}

Die Klasse BarcodeReaderOptions ermöglicht eine detaillierte Kontrolle über jeden Aspekt des Scanvorgangs. Die Einstellung AutoRotate verarbeitet Bilder, die in jedem Winkel aufgenommen wurden, während Bildfilter die Klarheit bei unscharfen oder kontrastarmen Barcodes verbessern. Detaillierte Konfigurationsinformationen finden Sie im Beispiel für die Einstellungen des Barcode-Lesegeräts und in den PDF-spezifischen Lesegeräteeinstellungen .

Bei der Arbeit mit PDFs sollten Sie in Erwägung ziehen, Barcodes auf die PDFs aufzudrucken oder Barcodes als PDF-Dokumente zu erstellen . Bei der Verarbeitung großer Datenmengen verbessert die Aktivierung von Multithreading über die asynchronen und Multithread-Funktionen den Durchsatz erheblich.

Hinzufügen von Browserkompatibilität und Fallback-Strategien

Die Unterstützung verschiedener Browser erfordert progressive Verbesserung. Moderne Browser auf Android und Desktop-Computern (Chrome, Edge und Firefox) unterstützen die MediaDevices.getUserMedia() API für den Kamerazugriff. Safari auf iOS unterstützt dies ab Version 11. Ältere Enterprise , IE11-Kompatibilitätsmodi und bestimmte abgeschottete Unternehmensumgebungen unterstützen möglicherweise überhaupt keinen Kamerazugriff, daher muss Ihr alternativer Datei-Upload-Pfad stets funktionsfähig bleiben.

Die empfohlene Vorgehensweise besteht darin, die Merkmalserkennung zur Laufzeit anstelle des User-Agent-Sniffings zu nutzen und die Kameraschnittstelle entsprechend ein- oder auszublenden. Beginnen Sie mit einer Benutzeroberfläche mit Kamerafunktion und kehren Sie elegant zum Datei-Upload zurück:

@* Razor view with progressive enhancement *@
<div class="barcode-scanner-container">
    @* Camera capture -- hidden until JavaScript confirms support *@
    <div id="cameraSection" class="d-none">
        <video id="videoPreview" class="w-100" autoplay></video>
        <button id="captureBtn" class="btn btn-primary mt-2">Capture and Scan</button>
    </div>

    @* File upload -- always available as fallback *@
    <div id="uploadSection">
        <form method="post" enctype="multipart/form-data"
              asp-action="ScanBarcode" asp-controller="Barcode">
            <div class="form-group">
                <label>Upload Barcode Image:</label>
                <input type="file" name="file" accept="image/*,.pdf"
                       class="form-control" required />
            </div>
            <button type="submit" class="btn btn-primary">Upload and Scan</button>
        </form>
    </div>
</div>

@* Razor view with progressive enhancement *@
<div class="barcode-scanner-container">
    @* Camera capture -- hidden until JavaScript confirms support *@
    <div id="cameraSection" class="d-none">
        <video id="videoPreview" class="w-100" autoplay></video>
        <button id="captureBtn" class="btn btn-primary mt-2">Capture and Scan</button>
    </div>

    @* File upload -- always available as fallback *@
    <div id="uploadSection">
        <form method="post" enctype="multipart/form-data"
              asp-action="ScanBarcode" asp-controller="Barcode">
            <div class="form-group">
                <label>Upload Barcode Image:</label>
                <input type="file" name="file" accept="image/*,.pdf"
                       class="form-control" required />
            </div>
            <button type="submit" class="btn btn-primary">Upload and Scan</button>
        </form>
    </div>
</div>

Die Blazor Integration bietet moderne Webanwendungsunterstützung mit minimalem Konfigurationsaufwand, falls Sie einen komponentenorientierten Ansatz bevorzugen. Informationen zur Fehlerbehebung bei der Bereitstellung finden Sie im Leitfaden zu Laufzeitfehlern (Runtime CopyException) .