vue中使用vue-qrcode-reader自动检测并解码来自摄像机流的QR码

1.装包

npm install vue-qrcode-reader

2.在目标页面文件中/src/views/index.vue引入

import { QrcodeStream } from 'vue-qrcode-reader'

3.使用

<template>

    <div class="content">

        <img

        style="width:100%;height:174px;"

        src="@/assets/img/saomiao.gif"

        alt=""
    
        />

       <qrcode-stream class="QrcodeStream" @decode="onDecode" @init="onInit" />
       <span>将二维码放入框内，即可自动扫描</span>
    </div>

</template>
<script>
import { QrcodeStream } from 'vue-qrcode-reader'
export default {
  components: { QrcodeStream },
  data () {
    return {
      result: '', //扫码结果信息
      error: '' //错误信息
    }
  },
  methods: {
    // 二维码扫描跳转
    onDecode (result) {
      this.result = result
      window.location.href = this.result
      this.$router.push(result)
    }
  }
}
</script>

效果：