QR Code HTML5

by Rapha Souza

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>

			<input type="text" name="campo" id="campo">

			<div class="row">
				<div class="col-md-12">
					<div class="row">
						<div class="col">

							<div style="width:500px;" id="reader"></div>
						</div>
						<div class="col" style="padding:30px;">
							<h4>SCAN RESULT</h4>
							<div id="result">Result Here</div>
						</div>
					</div>
				</div>

			</div>

			<div class="row">
				<div class="col-md-5">
					<button type="button" onclick="runQR()">Run</button>
					<input type="text" class="form-control" id="txtQrCodeValue" name="txtQrCodeValue">
				</div>

			</div>

CSS

.result {
			background-color: green;
			color: #fff;
			padding: 20px;
		}

		.row {
			display: flex;
		}

JavaScript

function onScanSuccess(qrCodeMessage) {
			document.getElementById('result').innerHTML = '<span class="result">' + qrCodeMessage + '</span>';
		}
		function onScanError(errorMessage) {
			//handle scan error
		}
		function runQR() {
			console.log("run")
			var html5QrcodeScanner = new Html5QrcodeScanner(
				"reader", { fps: 10, qrbox: 250 });
			html5QrcodeScanner.render(onScanSuccess, onScanError);
		}