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

小兵超人

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

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扫描二维码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/html5/904750.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！