In this article, we will discuss how to implementing barcode scanner using javascript invoice basic example
the given below barcode scanner example is static example it means it not intracking to database
open visual studio or Notepad+ Add following the given Html page
the following CSS CDN’S and JS CDN’s are required for implementing barcode scanner using javascript with generating invoice
// CSS files
<link href="~/assets/barcode/bootstrap.min.css" rel="stylesheet" />
<link href="~/assets/barcode/style.css" rel="stylesheet" />
<link href="~/assets/barcode/scan.css" rel="stylesheet" />
// Js Files
<script src="~/assets/barcode/JS/jquery.min.js"></script>
<script src="~/assets/barcode/JS/bootstrap.min.js"></script>
<script src="~/assets/barcode/JS/jquery.viewportchecker.js"></script>
<script src="~/assets/barcode/JS/script.js"></script>
<script src="~/assets/barcode/JS/quagga.min.js"></script>
<script src="~/assets/barcode/JS/scan.js"></script>
@{
Layout = null;
}
<br />
<div class="container" style="width:50% ">
<div class="input-group" style="height:50px">
<input id="scanner_input" class="form-control" placeholder="Press Scan you item" type="text" style="height:50px;font-size: 18px;margin-left: 55px;">
<span class="input-group-btn">
<button class="btn btn-default" type="button" data-toggle="modal" data-target="#livestream_scanner" style="height:63px;font-size: 16px;">
<i class="fa fa-barcode">SCAN</i>
</button>
</span>
</div>
</div>
<modal class="modal" id="livestream_scanner" style="display: none;">
<div class="modal-dialog">
<div class="modal-content" align="center">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Barcode Scanner</h4>
</div>
<div class="modal-body" style="position: static">
<div id="interactive" class="viewport" style="height: 30vh;"></div>
<div class="error"></div>
</div>
<div class="modal-footer" style="overflow:hidden">
<input id="file" type="file" accept="image/*" class="hidden" style="display:none;">
<label id="fileSel" for="file" class="btn btn-primary" style="float: left; display: none;">SELECT FILE</label>
<button type="button" class="btn btn-primary" data-dismiss="modal" style="float:right;width:45%;">CLOSE</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</modal>
<div class="invoice-box" id="invoice-bill" style="display:none">
<table class="invoice-boxs" cellpadding="0" cellspacing="0">
<tr class="top">
<td colspan="2">
<table>
<tr>
<td class="title">
<img class="custom-logo" src="https://tutorialshelper.com/wp-content/uploads/2019/10/tutorial-logo.png" style="width:100%; max-width: 181px;">
</td>
<td>
<span>Invoice #:</span> <input style="width: 48%;" type="text" disabled name="checkyear" id="invoice-id" value=""><br>
<p>
CreatedDate:
<script>document.write(new Date().toLocaleDateString());</script>
</p>
Due: February 1, 2015
</td>
</tr>
</table>
</td>
</tr>
<tr class="information">
<td colspan="2">
<table>
<tr>
<td>
Sparksuite, Inc.<br>
12345 Sunny Road<br>
Sunnyville, CA 12345
</td>
<td>
Acme Corp.<br>
John Doe<br>
<a href="https://tutorialshelper.com/">[email protected]</a>
</td>
</tr>
</table>
</td>
</tr>
<tr class="heading">
<td>
Payment Method
</td>
<td>
Check #
</td>
</tr>
<tr class="details">
<td>
Check
</td>
<td>
1000
</td>
</tr>
<tr class="heading">
<td>
Item
</td>
<td>
Price
</td>
</tr>
<tr class="item">
<td>
Website design
</td>
<td>
$300.00
</td>
</tr>
<tr class="total">
<td></td>
<td>
Total: $300.00
</td>
</tr>
</table>
</div>
invoice script js
if you want connect to your database the following js file will helpful for generating a dynamic invoice
$(function () {
// Create the QuaggaJS config object for the live stream
var liveStreamConfig = {
inputStream: {
type: "LiveStream",
constraints: {
width: { min: 640, max: 640 },
height: { min: 480, max: 480 },
aspectRatio: { min: 1, max: 100 },
facingMode: "environment" // or "user" for the front camera
}
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers: (navigator.hardwareConcurrency ? navigator.hardwareConcurrency : 4),
decoder: {
"readers": [
{ "format": "ean_reader", "config": {} },
{ "format": "ean_2_reader", "config": {} },
{ "format": "ean_5_reader", "config": {} },
{ "format": "ean_8_reader", "config": {} },
{ "format": "upc_reader", "config": {} },
{ "format": "upc_e_reader", "config": {} }
]
},
locate: true
};
// The fallback to the file API requires a different inputStream option.
// The rest is the same
var fileConfig = $.extend(
{},
liveStreamConfig,
{
inputStream: {
size: 800
}
}
);
// Start the live stream scanner when the modal opens
$('#livestream_scanner').on('shown.bs.modal', function (e) {
$('#livestream_scanner .modal-body .error').html('');
$('#interactive').height('0px');
document.getElementById('fileSel').style = "float:left;display:none;";
Quagga.init(
liveStreamConfig,
function (err) {
if (err) {
document.getElementById('fileSel').style = "float:left;display:inline;";
Quagga.stop();
return;
}
else {
$('#interactive').height('30vh');
Quagga.start();
Quagga.CameraAccess.getActiveTrack().applyConstraints({ advanced: [{ torch: true }] });
}
}
);
});
// Make sure, QuaggaJS draws frames an lines around possible
// barcodes on the live stream
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
//Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
// Once a barcode had been read successfully, stop quagga and
// close the modal after a second to let the user notice where
// the barcode had actually been found.
Quagga.onDetected(function (result) {
if (result.codeResult.code) {
$('#scanner_input').val(result.codeResult.code);
document.getElementById('invoice-bill').style = "display:block;";
document.getElementById("invoice-id").value = result.codeResult.code
// $("#invoice-boxs").printThis();
setTimeout(function () {
Quagga.stop();
$('#livestream_scanner').modal('hide');
}, 300);
}
// $('#invoice-boxs').printThis();
});
// Stop quagga in any case, when the modal is closed
$('#livestream_scanner').on('hide.bs.modal', function () {
if (Quagga) {
$('#interactive').html('');
Quagga.stop();
}
});
// Call Quagga.decodeSingle() for every file selected in the
// file input
$("#livestream_scanner input:file").on("change", function (e) {
$('#livestream_scanner .modal-body .error').html('');
$('#interactive').html('');
document.getElementById('interactive').style = "height:auto;min-height:0px;max-height:60vh;";
if (e.target.files && e.target.files.length) {
Quagga.decodeSingle($.extend({}, fileConfig, { src: URL.createObjectURL(e.target.files[0]) }), function (result) {
var barcode = result.codeResult.code;
});
}
});
});
download the project and try run
output:
the given below invoice bill is static html page it means it not interacting to database
Summary
the above example we learned the basic concept of implementing barcode scanner using javascript next article we will learn how to create barcode for each item and store in database
once stored in database we will read specify product (name,price…)based information we will generate a dynamic invoice
thanks..
Note: once download project after you must and should check order css and js files
hello ! my name is Duttaluru Vijay.i am working in Microsoft .net technologies since 2016.
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
I like to share my work experience, research, and knowledge through my blog.
I love developing the applications in Microsoft technologies including asp.net mvc,c#.net, windfarms, SQL server,entityfrawork,Ajax,Jquery,WEbApi,Asp.net core, SEO, WordPress, UI..more
Latest posts by DuttaluruVijayakumar (see all)
- how to create ASP.NET Core 3 Web API Project - January 21, 2022
- JWT Authentication using OAUTH - January 10, 2022
- Ado.net database Transactions - January 9, 2022
Please update this to use aspectRatio max of 2, not 100, as 100 breaks in iOS 14+.
Thank you!
thanks sure