[add] first
This commit is contained in:
commit
0d33233e22
136
QRScan.php
Normal file
136
QRScan.php
Normal file
@ -0,0 +1,136 @@
|
||||
<!doctype html>
|
||||
|
||||
<head>
|
||||
<title>掃QRCode-Instascan</title>
|
||||
<html lang="utf8">
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale = 1,user-scalable = no">
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"
|
||||
charset="utf8"></script>
|
||||
|
||||
|
||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"
|
||||
charset="utf8"></script>
|
||||
|
||||
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"
|
||||
charset="utf8"></script>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
|
||||
integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous" charset="utf8"></script>
|
||||
|
||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
|
||||
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
|
||||
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" />
|
||||
|
||||
<style>
|
||||
body {
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
.preview-container {
|
||||
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
overflow: hidden;
|
||||
border: 3px dotted #ccc;
|
||||
margin: 0px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="Webapp">
|
||||
<div class="sidebar">
|
||||
<h2 style="text-align:center;">
|
||||
<? echo $_SERVER['HTTP_HOST']?> <br>掃描位置 QRCode
|
||||
</h2>
|
||||
|
||||
</div>
|
||||
<div class="preview-container">
|
||||
<div style="text-align:center;" id="saysome">QR 掃描器(掃描時請對焦)</div>
|
||||
<video id="preview"></video>
|
||||
</div>
|
||||
<section class="cameras text-center">
|
||||
<h2 class="text-center">鏡頭選擇</h2>
|
||||
<span v-if="cameras.length === 0" class="empty">找不到鏡頭</span>
|
||||
<span v-for="camera in cameras">
|
||||
<span v-if="camera.id != activeCameraId" :title="formatName(camera.name)">
|
||||
<a @click.stop="selectCamera(camera)" class="btn btn-info text-white btn-lg"><i
|
||||
class="fas fa-camera-retro"></i> 切換鏡頭</a>
|
||||
</span>
|
||||
</span>
|
||||
</section>
|
||||
<section class="scans">
|
||||
<!--
|
||||
<h2>評分位置</h2>
|
||||
<ul v-if="scans.length === 0">
|
||||
<li class="empty">未掃描任何位置</li>
|
||||
</ul>
|
||||
-->
|
||||
<transition-group name="scans" tag="ul">
|
||||
<!--li v-for="scan in scans" :key="scan.date" :title="scan.content">{{ scan.content }}</li-->
|
||||
|
||||
</transition-group>
|
||||
<!-- <div><a href="#" id="meL"></a></div> -->
|
||||
<div id="meL"></div>
|
||||
</section>
|
||||
|
||||
|
||||
</div>
|
||||
<!--script type="text/javascript" src="Webapp.js" charset="utf8"></script-->
|
||||
<script>
|
||||
var Webapp = new Vue({
|
||||
el: '#Webapp',
|
||||
data: {
|
||||
|
||||
scanner: null,
|
||||
activeCameraId: 1,
|
||||
cameras: [],
|
||||
scans: []
|
||||
},
|
||||
mounted: function () {
|
||||
var self = this;
|
||||
self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), mirror: false, scanPeriod: 5 });
|
||||
self.scanner.addListener('scan', function (content, image) {
|
||||
self.scans.unshift({ date: +(Date.now()), content: content });
|
||||
if (content) {
|
||||
document.getElementById("meL").innerHTML = content;
|
||||
// document.getElementById("meL").href = content;
|
||||
// document.getElementById("meL").click();
|
||||
} else {
|
||||
alert("QRcode 可能不正確!!");
|
||||
exit;
|
||||
}
|
||||
});
|
||||
Instascan.Camera.getCameras().then(function (cameras) {
|
||||
self.cameras = cameras;
|
||||
if (cameras.length > 0) {
|
||||
self.activeCameraId = cameras[cameras.length - 1].id;
|
||||
self.scanner.start(cameras[cameras.length - 1]);
|
||||
|
||||
} else {
|
||||
console.error('沒找到相機元素!!');
|
||||
}
|
||||
}).catch(function (e) {
|
||||
console.error(e);
|
||||
});
|
||||
},
|
||||
|
||||
methods: {
|
||||
formatName: function (name) {
|
||||
return name || '(unknown)';
|
||||
},
|
||||
selectCamera: function (camera) {
|
||||
this.activeCameraId = camera.id;
|
||||
this.scanner.start(camera);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
BIN
assets/qr.png
Normal file
BIN
assets/qr.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 556 B |
BIN
assets/setup.jpg
Normal file
BIN
assets/setup.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
10
index.html
Normal file
10
index.html
Normal file
@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<script>
|
||||
(function () {
|
||||
window.open("./QRScan.php", '_self');
|
||||
})()
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
48
instascan.min.js
vendored
Normal file
48
instascan.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user