103 lines
2.8 KiB
JavaScript
103 lines
2.8 KiB
JavaScript
import { Html5Qrcode, Html5QrcodeSupportedFormats } from "./html5-qrcode.min.js"
|
|
|
|
export class QrScanner {
|
|
constructor(domId) {
|
|
domId = domId || 'qr-container';
|
|
this.el = document.getElementById(domId);
|
|
if (!this.el) {
|
|
this.el = createDom();
|
|
}
|
|
this.render_id = 'qr-reader';
|
|
this.config = { fps: 4, qrbox: (width, height) => {return { width: width * 0.8, height: height * 0.9 }}};
|
|
this.scanner = new Html5Qrcode(this.render_id, { });
|
|
this.el.addEventListener('click', this.stop.bind(this));
|
|
document.getElementById('qr-close').addEventListener('click', this.stop.bind(this));
|
|
}
|
|
|
|
start(title,onScanSuccess) {
|
|
this.el.style.display = 'flex';
|
|
document.getElementById('qr-title').innerText = title;
|
|
const _onScanSuccess = (decodedText, decodedResult) => {
|
|
onScanSuccess(decodedText);
|
|
}
|
|
const startScanner = () => {
|
|
this.scanner.start({ facingMode: "environment" }, this.config, _onScanSuccess)
|
|
.then((_) => {
|
|
console.log('start scan');
|
|
}, (e) => {
|
|
console.log('scan error: ', e);
|
|
});
|
|
}
|
|
startScanner();
|
|
}
|
|
|
|
stop() {
|
|
if (this.scanner && this.scanner.getState() === 2){
|
|
this.scanner.stop().then((_) => {
|
|
console.log('stop scan')
|
|
});
|
|
}
|
|
this.el.style.display = 'none';
|
|
}
|
|
}
|
|
export function showQr(svgStr) {
|
|
let el = document.getElementById('qr-container');
|
|
if (!el) {
|
|
el = createDom();
|
|
}
|
|
document.getElementById('qr-title').innerText = '';
|
|
let container = document.getElementById('qr-reader');
|
|
container.innerHTML = svgStr;
|
|
el.style.display = 'flex';
|
|
}
|
|
function createDom() {
|
|
addStyle(css);
|
|
let container = document.createElement('div');
|
|
container.id = 'qr-container';
|
|
container.className = 'qr-container';
|
|
let h2 = document.createElement('h2');
|
|
h2.innerText = 'Scan QR Code';
|
|
h2.id = 'qr-title';
|
|
container.appendChild(h2);
|
|
let div = document.createElement('div');
|
|
div.id = 'qr-reader';
|
|
div.className = 'qr-div';
|
|
container.appendChild(div);
|
|
let button = document.createElement('button');
|
|
button.innerText = 'Close';
|
|
button.id = 'qr-close';
|
|
container.appendChild(button);
|
|
document.body.appendChild(container);
|
|
var closeMe = function(e) {
|
|
if (e.target.id !== 'qr-container' && e.target.id !== 'qr-close') {
|
|
return false;
|
|
}
|
|
container.style.display = 'none';
|
|
}
|
|
container.addEventListener('click', closeMe);
|
|
button.addEventListener('click', closeMe);
|
|
return container;
|
|
}
|
|
const css = `
|
|
.qr-container {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0px;
|
|
top: 0px;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: auto;
|
|
display: none;
|
|
background: #0000006b;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
.qr-div {
|
|
position: relative;
|
|
padding: 0px;
|
|
width: 500px;
|
|
}
|
|
`
|