vue+h5开发扫描二维码 html5-qrcode(条形码识别不到)

前提

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

<template>
	<view class="qrcode">
		<uni-nav-bar left-icon="left" :background-color="' '" :border="false" title="扫码" :fixed="true" @clickLeft="$back" :shadow='true' :leftText='"取消"'>
		</uni-nav-bar>
		<view id="reader"></view>
		<view class="error" v-if="isError">
			<view class="on1">相机权限被拒绝,请尝试如下操作:</view>
			<view>· 刷新页面后重试;</view>
			<view>· 在系统中检测当前App或浏览器的相机权限是否被禁用;</view>
			<view>· 如果依然不能体验,建议在微信中打开链接;</view>
		</view>
	</view>
</template>

<script>
	import {
		Html5Qrcode
	} from "html5-qrcode";
	export default {
		props:{
			isError:{
				type:Boolean,
				default:false
			}
		},
		created() {
			this.getCameras()
		},
		beforeDestroy() {
			this.stop();
		},
		methods: {
			$back(){
				uni.navigateBack()
			},
			getCameras() {
				Html5Qrcode.getCameras()
					.then((devices) => {
						console.log(devices,'sss')
						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: 200,
								height: 200
							},
						},
						(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  scoped lang="scss" >
	.qrcode {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		// position: relative;
		background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, .1) 25%, rgba(32, 255, 77, .1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, .1) 75%, rgba(32, 255, 77, .1) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, .1) 25%, rgba(32, 255, 77, .1) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, .1) 75%, rgba(32, 255, 77, .1) 76%, transparent 77%, transparent);
		background-size: 3rem 3rem;
		background-position: -1rem -1rem;
		z-index: 10;
		background-color: rgba(17, 17, 17, 0);
		z-index: 999;
	}

	#reader {
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateY(-50%);
		z-index: 1000;
	}

	.error {
		color: #fff;
		padding: 40rpx;
		font-size: 24rpx;
		background-color: #333;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 630rpx;
		border-radius: 15rpx;
	}
	.on1{
		font-size: 30rpx;
	}
</style>

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值