脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE html5-qrcode H5扫一扫

VUE html5-qrcode实现H5扫一扫功能实例

 更新时间：2023年08月05日 08:37:37   作者：改bug的101天  
这篇文章主要给大家介绍了关于VUE html5-qrcode实现H5扫一扫功能的相关资料,html5-qrcode是轻量级和跨平台的QR码和条形码扫码的JS库,集成二维码、条形码和其他一些类型的代码扫描功能,需要的朋友可以参考下

官方文档  html5-qrcode

安装   npm i html5-qrcode

1、新建一个组件 

<div class="qrcode">
		<div id="reader"></div>
	</div>
//样式
.qrcode{
		    position: relative;
			height: 100%;
			width: 100%;
		  	background: rgba($color: #000000, $alpha: 0.48);
}
#reader{
		  top: 50%;
		  left: 0;
		  transform: translateY(-50%);
}

2、引入

import { Html5Qrcode } from "html5-qrcode";

3、获取摄像权限在created调用

getCameras() {
			      Html5Qrcode.getCameras()
			        .then((devices) => {
			          if (devices && devices.length) {
						this.html5QrCode = new Html5Qrcode("reader");
			            this.start();//扫码
			          }
			        })
			        .catch((err) => {
			          // handle err
					  this.html5QrCode = new Html5Qrcode("reader");
					  this.error = "ERROR: 您需要授予相机访问权限"
					  this.$emit("err",this.error)
			        });
},

4、获取扫码内容

start() {
			      //environment后置 user前置
			      this.html5QrCode 
			        .start(
			           {facingMode: "environment" },
			          {
			            fps: 2,//500毫秒扫描一次
			            qrbox: { width: 250, height: 250 }, 
			          },
			          (decodedText, decodedResult) => {
						  this.$emit("ok",decodedText)
			          }
			        )
			        .catch((err) => {
			          console.log(`Unable to start scanning, error: ${err}`);
			        });
},

5、必须在销毁页面前关闭扫码功能否则会报错  could not start video source

//销毁前调用
beforeDestroy() {
		    this.stop();
}
//关闭扫码
stop() {
			      this.html5QrCode.stop().then((ignore) => {
			          // QR Code scanning is stopped.
			          console.log("QR Code scanning stopped.");
			        })
			        .catch((err) => {
			          // Stop failed, handle it.
			          console.log("Unable to stop scanning.");
			        });
},

6、在扫码页面引用组件

<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>
getResult(e){
    //e:扫码内容
}
geterror(e){
    //e:报错内容
}

组件完整代码

<template>
    <div class="qrcode">
		<div id="reader"></div>
    </div>
</template>
<script>
	import { Html5Qrcode } from "html5-qrcode";
	export default {
		created() {
			this.getCameras()
		},
		beforeDestroy() {
		    this.stop();
		},
		methods:{
			getCameras() {
			      Html5Qrcode.getCameras()
			        .then((devices) => {
			          if (devices && devices.length) {
						this.html5QrCode = new Html5Qrcode("reader");
			            this.start();
			          }
			        })
			        .catch((err) => {
			          // handle err
					  this.html5QrCode = new Html5Qrcode("reader");
					  this.error = "ERROR: 您需要授予相机访问权限"
					  this.$emit("err",this.error)
			        });
			    },
			 start() {
			      //environment后置 user前置
			      this.html5QrCode 
			        .start(
			           {facingMode: "environment" },
			          {
			            fps: 2,
			            qrbox: { width: 250, height: 250 }, 
			          },
			          (decodedText, decodedResult) => {
						  this.$emit("ok",decodedText)
			          }
			        )
			        .catch((err) => {
			            this.$emit("err",err)
			        });
			    },
			    stop() {
			      this.html5QrCode.stop().then((ignore) => {
			          // QR Code scanning is stopped.
			          console.log("QR Code scanning stopped.");
			        })
			        .catch((err) => {
			          // Stop failed, handle it.
			          console.log("Unable to stop scanning.");
			        });
			    },
		}
	}
</script>
<style lang="scss" scoped>
	.qrcode{
		    position: relative;
			height: 100%;
			width: 100%;
		  	background: rgba($color: #000000, $alpha: 0.48);
	}
	#reader{
		  top: 50%;
		  left: 0;
		  transform: translateY(-50%);
	}
</style>

引用组件页面

<BarScan ref="qrcode" @ok="getResult" @err="geterror" ></BarScan>
import BarScan from '@/components/qrcode.vue'
	var _self;
	export default {
		components:{
			BarScan
		},
        methods:{
            getResult(result){
			      this.result=result;
			},
			geterror(e){
				  this.$toast(e)
			},}
}

总结

到此这篇关于VUE html5-qrcode实现H5扫一扫功能的文章就介绍到这了,更多相关VUE html5-qrcode H5扫一扫内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue3+TypeScript实现递归菜单组件的完整实例

    Vue3+TypeScript实现递归菜单组件的完整实例

    Vue.js中的递归组件是一个可以调用自己的组件,递归组件一般用于博客上显示评论,形菜单或者嵌套菜单,文章主要给大家介绍了关于Vue3+TypeScript实现递归菜单组件的相关资料,需要的朋友可以参考下
    2021-08-08
  • vue项目实现搜索内容变红色显示

    vue项目实现搜索内容变红色显示

    这篇文章主要为大家介绍了vue项目实现搜索内容变红色显示，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • 简单说说如何使用vue-router插件的方法

    简单说说如何使用vue-router插件的方法

    这篇文章主要介绍了如何使用vue-router插件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vue页面使用多个定时器的方法

    vue页面使用多个定时器的方法

    这篇文章主要为大家详细介绍了vue页面使用多个定时器的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-09-09
  • Vue select 绑定动态变量的实例讲解

    Vue select 绑定动态变量的实例讲解

    这篇文章主要介绍了Vue select 绑定动态变量的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue实现多标签选择器

    Vue实现多标签选择器

    这篇文章主要为大家详细介绍了Vue实现多标签选择器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • Vue.js中集成Socket.IO实现实时聊天功能

    Vue.js中集成Socket.IO实现实时聊天功能

    随着 Web 技术的发展,实时通信成为现代 Web 应用的重要组成部分,Socket.IO 是一个流行的库,支持及时、双向与基于事件的通信,适用于各种平台和设备,本文将介绍如何在 Vue.js 项目中集成 Socket.IO,实现一个简单的实时聊天应用,需要的朋友可以参考下
    2024-12-12
  • uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能

    uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能

    支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • Vue3+script setup+ts+Vite+Volar搭建项目

    Vue3+script setup+ts+Vite+Volar搭建项目

    本文主要介绍了Vue3+script setup+ts+Vite+Volar搭建项目，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue(element ui)中操作row参数的使用方式

    Vue(element ui)中操作row参数的使用方式

    这篇文章主要介绍了Vue(element ui)中操作row参数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04

最新评论