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

Onlyyou

实现原理：调取手机摄像头扫一扫功能实现
注：调取手机摄像头需要再

1. https协议

复制代码

下才可以，有的项目启动配置

1. https:true

复制代码

可以实现启动的项目协议为

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

复制代码

到此这篇关于html5项目实现扫描二维码功能的文章就介绍到这了,更多相关html5扫描二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

波波的AK47

这个话题真是有趣，我也对它感兴趣。

用户0752181

我想了解更多

余生只为梦想

让我们一起努力

逆丨丨殇

牛逼

Jacksun_0909

牛逼

真尊白帝-

你的信息来源是？我想了解更多。

阿林林的故事

太棒了！感谢分享这个信息！

Wiphone

牛逼

liveboer

确实牛逼