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>