You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

97 lines
2.4 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.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() {
var URL = window.URL || window.webkitURL;
navigator.getUserMedia({
video: true
}, function (stream) {
video.src = URL.createObjectURL(stream);// 将获取到的视频流对象转换为地址
video.oncanplay = function(){
videoPlay();
video.width = video.videoWidth;
video.height = video.videoHeight;
}
}, function (error) {
alert(error.name || error);
});
}
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>