H5 realizes scanning QR code

Abstract:
Scanning QR codes is a basic function commonly used in apps. This function allows users to easily log in, browse websites, obtain information, etc. In view of this, the This function is introduced into H5 and uses H5 to realize the function of scanning QR codes

In the process of introducing the QR code scanning function into H5, we found two relatively easy-to-use third-party libraries by comparing five tool libraries. Next, we will record these two libraries.
The technology used in this article is uniapp+vue3

html5-qrcode

The html5-qrcode library is a JavaScript library. It only needs to provide an element container to realize the code scanning function. However, the scanning efficiency is very low, facing 1 QR code. Hours may not be recognized.
Using this library is also very simple:

1. Install

   npm install html5-qrcode
   

2. Introduce it into the page you need to use
   Next, write an example to see the effect

<template>
	<view class="container">
		<button class="scan" @click="scanCode">扫一扫</button>
		<view class="reader-box" v-if="isScaning">
			<view class="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>

When we click the scan button, the following effect appears:

The above style can be modified according to your own needs.
Advantages of html5-qrcode:

1. Flexible, whether it is style or logic, you can flexibly handle it according to your own needs
2. Built-in basic styles, reducing the content of custom styles
   Disadvantages of html5-qrcode:
3. The sensitivity is low. Scanning the QR code for an hour or two may not be able to get the result, and the efficiency is very slow.

vue-qrcode-reader

vue-qrcode-reader is easier to use

1. Install

npm install vue-qrcode-reader

2. Introduce the QrcodeStream component to the required page and register it to use it
3. Listen to the detect event of QrcodeStream. The parameter of the event processing function is an array of recognized QR codes.

Let’s use an example to see the effect:

<template>
	<view class="container">
		<button class="scan" @click="scanCode">扫一扫</button>
		<view class="reader-box" v-if="isScaning">
			<QrcodeStream @detect="onDetect">
				<view class="reader"></view>
			</QrcodeStream>
		</view>
	</view>
</template>

<script>
	import {
    
    
		QrcodeStream,
	} from 'vue-qrcode-reader';
	export default {
    
    
		components: {
    
    
			QrcodeStream,
		},
		data() {
    
    
			return {
    
    
				isScaning: false,
			}
		},
		methods: {
    
    
			onDetect(detectedCodes) {
    
    
				const target = detectedCodes[0];
				if (target && target.rawValue) {
    
    
					console.log(target.rawValue);
					this.isScaning = false;

				}
			},
			
			scanCode() {
    
    
				this.isScaning = true;
			}
		}
	}
</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 {
    
    
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		height: 100%;
	}
</style>

When you click to scan, the following effect will appear:

The above style can be modified according to your own needs. QrcodeStream provides a default slot, and the content of the slot is default In aposition:absolutebox.

Advantages of vue-qrcode-reader

1. High sensitivity. When the QR code appears in the view, its content can be obtained, which is very efficient.
2. It is very convenient to use. You don’t need to handle the code scanning logic yourself. You only need to listen to an event.

Disadvantages of vue-qrcode-reader:

1. There is no built-in style, you need to write the style yourself