想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？

Question

想在H5项目，Vue3中实现扫一扫的功能，怎么实现比较好？或者那种插件兼容性会比较好呢？

Answer 1

https://gruhn.github.io/vue-qrcode-reader/

Answer 2

用H5+联盟的barcode接口来封装一个，兼容性也好。
网址：https://www.html5plus.org/doc/zh_cn/barcode.html

Answer 3

得看你的H5是在什么环境下使用的，如果是微信内和钉钉内部的H5微应用，那么直接调用微信JSSDK或者钉钉的JSAPI就好了，扫码功能是最全最快的，二维码和条形码都能识别。

• #微信扫一扫 | 微信网页开发 / JS-SDK说明文档
• 扫条形码、二维码 - 钉钉开放平台

如果脱离微信和钉钉使用的，那么得看你想要扫码的类型是什么。

• 二维码的话可以用 cozmo/jsQR - Github
• 条形码的话可以用 ericblade/quagga2 - Github

Answer 4

Vue Use useQRCode 和 qrcode

Answer 5

<template>
  <div class="scanner">
    <video ref="video" class="video"></video>
    <canvas ref="canvas" style="display: none;"></canvas>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import jsQR from 'jsqr'

const video = ref(null)
const canvas = ref(null)
let stream = null

const startScan = async () => {
  try {
    stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' }
    })
    
    video.value.srcObject = stream
    video.value.play()
    
    requestAnimationFrame(tick)
  } catch (err) {
    console.error('摄像头调用失败:', err)
  }
}

const tick = () => {
  if (video.value.readyState === video.value.HAVE_ENOUGH_DATA) {
    const canvasElement = canvas.value
    const context = canvasElement.getContext('2d')
    
    canvasElement.width = video.value.videoWidth
    canvasElement.height = video.value.videoHeight
    
    context.drawImage(video.value, 0, 0, canvasElement.width, canvasElement.height)
    const imageData = context.getImageData(0, 0, canvasElement.width, canvasElement.height)
    
    const code = jsQR(imageData.data, imageData.width, imageData.height)
    
    if (code) {
      console.log('扫描结果:', code.data)
      // 这里处理扫描到的结果
      return
    }
  }
  requestAnimationFrame(tick)
}

onMounted(() => {
  startScan()
})

onUnmounted(() => {
  if (stream) {
    stream.getTracks().forEach(track => track.stop())
  }
})
</script>

<style scoped>
.scanner {
  width: 100%;
  height: 100%;
}
.video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>