How to read a QR code directly from a mobile camera using ZXing [ASP.Net WebForm]

Question

I am currently working on a medical project that consists of a patient database. I used zxing to generate a QR code every time a patient is added into the record and the QR code contains the patient's ID.

The generation code is as follows

 //GENERATE QRCODE
        private void GenerateCode(string patientIdString)
        {           

            var writer = new BarcodeWriter();
            writer.Format = BarcodeFormat.QR_CODE;
            var result = writer.Write(patientIdString);
            string path = Server.MapPath("~/images/" + patientIdString + ".jpg");
            var barcodeBitmap = new Bitmap(result);

            using (MemoryStream memory = new MemoryStream())
            {
                using (FileStream fs = new FileStream(path, FileMode.Create, FileAccess.ReadWrite))
                {
                    barcodeBitmap.Save(memory, ImageFormat.Jpeg);
                    byte[] bytes = memory.ToArray();
                    fs.Write(bytes, 0, bytes.Length);
                }
            }
            patientQRCode.Visible = true;
            patientQRCode.ImageUrl = "~/images/"+ patientIdString + ".jpg";
        }

This method is then called on the AddPatient feature which works perfectly fine.

On my Scanning page, I have two features, either a user clicks on a patient's ID that's viewed on a dataTable which would redirect them to the view patient page, or a user has a feature to use their mobile camera.

The code to read the QR Code and translate it is as follows

//READ CODE FROM QR IMAGE
        private void ReadQRCode()
        {
            var reader = new BarcodeReader();
            string filename = Path.Combine(Request.MapPath("~/images/"), "QRImage.jpg");
            //Detatch and decode the barcode inside the bitmap
            var result = reader.Decode(new Bitmap(filename));
            if (result != null)
            {
                lblQRCode.Text = "QR Code : " + result.Text;
            }
        }

And the method that I'm using for mobile users to open their camera is as follows:

        <p class="lead" style="text-align: center"><input class="btn btn-success btn-sm" type="file" accept="image/*" runat="server" capture="camera" /></p>

The problem is that the camera isn't actually scanning / taking a picture, it merely works as a lense. Is there a way to make it read and convert the code for it to obtain the patient ID and then automatically redirect the user to the patient page?

Thank you in advanced for the support

Answer 1

I ended up enabling WebRTC javascript plugin to enable a panel that uses the camera on the phone. (This tutorial https://developer.mozilla.org/en-US/docs/Web/API/WebRTC_API/Taking_still_photos#Using_specific_devices)

And then used this example to enable the back camera since the first section only allowed the front-facing camera to be used. (https://webrtc.github.io/samples/src/content/devices/input-output/)

This gave me the desired outcome needed with the image capturing.

I then used ZXing to create the QR needed and then also to read the image that's being captured by the WebRTC camera.

I also remembered that the cameras where displaying a blank screen when I'd try and run the website on my mobile, that turned out to be since the website didn't have the SSL ceritificate verified meaning that the site was still a HTTP rather than a HTTPS which for some reason allows the mobile from accessing the camera feature. (https://www.pluralsight.com/guides/visual-studio-2017-resolving-ssl-tls-connections-problems-with-iis-express)