vue/h5,利用vue-qrcode-reader实现简单的实时扫一扫功能

描述：利用vue-qrcode-reader插件实现h5/wap端简单的扫一扫功能
参考文档：vue-qrcode-reader–>官方文档
注意：vue-qrcode-reader这个插件只适用于本地调试或者带有https的域名，http是不能用这个插件的。具体原因请查看官方文档

效果展示

1.点击按钮打开实时扫一扫

2.进入页面就调用扫一扫

一、安装

工具： vs code
命令: npm install --save vue-qecode-reader,或者利用cnpm,这样会更快一点，cnpm install --save vue-qrcode-reader。

二、目录结构

三、实现

1.QrcodeReader.vue

camera 有着以下属性：rear： 当camera为rear值的时候调用前摄像头； front： 当camera为front值的时候调用后摄像头; off： 当camera为off值的时候调用关闭摄像头，会获取最后一帧用于显示；auto： 是用于开始获取摄像头，也是默认属性。
torch 的属性是布尔值，当为true的时候打开手电筒，false是关闭摄像头

<template>
  <div class="qrcode">
    <div class="code">
      <!-- decode是扫描结果的函数，torch用于是否需要打开手电筒，init用于检查该设备是否能够调用摄像头的权限，camera可用于打开前面或者后面摄像头  -->
      <qrcode-drop-zone @decode="onDecode">
        <qrcode-stream @decode="onDecode" :torch="torchActive" @init="onInit" :camera="camera" />
      </qrcode-drop-zone>
      <div class="code-button">
        <button @click="switchCamera">相机反转</button>
        <button @click="ClickFlash">打开手电筒</button>
        <button @click="turnCameraOff">关闭相机</button>
      </div>
    </div>
  </div>
</template>

<script>
// 引用vue-qrcode-reader插件
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'

export default {
  name: 'Approve',
  props: {
    camera: {
      type: String,
      default: 'rear',
    },
    torchActive: {
      type: Boolean,
      default: false,
    },
    qrcode: {
      type: Boolean,
      default: false,
    },
    noStreamApiSupport: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {}
  },
  created() {},

  components: {
    // 注册组件
    QrcodeStream,
    QrcodeDropZone,
    QrcodeCapture,
  },
  methods: {
    // 扫码结果回调
    onDecode(result) {
      this.$emit('onDecode', result)
    },
    // 相机反转
    switchCamera() {
      this.$emit('switchCamera')
    },
    // 关闭相机？？？？？？
    turnCameraOff() {
      this.$emit('turnCameraOff')
    },
    // 打开手电筒
    ClickFlash() {
      this.$emit('ClickFlash')
    },
    // 检查是否调用摄像头
    onInit(promise) {
      this.$emit('onInit', promise)
    },
  },
}
</script>

2.index.vue

<template>
  <div class="qrcode">
    <button @click="clickCode">打开相机</button>
    <qrcode
      :qrcode="qrcode"
      v-show="qrcode"
      :camera="camera"
      :torchActive="torchActive"
      @switchCamera="switchCamera"
      @ClickFlash="ClickFlash"
      @turnCameraOff="turnCameraOff"
      @onDecode="onDecode"
      @onInit="onInit"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      qrcode: false,
      torchActive: false,
      camera: 'off',
    }
  },
  mounted() {},
  methods: {
    // 打开相机
    clickCode() {
      // camera:: 'rear'--前摄像头，'front'后摄像头，'off'关闭摄像头，会获取最后一帧显示，'auto'开始获取摄像头
      this.qrcode = true
      this.camera = 'rear'
    },
    // 扫码结果回调
    onDecode(result) {
       // result, 扫描结果，可以根据自己的需求来实现相应的功能 
      console.log(result)
      this.turnCameraOff()
    },
    // 相机反转
    switchCamera() {
      switch (this.camera) {
        case 'front':
          this.camera = 'rear'
          break
        case 'rear':
          this.camera = 'front'
          break
        default:
          this.$toast('错误')
      }
    },
    // 关闭相机？？？？？？
    turnCameraOff() {
      this.camera = 'off'
      this.qrcode = false
    },
    // 打开手电筒
    ClickFlash() {
      switch (this.torchActive) {
        case true:
          this.torchActive = false
          break
        case false:
          this.torchActive = true
          break
        default:
          this.$toast('错误')
      }
    },

    // 检查是否调用摄像头
    async onInit(promise) {
      try {
        await promise
      } catch (error) {
        if (error.name === 'StreamApiNotSupportedError') {
        } else if (error.name === 'NotAllowedError') {
          this.errorMessage = 'Hey! I need access to your camera'
        } else if (error.name === 'NotFoundError') {
          this.errorMessage = 'Do you even have a camera on your device?'
        } else if (error.name === 'NotSupportedError') {
          this.errorMessage =
            'Seems like this page is served in non-secure context (HTTPS, localhost or file://)'
        } else if (error.name === 'NotReadableError') {
          this.errorMessage =
            "Couldn't access your camera. Is it already in use?"
        } else if (error.name === 'OverconstrainedError') {
          this.errorMessage =
            "Constraints don't match any installed camera. Did you asked for the front camera although there is none?"
        } else {
          this.errorMessage = 'UNKNOWN ERROR: ' + error.message
        }
      }
    },
  },
  components: {
    // 注册
    qrcode: () => import('@/components/QrcodeReader'),
  },
}
</script>

四、总结

这篇文章也同步到掘金网站上面，我的掘金地址
源代码地址
gitee地址------->
github地址------->