vue3,扫码器--vue-qrcode-reader

25 年 01 月 18日星期六 (已编辑)

作者：未知用户

日常生活

这篇文章最后修改于 2025年 01月 18日 19时10分部分内容可能已不适用如有疑问请联系作者.

vue3,扫码器--vue-qrcode-reader

官网文档地址

一款依赖可以直接调用摄像头扫码，vue-qrcode-reader。分别提供QrcodeStream、QrcodeDropZone、QrcodeCapture用来识别二维码。

QrcodeStream：调用摄像头扫码
QrcodeDropZone：将图片移到识别区域内识别二维码
QrcodeCapture：选择原生拍照或者图片到浏览器识别二维码。

下载

shell 复制代码

npm install vue-qrcode-reader

使用

html 复制代码

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { QrStream } from 'vue3-qr-reader';



let onDecode = (e) => {
    console.log('e',e);
    alert(e)
}

let onInit = () => {
    alert('初始话完成')
}

onMounted(() => {
    
})

</script>

<template>
    <div>
        <p>{{ tipMsg }}</p>
        <QrStream @decode="onDecode" @init="onInit"></QrStream>
    </div>
</template>

<style lang="scss" scoped>

</style>

真机效果

ios效果

安卓效果

注意

因为浏览器原因,调用摄像头等权限需要本地或者https

在开发过程中，有时候需要用到一些音视频接口等需要https才能拿到权限，为方便开发过程中调试，这里就介绍几种vite项目快速开启https访问的方式。vite配置项说明文档：[开发服务器选项 | Vite 官方中文文档](https://cn.vitejs.dev/config/server-options.html rel= "开发服务器选项 | Vite 官方中文文档")

第一种：使用插件@vitejs/plugin-basic-ssl

这个插件仓库地址：https://github.com/vitejs/vite-plugin-basic-ssl

安装依赖@vitejs/plugin-basic-ssl：

复制代码

pnpm i @vitejs/plugin-basic-ssl

然后配置到vite中：

复制代码

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from 'path'import basicSsl from '@vitejs/plugin-basic-ssl' // https://vitejs.dev/config/export default defineConfig({  plugins: [vue(), basicSsl()],  server: {    host: '0.0.0.0',    https: true  },  resolve: {    alias: {      '@': path.resolve(__dirname, 'src')    }  }})

最后重启服务器：

但是这种方式会让浏览器提示不安全：

第二种：使用插件vite-plugin-mkcert

安装vite-plugin-mkcert插件，然后配置到项目中：

复制代码

pnpm add vite-plugin-mkcert -D

然后配置到vite.config.ts中：

复制代码

//2.在vite.config.js里面引入import mkcert from "vite-plugin-mkcert"; export default defineConfig({  server: {    https: true   // 需要开启https服务   },  plugins: [mkcert()]})

第三种：使用mkcert（强烈推荐）

使用教程可以看我的文章：https://xiaoshen.blog.csdn.net/article/details/135893188

因为这种浏览器不会报错误提示：

参考地址

暂无目录信息

文章标题：vue3,扫码器--vue-qrcode-reader

文章作者：未知用户

文章链接：[复制]

最后修改时间：2024年 04月 15日 19时17分

商业转载请联系站长获得授权，非商业转载请注明本文出处及文章链接，您可以自由地在任何媒体以任何形式复制和分发作品，也可以修改和创作，但是分发衍生作品时必须采用相同的许可协议。本文采用CC BY-NC-SA 4.0进行许可。

豫ICP备2022014268号-1

我们历经沧桑，这样错过了一生最好的时光，错过了便是永远