mirror of
https://github.com/cnwhy/QRCode-decode.git
synced 2026-08-12 20:31:40 +08:00
100 lines
2.6 KiB
HTML
100 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
|
<title>qrcode-decode</title>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="file" name="file" id="file">
|
|
<br>
|
|
<button id="videoBut" onclick="buttonClick()">启用摄像头</button><br>
|
|
<video id="video" width="300"></video>
|
|
<div></div>
|
|
|
|
</body>
|
|
<script type="text/javascript" src="../dist/qr-decode.umd.js"></script>
|
|
<script>
|
|
document.getElementById('file').onchange = function (event) {
|
|
var el = event.target;
|
|
if (!el.files.length) return;
|
|
var file = el.files[0];
|
|
new Promise(function (ok, no) {
|
|
if (window.URL && window.URL.createObjectURL) {
|
|
ok(window.URL.createObjectURL(file));
|
|
} else if (typeof FileReader) {
|
|
var reader = new FileReader();
|
|
reader.onload = evt => {
|
|
ok(evt.target.result);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
} else {
|
|
no('浏览器不支持');
|
|
}
|
|
}).then((src) => {
|
|
qrDecode.decodeByUrl(src, function (err, txt) {
|
|
var msg = document.createElement("div")
|
|
if (err) {
|
|
console.log(err);
|
|
msg.innerHTML = "err: <br>" + err;
|
|
} else {
|
|
msg.innerHTML = txt;
|
|
}
|
|
document.body.appendChild(msg);
|
|
})
|
|
|
|
});
|
|
}
|
|
|
|
var video = document.getElementById('video');
|
|
var videoBut = document.getElementById('videoBut');
|
|
var xc;
|
|
videoBut.onclick = videoEnable;
|
|
|
|
function videoEnable() {
|
|
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
|
|
navigator.mediaDevices.getUserMedia({
|
|
video: true
|
|
}).then(function (stream) {
|
|
video.srcObject = stream; // 用 srcObject 替代已废弃的 URL.createObjectURL(stream)
|
|
video.oncanplay = function () {
|
|
videoPlay();
|
|
video.width = video.videoWidth;
|
|
video.height = video.videoHeight;
|
|
}
|
|
}).catch(function (error) {
|
|
alert(error.name || error);
|
|
});
|
|
} else {
|
|
alert('当前浏览器不支持摄像头访问');
|
|
}
|
|
}
|
|
|
|
function videoStop() {
|
|
clearInterval(xc);
|
|
video.pause();
|
|
videoBut.innerText = '启动';
|
|
videoBut.onclick = videoPlay;
|
|
}
|
|
function videoPlay() {
|
|
video.play();
|
|
videoBut.innerText = '停止';
|
|
xc = setInterval(function () {
|
|
try {
|
|
var txt = qrDecode.decodeByDom(video);
|
|
var msg = document.createElement("div")
|
|
msg.innerHTML = "识别到二维码: " + txt;
|
|
document.body.appendChild(msg);
|
|
videoStop();
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
}, 300)
|
|
videoBut.onclick = videoStop;
|
|
}
|
|
</script>
|
|
|
|
</html> |