html5-qrcode前端打开摄像头扫描二维码功能

实现的效果如图所示，全屏打开而且扫描到二维码后弹窗提示，紧张就是使用html5-qrcode这个依赖库，html5-qrcode开源地点：GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org
使用文档：Getting started | ScanApp
安装依赖：

1. pnpm install --save-dev html5-qrcode

复制代码

弹窗提示我用的vant这个ui库，开源地点：GitHub - youzan/vant: A lightweight, customizable Vue UI library for mobile web apps.
然后在项目中使用，我使用的是vue：

1. <template>
2.     <div class="scanCode">
3.         <div id="reader"></div>
4.     </div>
5. </template>
7. <script setup lang="ts">
8. import { ref } from 'vue'
9. import { showToast } from 'vant'
10. import { Html5Qrcode } from 'html5-qrcode'
12. const codeContent = ref('1024')
14. // This method will trigger user permissions
15. Html5Qrcode.getCameras()
16.     .then((devices) => {
17.         // console.log(devices)
18.         const html5QrCode = new Html5Qrcode('reader')
19.         const width = window.innerWidth
20.         const height = window.innerHeight
21.         const aspectRatio = width / height
22.         const reverseAspectRatio = height / width
24.         const mobileAspectRatio =
25.             reverseAspectRatio > 1.5
26.                 ? reverseAspectRatio + (reverseAspectRatio * 12) / 100
27.                 : reverseAspectRatio
28.         if (devices && devices.length) {
29.             // .. use this to start scanning.
30.             html5QrCode
31.                 .start(
32.                     { facingMode: { exact: 'environment' } },
33.                     {
34.                         fps: 10, // Optional, frame per seconds for qr code scanning
35.                         aspectRatio: aspectRatio + 1,
36.                         qrbox: { width: 250, height: 250 }, // Optional, if you want bounded box UI
37.                         videoConstraints: {
38.                             facingMode: 'environment',
39.                             aspectRatio:
40.                                 width < 600 ? mobileAspectRatio : aspectRatio,
41.                         },
42.                     },
43.                     (decodedText, decodedResult) => {
44.                         // do something when code is read
45.                         console.log('decodedText', decodedText)
46.                         // console.log('decodedResult', decodedResult)
47.                         codeContent.value = decodedText
48.                         showToast(decodedText)
49.                     },
50.                     (errorMessage) => {
51.                         // parse error, ignore it.
52.                         // console.log('parse error, ignore it.', errorMessage)
53.                     }
54.                 )
55.                 .catch((err) => {
56.                     // Start failed, handle it.
57.                     console.log('Start failed, handle it.')
58.                 })
59.         }
60.     })
61.     .catch((err) => {
62.         // handle err
63.         console.log(err)
64.     })
65. </script>
67. <style lang="scss" scoped>
68. .scanCode {
69.     width: 100%;
70.     height: 100vh;
71.     display: flex;
72.     flex-direction: column;
73.     background: rgba(0, 0, 0);
75.     #reader {
76.         top: 50%;
77.         left: 0;
78.         transform: translateY(-50%);
79.     }
80. }
81. </style>

复制代码