基本步骤跟这里是一样的，H5项目实现扫描二维码功能 — html5-qrcode_html扫码功能_浮桥的博客-CSDN博客
在这里主要记录一下使用中的问题 ，这个插件的使用只有在手机自带浏览器中可以，若是换成其他浏览器比如UC
function scanQRCode() {
if(typeof ucweb != 'undefined' && typeof ucweb.startScanQRCode == 'function') {
ucweb.startScanQRCode(function(result) {
alert(result);
});
} else {
alert('请在UC浏览器中打开该页面！');
}
}浏览器是自带扫一扫功能的所以在不同浏览器可能方法不同，使用自带的没有进行 深入研究。
使用中发现
const getCameras = () => {
Html5Qrcode.getCameras()
.then((devices) => {
console.log('摄像头信息', devices);
if (devices && devices.length) {
}
})
.catch((err) => {
// handle err
console.log('获取设备信息失败', err); // 获取设备信息失败
});
};这部分代码是获取设备相机数量 以及开启的是前置还是后置 但是在使用的时候已经设定为后置了，觉得这部分的获取就有点多此一举。
{ facingMode: "environment" }, // retreived in the previous step.这个组件只对纸质二维码且要求二维码不能太小，经测在金属板且反光的材质上，识别精度需要调整到合适的角度，最后无奈放弃转而使用video+canvas 一屏截取二维码传给后端解析 提高识别率
简单的人脸识别（video+canvas）_月鸟飞阿达的博客-CSDN博客
使用H5code 新发现 解决了当前的困难，发现了一些新的参数使用特来补充一下
start(
{
facingMode: "environment",
}, // retreived in the previous step.
{
fps: 3, // 设置每秒多少帧
qrbox: { width: 250, height: 250 },
tryHarder: true,
videoConstraints: { //提高输入视频的分辨率
width: { ideal: 1920 },
height: { ideal: 1080 },
facingMode: 'environment',//必须保持一致不然会变为前置摄像头
},
autofocus:true, //自动对焦 但使用的时候没有体会到
colorDark: '#0000ff', //加深二维码黑色部分的颜色提高识别度
colorLight: '#ffffff',//这个应该是提高非黑即白部分的亮度 提高识别度
visualFeedback:true, //开启视觉反馈 没有体会到
halfSample:true,//缩小二维码提高识别精度吧
// scannable, rest shaded.
},在使用过程中发现是有很多新的参数的，但是总是使用的时候白屏打不开现在这些参数都是亲测有用的，公司的二维码不是白底黑字的，是激光打印到金属板上的，导致扫码发光很是严重，再添加了上述参数后，识别率大大提高，特此分享一下，本地联调也是可以的，
使用的是vite ，在下面加这个就变成https 了，就可以在手机上联调了，vue.config。好像也是这么加的。
原文地址:https://blog.csdn.net/weixin_43666952/article/details/130658143
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_35840.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
