vue3+h5实现扫描条形码&二维码功能

希望能坚持写吧

已于 2024-01-26 13:44:42 修改

阅读量2.9k

点赞数 9

分类专栏： VUE JavaScript 文章标签： html5 前端 vue.js

于 2024-01-11 11:52:12 首次发布

本文链接：https://blog.youkuaiyun.com/YSys12345678/article/details/135454719

版权

本文介绍了如何在Vue应用中使用html5-qrcode插件在HTTPS环境中获取和处理手机摄像头信息，包括下载插件、使用示例和注意事项，确保隐私安全。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前提

由于涉及到调用手机摄像头，涉及到隐私，必须在HTTPS环境使用。

重点说明

在手机端使用，PC端使用会报错获取信息失败。

一、下载插件

下载html5-qrcode插件

yarn add html5-qrcode
或
npm i html5-qrcode

在这里插入图片描述

二、使用demo

<template>
  <div class="container">
    <div id="reader"></div>
  </div>
  <button @click="getCameras">扫码</button>
  <span>{
   {
    result }}</span>
</template>

<script setup>
import {
    onMounted, ref, onUnmounted } from 'vue'
import {
    Html5Qrcode } from 'html5-qrcode'
import {
    showToast } from 'vant';

const cameraId = ref('')
const devicesInfo = ref('')
const html5QrCode = ref(