<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=0.5, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>扫描二维码</title>
<link rel="stylesheet" href="source/scan.css">
<link rel="stylesheet" href="../../css/public.css">
<link rel="stylesheet" href="../../css/mui/mui.min.css"/>
</head>
<body>
<div class="header">
<span class="head-left head-back" onclick="back1()"></span>
<span class="head-center">二维码扫描</span>
<span class="head-right head-home" onclick="backToHome()"></span>
</div>
<div class="content">
<video id="video" width="100%" height="100%" autoplay="autoplay" style="object-fit: fill">您的浏览器不支持该功能~</video>
<canvas id="canvas" width="500px" height="500px" style="display: none"></canvas>
<div class="bc-scan"></div>
<div class="through-line"></div>
</div>
<script src="../../js/basejs.js"></script>
<script src="source/reqrcode.js"></script>
<script>
var video = document.getElementById('video');
var currentStream;
var labelId = "";//后置摄像头的id
function stopMediaTracks(stream) {
stream.getTracks().forEach(function (track) {
track.stop();
});
}
//获取设备信息，获取后置摄像头信息
function gotDevices(mediaDevices) {
var count = 1;
for (var i = 0; i < mediaDevices.length; i++) {
if (mediaDevices[i].kind === 'videoinput') {
var label = mediaDevices[i].label || 'Camera ' + count++;
if ("camera 0, facing back" == label) {
labelId = mediaDevices[i].deviceId;
console.log("deviceId1====" + label);
getMedia();
break;
}
var textNode = document.createTextNode(label);
}
}
}
//打开摄像头，防止无限循环
function gotDevices2(mediaDevices) {
var count = 1;
for (var i = 0; i < mediaDevices.length; i++) {
if (mediaDevices[i].kind === 'videoinput') {
var label = mediaDevices[i].label || 'Camera ' + count++;
if ("camera 0, facing back" == label) {
labelId = mediaDevices[i].deviceId;
console.log("deviceId1====" + label);
takePhoto();
break;
}
var textNode = document.createTextNode(label);
}
}
}
//打开相机
function getMedia() {
if (typeof currentStream !== 'undefined') {
stopMediaTracks(currentStream);
}
var videoConstraints = {};
if (labelId === '') {
videoConstraints.facingMode = 'environment';
} else {
videoConstraints.deviceId = {exact: labelId};
console.log("deviceId2======" + videoConstraints.deviceId);
}
var constraints = {
video: videoConstraints,
audio: false
};
navigator.mediaDevices.getUserMedia(constraints).then(function (stream) {
currentStream = stream;
video.srcObject = stream;
return navigator.mediaDevices.enumerateDevices();
}).then(gotDevices2).catch(function (error) {
console.error(error);
alert("您拒绝了使用摄像头的权限，扫描功能将无法使用，请重启浏览器");
});
}
navigator.mediaDevices.enumerateDevices().then(gotDevices);
function back1() {
window.location.href = "../pickOrderint/pickOrder.html"
}
//拍照识别
function takePhoto() {
//获得Canvas对象
var video = document.getElementById("video");
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, 500, 500);
// 把画布的内容转换为base64编码格式的图片
var data = canvas.toDataURL('image/png', 1); //1表示质量(无损压缩)
//解析二维码
qrcode.decode(data);
qrcode.callback = function (imgMsg) {
console.log(imgMsg);
if (imgMsg == 'error decoding QR Code') {
takePhoto();
} else {
alert("扫描成功，" + imgMsg);
}
}
}
</script>
</body>
</html>
评论4
最新资源