vue在调用摄像头扫码(vue-qrcode-reader)

1. vue-qrcode-reader

在浏览器端html中有一款依赖可以直接调用摄像头扫码，vue-qrcode-reader。
分别提供QrcodeStream、QrcodeDropZone、QrcodeCapture用来识别二维码。

1. QrcodeStream： 调用摄像头扫码
2. QrcodeDropZone：将图片移到识别区域内识别二维码
3. QrcodeCapture：选择原生拍照或者图片到浏览器识别二维码。

2. 安装

npm install vue-qrcode-reader

3. QrcodeStream直接调用摄像头扫码

1. init方法是初始化调用摄像头，此时如果摄像头报错会有很多提示，请酌情处理
2. decode方法，当识别到二维码会把识别信息触发出来

<template>
  <div>
    <p class="error">{
  
  { error }}</p>

    <p class="decode-result">Last result: <b>{
  
  { result }}</b></p>

    <qrcode-stream @decode="onDecode" @init="onInit" />
  </div>
</template>

<script>
import {
     
      QrcodeStream } from 'vue-qrcode-reader'

export default {
     
     

  components: {
     
      QrcodeStream