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

注意：vue-qrcode-reader这个插件只适用于本地调试或者带有https的域名，http是不能用这个插件的。具体缘由请查看官方文档

安装 npm install –save vue-qecode-reader

创建一个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>

引用组件

<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>