Skip to content

E
event
Commit 42686604 by fezrul
Options

scanner

parent aa7c763f
Showing with 144 additions and 31 deletions
resources/views/admin/detail.blade.php
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
<div class="cards-footer"> <div class="cards-footer">
<div class="stats"> <div class="stats">
<i class="material-icons text-danger">donut_small</i> <i class="material-icons text-danger">donut_small</i>
<a href="/attenance/{{$event->id}}">Start Taking attendance</a> <a href="/attendance/{{$event->id}}">Start Taking attendance</a>
</div> </div>
</div> </div>
</div> </div>
......
resources/views/admin/scan.blade.php
@extends('layouts.scan') <!doctype html>
@section('content') <html lang="zxx">
<div class="tab-content p-5 bg-light"> <head>
<h2 class="mb-4">Scan Qr code</h2> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Event Handler">
<meta name="author" content="3F Resources">
<title>MyEvent - 3F Resources.com</title>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" rel="stylesheet">
<!-- CSS Files -->
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/font-awesome.min.css" rel="stylesheet" />
<link href="../css/material-kit.css" rel="stylesheet" />
<link href="../css/owl.carousel.css" rel="stylesheet" />
<link href="../css/style.css" rel="stylesheet" />
<link rel="stylesheet" href="../scans.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webrtc-adapter/3.3.3/adapter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script>
<!-- favicon -->
<link rel="icon" href="img/favicon.ico">
<!-- Colors -->
<link rel="stylesheet" href="../css/red.css">
<!-- Skin switcher -->
<!-- Manually link your desire skin -->
</head>
<body>
<div class="cards"> <div class="" id="headers">
<div class="cards-header cards-chart" data-background-color="blue" style="padding:20px"> <!-- Header -->
<div class="input-group mb-3">
<script type="text/javascript" src="https://rawgit.com/schmich/instascan-builds/master/instascan.min.js"></script> <div class="contact-us">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card card-contact">
<form id="contactForm" method="post" novalidate>
<div class="header header-raised header-primary text-center">
<h4 class="card-title">Attendance of guest</h4>
</div>
<div class="card-layer"></div>
<div class="content">
<div class="form-group label-floating">
<div id="app">
<div class="preview-container">
<video id="preview"></video> <video id="preview"></video>
<script type="text/javascript"> </div>
let scanner = new Instascan.Scanner({ video: document.getElementById('preview') }); </div>
scanner.addListener('scan', function (content) {
console.log(content);
});
Instascan.Camera.getCameras().then(function (cameras) {
if (cameras.length > 0) {
scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).catch(function (e) {
console.error(e);
});
</script> </div>
<div class="row">
<section class="scans">
<h2>Scans</h2>
<ul v-if="scans.length === 0">
<li class="empty">No scans yet</li>
</ul>
<transition-group name="scans" tag="ul">
<li v-for="scan in scans" :key="scan.date" :title="scan.content"></li>
</transition-group>
</section>
<div class="col-md-12">
oihohuhuihuihuih
</div> </div>
</div>
</div>
</form>
</div>
<!-- <div class="row">
<br>
<br>
</div> </div>
<div class="cards-content"> -->
<h4 class="title"></h4>
<p class="category"><div class="form-group"> </div>
<div class="form-check form-check-inline">
</div> </div>
</div></p>
</div> </div>
</div>
</section>
</div> </div>
<!-- End Header -->
</div>
<!-- End contact -->
<!-- Subscribe -->
<!-- End subscribe -->
<!-- Footer -->
</div> <!-- ./Footer section -->
<!-- End footer -->
<!-- Core JS Files -->
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
scanner: null,
activeCameraId: null,
cameras: [],
scans: []
},
mounted: function () {
var self = this;
self.scanner = new Instascan.Scanner({ video: document.getElementById('preview'), scanPeriod: 5 });
self.scanner.addListener('scan', function (content, image) {
self.scans.unshift({ date: +(Date.now()), content: content });
});
Instascan.Camera.getCameras().then(function (cameras) {
self.cameras = cameras;
if (cameras.length > 0) {
self.activeCameraId = cameras[0].id;
self.scanner.start(cameras[0]);
} else {
console.error('No cameras found.');
}
}).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>
@endsection </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment