vue实现h5扫码的代码示例
更新时间：2024年01月04日 08:29:56 作者：举半个栗子
html5-qrcode是一个基于JavaScript 轻量级和跨平台的扫码插件,允许用户使用摄像头扫描二维码,并且解析为文本或者url,本文给大家介绍了vue实现h5扫码,需要的朋友可以参考下
插件 html5-qrcode npm地址
html5-qrcode是一个基于JavaScript 轻量级和跨平台的扫码插件。允许用户使用摄像头扫描二维码，并且解析为文本或者url。
- 支持扫描不同类型的二维码和条形码
- 支持不同的平台，Android、IOS、Windows、MacOs或者linux
- 支持不同的浏览器，Chrome、Safari、Edge等
- 支持扫描本地文件
访问摄像头涉及用户隐私，所以访问环境必须在https下
实现（该代码环境基于vue3）
- 安装依赖
npm install html5-qrcode
- 引入
import { Html5Qrcode } from 'html5-qrcode'
- 使用
setup数据
const state = reactive({
html5QrCode: null,
fileList:[]
})
- 判断当前环境下是否有摄像头
Html5Qrcode.getCameras()
.then(devices =>{
if(devices &&devices.length){
// 当前环境下能识别出摄像头，并且摄像头的数据可能不止一个
state.html5QrCode = new Html5Qrcode('reader') // reader 放置扫码功能的元素ID
startInit()
}
})
.catch(() =>{
// 摄像头无访问权限
})
- 扫码
const startInit = () =>{
state.html5QrCode.start(
// environment后置摄像头 user前置摄像头
{facingMode:'environment'},
{
fps:1, // 可选，每n秒帧扫描一次
qrbox:{
width:250,
height:250
} // 扫描的 UI框
},
(decodedText, decodedResult) =>{
// 扫描结果
}
)
.catch((err) =>{
// 扫码错误信息
let message = ''
if(typeof err == 'string'){
message = '识别失败'
}else {
if (err.name == 'NotAllowedError') {
message = '您需要授予相机访问权限！'
}
if (err.name == 'NotFoundError') {
message = '这个设备上没有摄像头！'
}
if (err.name == 'NotSupportedError') {
message = '摄像头访问只支持在安全的上下文中，如https或localhost！'
}
if (err.name == 'NotReadableError') {
message = '相机被占用！'
}
if (err.name == 'OverconstrainedError') {
message = '安装摄像头不合适！'
}
if (err.name == 'StreamApiNotSupportedError') {
message = '此浏览器不支持流API！'
}
}
})
}
- 识别本地文件
const dealSelectFiles = () => {
try {
window.qrcode.callback = (result) => {
// 识别成功
}
// get select files.
let file = state.fileList[0].file
var reader = new FileReader()
reader.onload = (function () {
return function (e) {
window.qrcode.decode(e.target.result)
}
})(file)
reader.readAsDataURL(file)
} catch (error) {
// 识别失败
}
}
- 在离开页面时要停止扫码功能
onUnmounted(() => {
//扫描设备是否在运行
if (state.html5QrCode.isScanning) {
stop()
}
})
完整代码
<template>
<div class="scanCode">
<div class="container">
<div class="qrcode">
<div id="reader"></div>
</div>
</div>
<div class="btn">
<div class="left-back">
<van-icon name="arrow-left" @click="clickBack" />
</div>
<div class="right-file">
<van-uploader v-model="fileList" :preview-image="false" :after-read="dealSelectFiles">
<van-icon name="photo-o" />
</van-uploader>
</div>
</div>
</div>
</template>
<script>
import { reactive } from 'vue'
import { defineComponent, toRefs, onMounted, onUnmounted } from 'vue'
import { Html5Qrcode } from 'html5-qrcode'
import { showToast, } from 'vant'
export default defineComponent({
setup() {
const state = reactive({
html5QrCode: null,
fileList: [],
})
const start = () => {
state.html5QrCode
.start(
{ facingMode: 'environment' },
{
fps: 1,
qrbox: { width: 250, height: 250 }
},
(decodedText, decodedResult) => {
console.log('decodedText', decodedText)
console.log('decodedResult', decodedResult)
}
)
.catch((err) => {
console.log('扫码错误信息', err)
let message = ''
// 错误信息处理仅供参考，具体描述自定义
if (typeof err == 'string') {
message = '二维码识别失败！'
} else {
if (err.name == 'NotAllowedError') {
message = '您需要授予相机访问权限！'
}
if (err.name == 'NotFoundError') {
message = '这个设备上没有摄像头！'
}
if (err.name == 'NotSupportedError') {
message = '摄像头访问只支持在安全的上下文中，如https或localhost！'
}
if (err.name == 'NotReadableError') {
message = '相机被占用！'
}
if (err.name == 'OverconstrainedError') {
message = '安装摄像头不合适！'
}
if (err.name == 'StreamApiNotSupportedError') {
message = '此浏览器不支持流API！'
}
}
})
}
const getCameras = () => {
Html5Qrcode.getCameras()
.then((devices) => {
if (devices && devices.length) {
state.html5QrCode = new Html5Qrcode('reader')
start()
}
})
.catch((err) => {
showToast({
message: '摄像头无访问权限！',
duration: 3000
})
}
const stop = () => {
state.html5QrCode
.stop()
.then((ignore) => {
console.log('停止扫码', ignore)
})
.catch((err) => {
console.log(err)
showToast('停止扫码失败')
})
}
const dealSelectFiles = () => {
try {
window.qrcode.callback = (result) => {
showToast('成功了，结果是：' + result)
}
// get select files.
let file = state.fileList[0].file
var reader = new FileReader()
reader.onload = (function () {
return function (e) {
window.qrcode.decode(e.target.result)
}
})(file)
reader.readAsDataURL(file)
} catch (error) {
showToast({
message: '图片识别失败！',
duration: 3000
})
}
}
onMounted(() => {
getCameras()
})
onUnmounted(() => {
//扫描设备是否在运行
if (state.html5QrCode.isScanning) {
stop()
}
})
return {
...toRefs(state),
getCameras,
dealSelectFiles,
}
}
})
</script>
<style lang="scss" scoped>
.scanCode {
height: 100vh;
display: flex;
flex-direction: column;
background: rgba(0, 0, 0);
}
.container {
height: 90vh;
position: relative;
width: 100%;
}
.qrcode {
height: 100%;
}
#reader {
top: 50%;
left: 0;
transform: translateY(-50%);
}
.btn {
flex: 1;
padding: 3vw;
display: flex;
justify-content: space-around;
color: #fff;
font-size: 8vw;
align-items: flex-start;
}
</style>
最终效果
以上就是vue实现h5扫码的代码示例的详细内容，更多关于vue实现h5扫码的资料请关注脚本之家其它相关文章！
相关文章
今天要讲讲Vue2.0了。最近将公司App3.0用vue2.0构建了一个web版，因为是第一次使用vue，而且一开始使用的时候2.0出来一个月不到，很多坑都是自己去踩的，现在项目要上线了，所以记录一些过程2017-01-01
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧2022-11-11
vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法
这篇文章主要介绍了vue中解决chrome浏览器自动播放音频和MP3语音打包到线上的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了vue中改变滚动条样式的方法,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-03-03
这篇文章主要介绍了vue返回上一页(后退)的几种方法与区别说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了vue如何实现拖动图片进行排序Vue.Draggable，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了Vue 展示.md文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-05-05
在Vue中,路由拦截器主要用于在导航到某个路由前或者离开某个路由时进行拦截和处理,下面给大家介绍vue中的路由拦截器的作用,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要介绍了Vue3如何清空Reactive定义的数组问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要给大家介绍了关于vue3组件TS类型声明的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下2023-07-07
最新评论