vue3+h5实现扫描条形码&二维码功能_vue h5好用的扫码组件

前提

由于涉及到调用手机摄像头，涉及到隐私，必须在HTTPS环境使用。

重点说明

在手机端使用，PC端使用会报错获取信息失败。

一、下载插件

下载html5-qrcode插件

yarn add html5-qrcode
或
npm i html5-qrcode
1
2
3

二、使用demo

<template>
  <div class="container">
    <div id="reader"></div>
  </div>
  <button @click="getCameras">扫码</button>
  <span>{{ result }}</span>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue'
import { Html5Qrcode } from 'html5-qrcode'
import { showToast } from 'vant';

const cameraId = ref('')
const devicesInfo = ref('')
const html5QrCode = ref(null)
const result = ref('')

onMounted(() => {
  // getCameras()
})

onUnmounted(() => {
  stop()
})

const getCameras = () => {
  Html5Qrcode.getCameras()
    .then((devices) => {
      console.log('摄像头信息', devices)
      showToast('摄像头信息', devices)
      if (devices && devices.length) {
        // 如果有2个摄像头，1为前置的
        if (devices.length > 1) {
          cameraId.value = devices[1].id
        } else {
          cameraId.value = devices[0].id
        }
        devicesInfo.value = devices
        // start开始扫描
        start()
      }
    })
    .catch((err) => {
      // handle err
      console.log('获取设备信息失败', err) // 获取设备信息失败
      showToast('获取设备信息失败')
    })
}
const start = () => {
  html5QrCode.value = new Html5Qrcode('reader')
  console.log('html5QrCode', html5QrCode)

  html5QrCode.value.start(
    cameraId.value, 
    {
      fps: 10, // 设置每秒多少帧
      qrbox: { width: 250, height: 250 } // 设置取景范围
    },
    (decodedText, decodedResult) => {
      console.log('扫描的结果', decodedText, decodedResult)
      showToast('扫描的结果===', decodedText, decodedResult)
      result.value = decodedText
      if (decodedText) {
        stop();
      }
    },
    (errorMessage) => {
      showToast('暂无扫描结果')
      console.log('暂无扫描结果', errorMessage)
    }
  )
    .catch((err) => {
      console.log(`Unable to start scanning, error: ${err}`)
    })
}
const stop = () => {
  html5QrCode.value
    .stop()
    .then((ignore) => {
      // QR Code scanning is stopped.
      console.log('QR Code scanning stopped.', ignore)
      showToast('QR Code scanning stopped.')
    })
    .catch((err) => {
      // Stop failed, handle it.
      console.log('Unable to stop scanning.', err)
      showToast('Unable to stop scanning.')
    })
}
</script>

<style scoped>
.container {
  position: relative;
  height: 80%;
  width: 100%;
  background: rgba(#000000, 0.48);
}
#reader {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105

最后

项目打包放到HTTPS服务器上进行访问测试即可