H5项目实现扫描二维码功能 -- html5-qrcode

vue3中使用html5-qrcode实现扫描二维码功能。
   实现原理：调取手机摄像头扫一扫功能实现
注：调取手机摄像头必要再https协议下才可以，有的项目启动设置https:true可以实现启动的项目协议为https且可以访问，有的还是必要证书才能访问
  实现

1、下载html5-qrcode

1. npm i html5-qrcode

复制代码

2、使用

1. <template>
2.     <div class="container" v-show="isShow">
3.       <div id="reader"></div>
4.     </div>
5. </template>
7. <script setup>
8. import { reactive, onMounted, onUnmounted, ref } from 'vue'
9. import { showToast  } from 'vant';
10. import { Html5Qrcode } from 'html5-qrcode'
12. let html5QrCode = ref(null)
14. onMounted(() => {
15.   getCameras()
16. })
19. const onSearchOrder = () => {
20.     console.log('在运运单')
21.     router.push('order')
22. }
24. onUnmounted(() => {
25.     stop()
26. })
28. const getCameras = () => {
29.     Html5Qrcode.getCameras()
30.         .then((devices) => {
31.             if (devices && devices.length) {
32.                 isShow.value = true
33.                 html5QrCode = new Html5Qrcode('reader')
34.                 // start开始扫描
35.                 start()
36.             }
37.         })
38.         .catch((err) => {
39.             // handle err
40.             console.log('获取设备信息失败', err) // 获取设备信息失败
41.             showToast('获取设备信息失败')
42.         })
43. }
44. const start = () => {
45.    
46.     html5QrCode
47.         .start(
48.             {facingMode: "environment" },
49.             {
50.                 fps: 20, // 设置每秒多少帧
51.                 qrbox: { width: 250, height: 250 } // 设置取景范围
52.                 // scannable, rest shaded.
53.             },
54.             (decodedText, decodedResult) => {
55.                     alert('扫码结果' + decodedText)
56.             },
57.             (errorMessage) => {
58.                 // parse error, ideally ignore it. For example:
59.                 // console.log(`QR Code no longer in front of camera.`);
60.                 console.log('暂无额扫描结果', errorMessage)
61.             }
62.         )
63.         .catch((err) => {
64.             // Start failed, handle it. For example,
65.             console.log(`Unable to start scanning, error: ${err}`)
66.         })
67. }
68. const stop = () => {
69.     if (devicesInfo.value) {
70.         html5QrCode
71.             .stop()
72.             .then((ignore) => {
73.                 // QR Code scanning is stopped.
74.                 console.log('QR Code scanning stopped.', ignore)
75.             })
76.             .catch((err) => {
77.                 // Stop failed, handle it.
78.                 console.log('Unable to stop scanning.', err)
79.             })
80.     }
81. }
84. </script>
86. <style lang="scss" scoped>
87. .container {
88.     position: relative;
89.     top: 0px;
90.     left: 0px;
91.     height: 100vh;
92.     width: 100%;
93.     background: rgba($color: #000000, $alpha: 0.48);
94.     z-index: 999;
95. }
96. #reader {
97.     top: 50%;
98.     left: 0;
99.     transform: translateY(-50%);
100. }
101. </style>

复制代码

来源：https://blog.csdn.net/weixin_44801790/article/details/129865050
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！