Sunday, 24 November 2019

ZXing for ASP.NET MVC to scan barcodes

I am looking for away to use to use the ZXing library with ASP.NET MVC to scan barcodes, I was able to do this in Xamarin.Forms and now trying to apply the same code to an ASP.NET MVC project. In my Xamarin.Forms I had the following:

            var options = new MobileBarcodeScanningOptions
            {
                TryHarder = true,
                CameraResolutionSelector = HandleCameraResolutionSelectorDelegate,
                PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.PDF_417 },
            };


            BarcodeScanView.Options = options;

            BarcodeScanView.IsVisible = true;
            BarcodeScanView.IsScanning = true;

and I would have an onScan method like so:

public async void OnScanResult(Result result)
{
}

and in my xaml file I had the zxing element like so:

<zxing:ZXingScannerView x:Name="BarcodeScanView" IsVisible="false" HeightRequest="200" OnScanResult="OnScanResult" />

So my question is what would be the equivalent to this in ASP.NET, what would be the equivalent to this zxing element?

Please Help!

UPDATE

I have gone the route of using jQuery for the camera and ZXing.NET to debug the PDF417 Barcode:

Here is my HTML:

<video id="video" width="800" height="800"></video>
<canvas id="canvas" width="800" height="800"></canvas>

And the jQuery for the camera and the code that calls an .NET method to debug the barcode:

var video = document.getElementById('video');

    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {


        navigator.mediaDevices.getUserMedia({ video: true }).then(function (stream) {
            video.srcObject = stream;
            video.play();
        });
    }

    $("#video").on("playing", function () {

        setInterval(function () { scanBarcode() }, 500);

    });

    function scanBarcode() {

        var video = document.getElementById('video');
        var canvas = document.getElementById('canvas');
        var canvas_context = canvas.getContext('2d');

        canvas_context.drawImage(video, 0, 0, 640, 480);

        var image = document.getElementById("canvas").toDataURL("image/png");

        image = image.replace('data:image/png;base64,', '');

        $.post("Home/OnScan", { imageData: image }, function (data, status) {

            console.log(data);

        });

    }

And here is my .NET method to debug the PDF417 barcode:

public JsonResult OnScan(string imageData)
        {

            BitmapImage bitmapImage = new BitmapImage();
            byte[] byteBuffer = Convert.FromBase64String(imageData);

            Bitmap bmp;
            using (var ms = new MemoryStream(byteBuffer))
            {
                bmp = new Bitmap(ms);
            }

            BarcodeReader reader = new BarcodeReader();

            DecodingOptions options = new DecodingOptions
            {
                TryHarder = true,
                PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.PDF_417 }
            };

            reader.Options = options;

            var result = reader.Decode(bmp);

            return Json(result.Text, JsonRequestBehavior.AllowGet);
        }

Now this still does not work, but I remembered when I first did this in Xamarin.Forms it also did not work until I add the CameraResolutionSelector option:

var options = new MobileBarcodeScanningOptions
            {
                TryHarder = true,
                CameraResolutionSelector = HandleCameraResolutionSelectorDelegate,
                PossibleFormats = new List<BarcodeFormat> { BarcodeFormat.PDF_417 },
            };

Here is the HandleCameraResolutionSelectorDelegate method:

public CameraResolution HandleCameraResolutionSelectorDelegate(List<CameraResolution> availableResolutions)
        {
            //Don't know if this will ever be null or empty
            if (availableResolutions == null || availableResolutions.Count < 1)
                return new CameraResolution() { Width = 800, Height = 600 };

            //Debugging revealed that the last element in the list
            //expresses the highest resolution. This could probably be more thorough.
            return availableResolutions[availableResolutions.Count - 1];
        }

So I am starting to think it the resolution of the camera that is causing my barcode not to scan....on another note when I change BarcodeFormat to QR_CODE and scan a QR code it works, but not with a PDF417 Barcode...what am I doing wrong?



from ZXing for ASP.NET MVC to scan barcodes

No comments:

Post a Comment