Описание: использоватьvue-qrcode-readerПлагин реализует простую функцию сканирования на стороне h5/wap.

Справочная документация:vue-qrcode-reader-->официальная документация

Примечание. Vue-QRCode-reader Этот плагин применяется только к локальной отладке или доменому имени с HTTPS, HTTP не может использовать этот плагин. Увидеть официальные данные документа

Показать результаты

1. Нажмите кнопку, чтобы открыть сканирование в реальном времени.

2. Вызов сканирования при входе на страницу

1. Установка

Инструменты: против кода

Команда: npm install --save vue-qecode-reader или используйте cnpm, что будет быстрее, cnpm install --save vue-qrcode-reader.

Во-вторых, структура каталогов.

3. Реализация

1.QrcodeReader.vue

камера имеет следующие свойства: задняя: когда камера имеет значение сзади, вызывается передняя камера; передняя: когда камера является значением спереди, вызывается задняя камера; выкл.: когда камера имеет значение выкл., камера вызывается, чтобы закрыть камеру, и будет получен последний кадр.Для отображения; 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>

4. Резюме

Эта статья также синхронизирована с веб-сайтом CSDN,мой CSDN-адрес

Адрес источника

адрес гите -->
адрес гитхаба -->