H5 vue使用摄像头实现扫描二维码html5-qrcode

html5-qrcode库是一个JavaScript库，只需要提供一个元素容器即可实现扫码功能，有的人说扫描的效率很低，对着二维码1个小时都不一定能识别出来。我咋觉得好用呢？一扫就出来了

官网链接：Getting started | ScanApp

安装 引入

npm install --save-dev html5-qrcode 

import { Html5Qrcode,} from 'html5-qrcode'

页面容器

<div id="reader" style="width: 100%; margin: 0 auto;"></div>

使用

使用之前要利用navigator.mediaDevices.getUserMedia判断用户是否给浏览器访问相机的权限。

navigator.mediaDevices.getUserMedia({

          video: {

            width: 300,

            height: 300,

            facingMode: { exact: 'environment' },

          },

        })

        .then(function (stream) {

         // 允许访问摄像头，可以继续html5Qrcode扫码逻辑

          this.startScan()

        })

        .catch(function (err) {

          alert(err+'无法访问摄像头')

        })

    },

 开始扫码

    startScan() {

      let that = this

      // 如果出现未定义或找不到错误，可以在其他地方提前获取到new Html5Qrcode('reader')

      that.html5Qrcode = new Html5Qrcode('reader')

      // 设置宽度为最小边的百分之64%

      let qrboxFunction = function (viewfinderWidth, viewfinderHeight) {

        let minEdgePercentage = 0.64 // 64%

        let minEdgeSize = Math.min(viewfinderWidth, viewfinderHeight)

        let qrboxSize = Math.floor(minEdgeSize * minEdgePercentage)

        return {

          width: qrboxSize,

          height: qrboxSize,

        }

      }

      // 可以直接写成 const config = { fps: 10, qrbox: width: 250, height: 250}

      const config = { fps: 10, qrbox: qrboxFunction }

      const qrCodeSuccessCallback = (decodedText, decodedResult) => {

        if (decodedText) {

        // 扫到结果，就停止扫描

          that.stopScan()

         // 这里是传给父组件的-扫描的结果

          that.$emit('qrCodeSuccess', decodedText)

        }

      }

      const qrCodeErrorCallback = (errorMessage, error) => {}

// 开始扫码  这里没有规制使用某个摄像头id扫码，一般情况下应该不需要吧，如果要，可以看文档的cameraId

that.html5Qrcode.start(

          { facingMode: { exact: 'environment' } }, //强迫使用后置摄像头 user：前置

          config,

          qrCodeSuccessCallback,

          qrCodeErrorCallback,

        )

        .catch((err) => {

          var errMsg = ''

          if (err.indexOf('NotAllowedError') != -1) {

            errMsg = 'ERROR: 您需要授予相机访问权限'

          } else if (err.indexOf('NotFoundError') != -1) {

            errMsg = 'ERROR: 这个设备上没有摄像头'

          } else if (err.indexOf('NotSupportedError') != -1) {

            errMsg = 'ERROR: 所需的安全上下文(HTTPS、本地主机)'

          } else if (err.indexOf('NotReadableError') != -1) {

            errMsg = 'ERROR: 相机被占用'

          } else if (err.indexOf('OverconstrainedError') != -1) {

            errMsg = 'ERROR: 安装摄像头不合适'

          } else if (err.indexOf('StreamApiNotSupportedError') != -1) {

            errMsg = 'ERROR: 此浏览器不支持流API'

          } else {

            errMsg = err

          }

          that.$toast(errMsg)

        })

    },

停止扫码

// 停止扫描

stopScan() {

      if (this.html5Qrcode) {

        this.html5Qrcode.stop()

      }

    },

 注意

一定要写上面标红的成功与失败的回调函数，找了很多办法没有扫描成功，就是因为没有写。也可以直接看官方文档，也能看懂。 

文档某些解释 

Html5QrcodeScanner：简单模式（使用默认用户界面）

Html5Qrcode：专业模式（使用自己的用户界面）

Html5Qrcode.getCameras()：要获取支持的相机列表，请使用静态方法Html5Qrcode.getCameras（）进行查询。此方法返回一个Promise，其中包含支持的设备列表，格式为{id:“id”，label:“label”}。

exact：准确的；精确的；严格的；强迫