How do I decode a QR code i captured using a webcam on ASP.NET MVC web application

Viewed 35

I am working on a school project and I would like to add a QR code scanner functionality but it seems as if there no tutorials on youtube and other helpful sites that can help me achive that.

I already have a functional webcam on my web app that can grab an image and save it on a local folder, now I am looking for someone who can help me decode the QR code I capture.

here is a code I got for capturing an image through webcam

Controller action methods to capture and save image

 public ActionResult ScanToConfirm()
        {
            string[] allimage = System.IO.Directory.GetFiles(Server.MapPath("~/Content/Images/"));
            if (allimage.Length > 0)
            {
                List<string> base64text = new List<string>();
                foreach (var item in allimage)
                {
                    base64text.Add(System.IO.File.ReadAllText(item.ToString()));
                }
                ViewBag.Images = base64text;
            }
            return View();
        }


        [HttpPost]
        public void SaveImage(string base64image)
        {
            System.IO.File.WriteAllText(Server.MapPath("~/Content/Images/" + DateTime.Now.ToString("yyyyMMdd_hhmmss") + ".jpeg"), base64image);
        }

View for webcam and Capturing an image

@{
    ViewBag.Title = "ScanToConfirm";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>

    .form-horizontal {
        width: 100%
    }
</style>


    <div style="text-align: center; margin:auto; width:90%">
        <h2 style="text-align:center">Scan your QR-Code here</h2>
        <hr />
        <div style="display:flex; justify-content:space-between">
            <div>
                <label style="font-size:medium"><b>Live WebCam</b></label>
                <hr />
                <div style="text-align: center; margin:auto; width:90%" id="my_camera"></div>
                <br />
                <input type="button" id="takeshot" value="Capture QR Code" onClick="take_snapshot()">
            </div>
            <div>
                <label style="font-size:medium"><b>Captured QR Code</b></label>
                <hr />
                <div id="results">Your captured image will appear here...</div>
                <br />
                <a href="~/Bookings/DecodeQR">Decode</a>
            </div>
        </div>
    </div>

    <!-- First, include the Webcam.js JavaScript Library -->
    <script type="text/javascript" src="~/Scripts/WebCamJS2/webcam.min.js"></script>
    <!-- Configure a few settings and attach camera -->
    <script language="JavaScript">
        Webcam.set({
            width: 320,
            height: 240,
            image_format: 'jpeg',
            jpeg_quality: 90
        });
        Webcam.attach('#my_camera');
    </script>

    <!-- Code to handle taking the snapshot and displaying it locally -->
    <script language="JavaScript">

        //window.onload = function () {

        //  setInterval(function () { take_snapshot() }, 5000);
        //}
        function take_snapshot() {
            // take snapshot and get image data
            Webcam.snap(function (data_uri) {
                // display results in page
                document.getElementById('results').innerHTML =
                    '<img id="base64image" src="' + data_uri + '"/>';
            });



            var file = document.getElementById("base64image").src;

            var formdata = new FormData();
            formdata.append("base64image", file);

            $.ajax({
                url: "https://localhost:44320/Bookings/SaveImage",
                type: "POST",

                data: formdata,
                processData: false,
                contentType: false
            });

        }
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
0 Answers
Related