Implementing QR Code Scanning in H5 with Vue2 Using html5-qrcode

Introduction: The author needed to implement a scanning feature in an H5 page, which essentially opens the mobile camera to take pictures at intervals. The project uses Vue2 and HBuilderX, and testing revealed that some browsers (e.g., Quark) do not support camera access.

Requirement: The camera can only be accessed in an HTTPS environment or a local debugging environment.

Technical solutions: Two options were considered: (1) html5-qrcode , which offers high QR‑code accuracy and easy integration with Vue2; (2) vue-qrcode-reader , which requires Vue3 and specific Node versions. The author chose the first option.

Usage: After installing the html5-qrcode package via npm and importing Html5Qrcode , set the isScanning flag to true to display the scanner. The following code snippets illustrate the HTML structure, component data, and methods for opening and stopping the scanner.

html结构
<view class="reader-box" v-if="isScaning">
	<view class="reader" id="reader"></view>
</view>

所用数据
data(){
    return{
        html5Qrcode: null,
        isScaning: false,
    }
}

methods方法
openQrcode() {
    this.isScaning = true;
    Html5Qrcode.getCameras().then((devices) => {
    if (devices && devices.length) {
    this.html5Qrcode = new Html5Qrcode('reader');
    this.html5Qrcode.start(
        {
        facingMode: 'environment'
        },
        {
        focusMode: 'continuous', //设置连续聚焦模式
        fps: 5,       //设置扫码识别速度
        qrbox: 280   //设置二维码扫描框大小
        },
        (decodeText, decodeResult) => {
         if (decodeText) {    //这里decodeText就是通过扫描二维码得到的内容
            this.action(decodeText)  //对二维码逻辑处理
            this.stopScan(); //关闭扫码功能
        }
    },
        (err) => {
            // console.log(err);  //错误信息
        }
     );
    }
    });
},

stopScan() {
	console.log('停止扫码')
	this.isScaning = false;
	if(this.html5Qrcode){
    this.html5Qrcode.stop();
	}
}

css样式
.reader-box {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
}

.reader {
		width:100%;
		// width: 540rpx;
		// height: 540rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
}

Final effect: The article includes a screenshot of the working scanner and invites readers to follow the public account for more technical content.