vue+h5开发扫描二维码 html5-qrcode（条形码识别不到）_vue2 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>