You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
104 lines
3.7 KiB
104 lines
3.7 KiB
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default">
|
|
<meta name="theme-color" content="#2196f3">
|
|
<link rel="stylesheet" href="lib/framework7/css/framework7.bundle.min.css">
|
|
<link rel="stylesheet" href="css/framework7-icons.css">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
<title>扫码</title>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div class="statusbar"></div>
|
|
<div class="view view-main view-init ios-edges" data-url="/">
|
|
<div class="page">
|
|
<div class="navbar">
|
|
<div class="navbar-inner">
|
|
<div class="left">
|
|
<a href="#" class="link back">
|
|
<i class="icon icon-back"></i>
|
|
<span class="ios-only">返回</span>
|
|
</a>
|
|
</div>
|
|
<div class="title sliding">扫码</div>
|
|
<div class="right">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-content">
|
|
<div class="block" style="text-align:center;">
|
|
<video style="width:320px;margin:0 auto;" id="v" autoplay></video>
|
|
</div>
|
|
<canvas style="display:none;" id="qr-canvas" width="800" height="600"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="lib/mobile-detect/mobile-detect.min.js"></script>
|
|
<script src="lib/framework7/js/framework7.bundle.min.js"></script>
|
|
<script src="js/app.js"></script>
|
|
<script src="lib/webqr/llqrcode.js"></script>
|
|
<script>
|
|
var gCtx;
|
|
var v = document.getElementById("v");
|
|
|
|
qrcode.callback = function (data) {
|
|
console.log(data);
|
|
alert(data);
|
|
setwebcam(false);
|
|
};
|
|
|
|
function isCanvasSupported() {
|
|
var elem = document.createElement('canvas');
|
|
return !!(elem.getContext && elem.getContext('2d'));
|
|
}
|
|
|
|
function setwebcam(first) {
|
|
var constraints = { video: { facingMode: "environment" }, audio: false };
|
|
if (navigator.mediaDevices.getUserMedia) {
|
|
navigator.mediaDevices.getUserMedia(constraints).
|
|
then(function (stream) {
|
|
v.srcObject = stream;
|
|
v.play();
|
|
setTimeout(captureToCanvas, 500);
|
|
}).catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}
|
|
else {
|
|
if (navigator.getUserMedia) {
|
|
navigator.getUserMedia(constraints, success, error);
|
|
}
|
|
else
|
|
if (navigator.webkitGetUserMedia) {
|
|
navigator.webkitGetUserMedia(constraints, success, error);
|
|
}
|
|
}
|
|
}
|
|
|
|
function captureToCanvas() {
|
|
gCtx.drawImage(v, 0, 0);
|
|
try {
|
|
qrcode.decode();
|
|
}
|
|
catch (e) {
|
|
console.log(e);
|
|
setTimeout(captureToCanvas, 500);
|
|
};
|
|
}
|
|
</script>
|
|
<script>
|
|
if (isCanvasSupported()) {
|
|
gCtx = document.getElementById("qr-canvas").getContext("2d");
|
|
setwebcam();
|
|
}
|
|
else {
|
|
alert('canvas is not supported');
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |