QR Scanner Template
This commit is contained in:
parent
cc4b0e0063
commit
d58588cbbd
|
@ -0,0 +1,151 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>jsQR Demo</title>
|
||||||
|
<script src="./jsQR.js"></script>
|
||||||
|
<link href="https://fonts.googleapis.com/css?family=Ropa+Sans" rel="stylesheet">
|
||||||
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
||||||
|
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
|
||||||
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: 'Ropa Sans', sans-serif;
|
||||||
|
color: #333;
|
||||||
|
max-width: 640px;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#githubLink {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 12px;
|
||||||
|
color: #2D99FF;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
margin: 10px 0;
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#loadingMessage {
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#canvas {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#output {
|
||||||
|
margin-top: 20px;
|
||||||
|
background: #eee;
|
||||||
|
padding: 10px;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#output div {
|
||||||
|
padding-bottom: 10px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
#noQRFound {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>ENEI QR Scanner</h1>
|
||||||
|
<div id="loadingMessage">🎥 Unable to access video stream (please make sure you have a webcam enabled)</div>
|
||||||
|
<canvas id="canvas" hidden></canvas>
|
||||||
|
<br>
|
||||||
|
<form class="form" id="output">
|
||||||
|
<fieldset>
|
||||||
|
|
||||||
|
<!-- Text input-->
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="sQR">Teu QRCode</label>
|
||||||
|
<input id="sQR" name="sQR" type="text" placeholder="AABBCC112233" class="form-control form-control-sm" required="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Select Basic -->
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="location">Localização</label>
|
||||||
|
<select id="location" name="location" class="form-control form-control-sm">
|
||||||
|
<option value="1">Bar 1</option>
|
||||||
|
<option value="2">Bar 2</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Text input-->
|
||||||
|
<div class="form-group">
|
||||||
|
<label class="control-label" for="userQR">Scanned QR</label>
|
||||||
|
<input id="userQR" name="userQR" type="text" placeholder="sendQR" class="form-control form-control-sm input-md" required="">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button -->
|
||||||
|
<div class="form-group">
|
||||||
|
<button id="send" name="send" class="btn btn-primary">Enviar info</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var video = document.createElement("video");
|
||||||
|
var canvasElement = document.getElementById("canvas");
|
||||||
|
var canvas = canvasElement.getContext("2d");
|
||||||
|
var loadingMessage = document.getElementById("loadingMessage");
|
||||||
|
var outputContainer = document.getElementById("output");
|
||||||
|
var outputMessage = document.getElementById("outputMessage");
|
||||||
|
var outputData = document.getElementById("userQR");
|
||||||
|
|
||||||
|
function drawLine(begin, end, color) {
|
||||||
|
canvas.beginPath();
|
||||||
|
canvas.moveTo(begin.x, begin.y);
|
||||||
|
canvas.lineTo(end.x, end.y);
|
||||||
|
canvas.lineWidth = 4;
|
||||||
|
canvas.strokeStyle = color;
|
||||||
|
canvas.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Use facingMode: environment to attemt to get the front camera on phones
|
||||||
|
navigator.mediaDevices.getUserMedia({ video: { facingMode: "environment" } }).then(function(stream) {
|
||||||
|
video.srcObject = stream;
|
||||||
|
video.setAttribute("playsinline", true); // required to tell iOS safari we don't want fullscreen
|
||||||
|
video.play();
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
});
|
||||||
|
|
||||||
|
function tick() {
|
||||||
|
if (video.readyState === video.HAVE_ENOUGH_DATA) {
|
||||||
|
loadingMessage.hidden = true;
|
||||||
|
canvasElement.hidden = false;
|
||||||
|
outputContainer.hidden = false;
|
||||||
|
|
||||||
|
canvasElement.height = video.videoHeight;
|
||||||
|
canvasElement.width = video.videoWidth;
|
||||||
|
canvas.drawImage(video, 0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
var imageData = canvas.getImageData(0, 0, canvasElement.width, canvasElement.height);
|
||||||
|
var code = jsQR(imageData.data, imageData.width, imageData.height, {
|
||||||
|
inversionAttempts: "dontInvert",
|
||||||
|
});
|
||||||
|
if (code) {
|
||||||
|
drawLine(code.location.topLeftCorner, code.location.topRightCorner, "#FF3B58");
|
||||||
|
drawLine(code.location.topRightCorner, code.location.bottomRightCorner, "#FF3B58");
|
||||||
|
drawLine(code.location.bottomRightCorner, code.location.bottomLeftCorner, "#FF3B58");
|
||||||
|
drawLine(code.location.bottomLeftCorner, code.location.topLeftCorner, "#FF3B58");
|
||||||
|
outputMessage.hidden = true;
|
||||||
|
outputData.innerText = code.data;
|
||||||
|
} else {
|
||||||
|
outputMessage.hidden = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
requestAnimationFrame(tick);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
File diff suppressed because it is too large
Load Diff
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"ProjectFilePath": "/Users/henriquedias/enei2019/api/api.csproj",
|
"ProjectFilePath": "c:\\Users\\ZMiguel\\Desktop\\ENEI2019\\api\\api.csproj",
|
||||||
"TargetFramework": "netcoreapp2.1",
|
"TargetFramework": "netcoreapp2.1",
|
||||||
"TagHelpers": [],
|
"TagHelpers": [],
|
||||||
"Configuration": {
|
"Configuration": {
|
||||||
|
|
Loading…
Reference in New Issue