这段代码对条码和二维码识别率都比较高，但是需要调用https://github.com/mebjas/html5-qrcode
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" c />
<meta name="HandheldFriendly" c />
<meta name="MobileOptimized" c />
<title>二维码扫描</title>
<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
<style type="text/css">
#reader { width: 100%; height: calc(100% - 44px); position: absolute; top: 0; }
footer { width: 100%; height: 44px; position: absolute; bottom: 0px; line-height: 44px; text-align: center; color: #FFF; }
.fbt { width: 50%; height: 100%; background-color: #FFCC33; float: left; }
.fbt:active { -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.5); }
</style>
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script src="js/html5-qrcode.min.js"></script> <!-- 确保最新版：https://github.com/mebjas/html5-qrcode -->
<script type="text/javascript">
var ws = null, domready = false;
var html5QrCode = null;
function triggerEventByCurrent(current, result) {
const eventMap = {
"khzs": "khzsjs", "ckdb": "ckdbjs", "tpsm": "tpsmjs", "hbtp": "hbtpjs",
"cprkphone": "cprkphonejs", "cprk": "cprkjs", "ckpdd": "ckpddjs", "cwpdd": "cwpddjs",
"yclll": "ycllljs", "ycltllt": "ycltlltjs", "zjgll": "zjglljs", "zjgtl": "zjgtljs",
"xxck": "xxckjs", "ycltlzt": "ycltlztjs", "zjgtlzt": "zjgtlztjs", "zjgtllt": "zjgtlltjs",
"zjgtlyl": "zjgtlyljs", "gxjhhb": "gxjhhbjs", "gxjhbhzg": "gxjhbhzgjs"
};
const eventName = eventMap[current];
if (eventName) {
var phone = plus.webview.getWebviewById(current);
mui.fire(phone, eventName, { id: result });
console.log("触发事件:", eventName, "结果:", result);
} else {
console.log("未找到对应事件，currentidex:", current);
}
}
async function startScanning() {
console.log("开始初始化扫描");
html5QrCode = new Html5Qrcode("reader");
// 获取摄像头列表并选择后置摄像头
try {
const devices = await Html5Qrcode.getCameras();
console.log("可用摄像头:", devices);
const rearCamera = devices.find(device =>
device.label.toLowerCase().includes("back") ||
device.label.toLowerCase().includes("rear")
) || devices[0]; // 默认取第一个摄像头作为备用
if (!rearCamera) {
console.log("未找到后置摄像头，使用默认摄像头");
} else {
console.log("选择后置摄像头:", rearCamera.label);
}
// 配置扫描参数
const config = {
fps: 20,
qrbox: { width: 300, height: 100 },
aspectRatio: 16/9,
formatsToSupport: [
Html5QrcodeSupportedFormats.CODE_128,
Html5QrcodeSupportedFormats.QR_CODE
]
};
// 启动扫描
await html5QrCode.start(
rearCamera.id || { facingMode: "environment" },
config,
(decodedText, decodedResult) => {
console.log("扫描结果:", decodedText, "类型:", decodedResult.result.format);
var current = localStorage.getItem("currentidex");
triggerEventByCurrent(current, decodedText);
html5QrCode.pause();
setTimeout(() => {
console.log("恢复扫描");
html5QrCode.resume();
}, 1000);
},
(errorMessage) => {
// console.log("扫描错误:", errorMessage);
}
);
console.log("扫描已启动");
} catch (err) {
console.log("扫描初始化失败:", err);
}
}
function plusReady() {
if (ws || !window.plus || !domready) {
console.log("plusReady 未执行: ws=", ws, "plus=", !!window.plus, "domready=", domready);
return;
}
ws = plus.webview.currentWebview();
console.log("plusReady 执行");
if (!document.getElementById("reader")) {
console.log("错误: #reader 元素未找到");
return;
}
startScanning();
ws.show('pop-in');
}
if (window.plus) {
console.log("plus 已加载");
plusReady();
} else {
console.log("plus 未加载");
document.addEventListener('plusready', plusReady, false);
}
document.addEventListener('DOMContentLoaded', function() {
domready = true;
console.log("DOM 已加载，domready:", domready);
plusReady();
}, false);
function scanPicture() {
plus.gallery.pick(function(path) {
const html5QrCode = new Html5Qrcode("reader");
html5QrCode.scanFile(path, true)
.then(decodedText => {
console.log("相册扫描结果:", decodedText);
var current = localStorage.getItem("currentidex");
triggerEventByCurrent(current, decodedText);
})
.catch(err => console.log("相册扫描失败:", err));
}, function(err) {
console.log('Failed: ' + err.message);
});
}
function back() {
console.log('执行返回操作');
if (html5QrCode) {
html5QrCode.stop();
}
ws.close();
}
</script>
</head>
<body style="background-color: #000000;">
<div id="reader"></div>
<footer>
<div class="fbt" >完成扫描</div>
<div class="fbt" >取 消</div>
<div class="fbt" >从相册选择二维码</div>
</footer>
</body>
</html>
// triggerEventByCurrent(current, decodedText);这个代码是为了区别哪个网页调用的。
// 启动扫描
await html5QrCode.start(
rearCamera.id || { facingMode: "environment" },
config,
(decodedText, decodedResult) => {
console.log("扫描结果:", decodedText, "类型:", decodedResult.result.format);
var current = localStorage.getItem("currentidex");
triggerEventByCurrent(current, decodedText);
html5QrCode.pause();
setTimeout(() => {
console.log("恢复扫描");
html5QrCode.resume();
}, 1000);
},
(errorMessage) => {
// console.log("扫描错误:", errorMessage);
}
);