html5-qrcode 实现扫码-Toy模板网

这篇具有很好参考价值的文章主要介绍了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.
            },

在使用过程中发现是有很多新的参数的，但是总是使用的时候白屏打不开现在这些参数都是亲测有用的，公司的二维码不是白底黑字的，是激光打印到金属板上的，导致扫码发光很是严重，再添加了上述参数后，识别率大大提高，特此分享一下，本地联调也是可以的，

html5-qrcode,html5,前端,html