vue 实现扫码

Vue 实现扫码功能

在Vue中实现扫码功能通常需要借助第三方库或原生API。以下是几种常见的方法：

使用 vue-qrcode-reader 库

安装 vue-qrcode-reader 库：

npm install vue-qrcode-reader

在Vue组件中使用：

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

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

export default {
  components: { QrcodeStream },
  methods: {
    onDecode(decodedString) {
      console.log(decodedString)
    }
  }
}
</script>

使用 html5-qrcode 库

安装 html5-qrcode：

npm install html5-qrcode

在Vue组件中使用：

<template>
  <div id="qr-reader"></div>
</template>

<script>
import { Html5Qrcode } from 'html5-qrcode'

export default {
  mounted() {
    const html5QrCode = new Html5Qrcode("qr-reader")
    html5QrCode.start(
      { facingMode: "environment" },
      { fps: 10 },
      (decodedText) => {
        console.log(decodedText)
      },
      (errorMessage) => {
        console.log(errorMessage)
      }
    )
  }
}
</script>

使用原生API（适用于移动设备）

通过调用设备的摄像头API实现扫码：

<template>
  <video ref="video" autoplay></video>
  <canvas ref="canvas" style="display:none;"></canvas>
</template>

<script>
export default {
  mounted() {
    this.initCamera()
  },
  methods: {
    async initCamera() {
      const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })
      this.$refs.video.srcObject = stream
    }
  }
}
</script>

注意事项

• 确保在HTTPS环境下使用摄像头API，否则可能无法正常工作。
• 移动端设备可能需要用户授权才能访问摄像头。
• 不同浏览器对摄像头的支持程度不同，需进行兼容性测试。

以上方法可以根据项目需求选择适合的方案实现扫码功能。vue-qrcode-reader 提供了更简单的集成方式，而 html5-qrcode 则提供了更多自定义选项。原生API适合需要深度定制的场景。