mirror of
https://github.com/danbulant/phpdroid
synced 2026-05-19 04:08:51 +00:00
142 lines
3.7 KiB
PHP
142 lines
3.7 KiB
PHP
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Instascan</title>
|
|
<script type="text/javascript" src="https://os.danbulant.eu/instascan.min.js"></script>
|
|
<script type="text/javascript" src="https://os.danbulant.eu/components.js"></script>
|
|
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
|
|
</head>
|
|
<body onload="startRecord();">
|
|
|
|
<video id="bgvid" playsinline></video>
|
|
<div id="polina">
|
|
<h1>QR scanner</h1>
|
|
<p id="scan">Your scans today:</p>
|
|
<button id="pauseBTN" onclick="switchScan();" disabled>Waiting..</button>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
var vid = document.getElementById("bgvid");
|
|
var btn = document.getElementById("pauseBTN");
|
|
var scanRunning = false;
|
|
let scanner = new Instascan.Scanner({ video: document.getElementById('bgvid') });
|
|
function startRecord(){
|
|
console.log("starting scan");
|
|
scanRunning = true;
|
|
scanner.addListener('scan', function (content) {
|
|
console.log(content);
|
|
//document.getElementById("text").innerHTML = content;
|
|
$("#scan").after("<p>" + content + "</p>");
|
|
//snackbar("Scanned!",4000);
|
|
sendNotification("QR scanner","Succesfully scanned! Content was '" + content + "'");
|
|
});
|
|
Instascan.Camera.getCameras().then(function (cameras) {
|
|
if (cameras.length > 0) {
|
|
scanner.start(cameras[0]);
|
|
console.log("New camera: " + cameras[0].name);
|
|
btn.innerHTML = "Pause scan";
|
|
btn.disabled = false;
|
|
} else {
|
|
console.error('No cameras found.');
|
|
snackbar("No camera found!",2000);
|
|
btn.disabled = true;
|
|
home();
|
|
}
|
|
}).catch(function (e) {
|
|
console.error(e);
|
|
snackbar("An error occured.",4000);
|
|
btn.disabled = true;
|
|
home();
|
|
});
|
|
}
|
|
function stopRecord() {
|
|
console.log("stopping scan");
|
|
scanRunning = false;
|
|
vid.classList.add("stopfade");
|
|
scanner.stop();
|
|
btn.innerHTML = "Resume scan";
|
|
btn.disabled = false;
|
|
}
|
|
function switchScan(){
|
|
console.log("switching scan");
|
|
btn.disabled = true;
|
|
if(scanRunning){
|
|
stopRecord();
|
|
} else {
|
|
startRecord();
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
background: #000;
|
|
}
|
|
video {
|
|
position: fixed;
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
width: auto;
|
|
height: auto;
|
|
z-index: -100;
|
|
background-size: cover;
|
|
transition: 1s opacity;
|
|
}
|
|
.stopfade {
|
|
opacity: .5;
|
|
}
|
|
|
|
#polina {
|
|
font-family: Agenda-Light, Agenda Light, Agenda, Arial Narrow, sans-serif;
|
|
font-weight:100;
|
|
background: rgba(0,0,0,0.3);
|
|
color: white;
|
|
padding: 2rem;
|
|
width: 33%;
|
|
margin:2rem;
|
|
float: right;
|
|
font-size: 1.2rem;
|
|
}
|
|
h1 {
|
|
font-size: 3rem;
|
|
text-transform: uppercase;
|
|
margin-top: 0;
|
|
letter-spacing: .3rem;
|
|
}
|
|
#polina button {
|
|
display: block;
|
|
width: 80%;
|
|
padding: .4rem;
|
|
border: none;
|
|
margin: 1rem auto;
|
|
font-size: 1.3rem;
|
|
background: rgba(255,255,255,0.23);
|
|
color: #fff;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
transition: .3s background;
|
|
}
|
|
#polina button:hover {
|
|
background: rgba(0,0,0,0.5);
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
background:rgba(0,0,0,0.5);
|
|
padding: .5rem;
|
|
transition: .6s background;
|
|
}
|
|
a:hover{
|
|
background:rgba(0,0,0,0.9);
|
|
}
|
|
@media screen and (max-width: 500px) {
|
|
div{width:70%;}
|
|
}
|
|
@media screen and (max-device-width: 800px) {
|
|
html { background: url(https://thenewcode.com/assets/images/polina.jpg) #000 no-repeat center center fixed; }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|