vue3 摄像头扫码

在 Vue3 中使用摄像头进行扫码功能通常涉及前端的 WebRTC 技术以及一些库的配合，例如 `vue-webcam` 或者 `vue-quagga2`。以下是基本步骤：

1. **安装依赖**：
首先，在项目中安装必要的库，比如通过 npm 或 yarn：

   npm install vue-webcam quagga2 @types/vue-quagga2 --save

2. **引入组件**：
在 Vue 组件中导入并使用 webcam 组件：

   <template>
     <webcam ref="webcam" :options="webcamOptions"></webcam>
   </template>

   <script>
   import Webcam from 'vue-webcam';
   export default {
     components: {
       Webcam,
     },
     data() {
       return {
         webcamOptions: {
           width: 640, // 自定义宽度
           height: 480, // 自定义高度
           facingMode: "environment", // 可选值有 "user" 和 "environment"
         };
       }
     },
   }
   </script>

3. **处理扫码**：
使用 `@update` 观察事件监听视频流变化，可以使用 Quagga2 进行二维码识别：

   mounted() {
     this.$refs.webcam.on('change', (stream) => {
       const quagga = new QuaggaReader({
         inputStream: {
           type: "LiveStream",
           target: stream.canvas,
         },
         decoder: 'qrcode',
       });
       quagga.decodeSingle().then(({result}) => {
         console.log("Scanned QR Code:", result.text);
         // 根据需要处理扫码结果
       }).catch((error) => {
         console.error("Error decoding:", error);
       });
     });
   },
   beforeDestroy() {
     if (this.quagga) {
       this.quagga.stop();
     }
   }

注意：
- 实现过程中可能需要处理用户权限请求（如浏览器提示），确保在运行时获得了访问摄像头的权限。
- 调试时记得开启开发者工具的媒体流权限。