v3+ts h5使用插件html5-qrcode扫描二维码

最新推荐文章于 2025-10-23 20:31:15 发布

原创

最新推荐文章于 2025-10-23 20:31:15 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #vue

本文介绍了如何在V3的H5项目中使用html5-qrcode插件来实现扫码功能，包括在不同平台如PC/Mac、Android和iOS上各浏览器的支持情况，以及创建Vue组件来调用摄像头进行二维码扫描，同时提供了错误处理的方法。

该文章已生成可运行项目，

前言：做v3的h5项目时，有用到扫码相关，记录一下
注意：PC/Mac支持：Firefox 、Chrome、Safari、Opera、Edge
Android支持：Firefox 、Chrome、Opera、Edge（安卓（小米13）自带浏览器不支持，微信浏览器支持，实验得知）
iOS支持：Safari、Firefox 、Chrome
html5-qrcode地址链接
效果图：点击通行签到，调取摄像头

在这里插入图片描述

步骤：
1.下载html5-qrcode插件

yarn add html5-qrcode
或
npm i html5-qrcode

2.新建qrcode.vue文件放到公共组件文件夹components里

<template>
  <div class="qrcode">
    <div id="reader"></div>
  </div>
</template>

<script>
  import { Html5Qrcode } from 'html5-qrcode';
  export default {
    created() {
      this.g

本文章已经生成可运行项目