uniapp在h5页面实现扫码功能(html5-qrcode)

泽丘html52024-06-11 17:40:017570

安装

npm install html5-qrcode

代码

<template>
	<view class="37d0-b440-5daf-bd90 container">
		<button class="b440-5daf-bd90-5d10 scan" @click="scanCode">打开相机扫码</button>
		<view class="5daf-bd90-5d10-845b reader-box" v-if="isScaning">
			<view class="bd90-5d10-845b-cc71 reader" id="reader"></view>
		</view>
	</view>
</template>
<script>
	import {
		Html5Qrcode
	} from 'html5-qrcode';
	export default {
		data() {
			return {
				html5Qrcode: null,
				isScaning: false,
			}
		},
		methods: {
			startScan() {
				this.isScaning = true;
				Html5Qrcode.getCameras().then(devices => {
					if (devices && devices.length) {
						this.html5Qrcode = new Html5Qrcode('reader');
						this.html5Qrcode.start({
							facingMode: 'environment',
						}, {
							fps: 24,
							qrbox: 280
						}, (decodeText, decodeResult) => {
							console.log(decodeText)
							if (decodeText) {
								this.stopScan();
								this.isScaning = false;
							}
						}, (err) => {
							console.log(err)
						});
					}
				});
			},
			stopScan() {
				this.html5Qrcode.stop();
			},
			scanCode() {
				console.log('helo')
				this.startScan();
			}
		}
	}
</script>
<style scoped>
	.container{
		height:100%;
	}
	.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
	}
	.reader {
		width: 540rpx;
		height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>