136 lines
4.9 KiB
PHP
136 lines
4.9 KiB
PHP
|
<!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>
|