html5-qrcode 实现扫码

基本步骤跟这里是一样的，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。好像也是这么加的。