vue3 html5-qrcode 实现扫描二维码 仿照wx扫码样式

直接上代码:npm i html5-qrcode

javascript 复制代码
<van-button class="scanButton" @click="stop" type="success">结束扫码</van-button>

<van-search v-model="searchName" show-action label="" placeholder="请输入姓名" @search="onSearch">
				<template #action>
					<div @click="getCameras">
						<van-icon name="scan" />
						扫码报到
					</div>
				</template>
			</van-search>

import { Html5Qrcode } from 'html5-qrcode';

const getCameras = () => {
	scanCodeSta.value = true;
	// showToast('正在初始化扫码,请稍后');
	showToast({
		message: '正在初始化扫码,请稍后',
		position: 'bottom',
	});

	Html5Qrcode.getCameras().then((devices) => {
		if (devices && devices.length) {
			// 如果有2个摄像头,1为前置的
			if (devices.length > 1) {
				cameraId.value = devices[1].id;
			} else {
				cameraId.value = devices[0].id;
			}
			devicesInfo.value = devices;
			// start开始扫描
			start();
		}
	}).catch((err) => {
		console.log('获取设备信息失败', err); // 获取设备信息失败
		showToast('获取设备信息失败');
	});
}
const start = () => {
	html5QrCode.value = new Html5Qrcode('reader');
	setTimeout(() => {
		closeToast();
	}, 700);
	html5QrCode.value.start(cameraId.value, {
		focusMode: 'continuous', //设置连续聚焦模式
		// fps: 10, // 设置每秒多少帧
		fps: 5, //设置扫码识别速度
		// qrbox: { width: '100%', height: '100%' }, // 设置取景范围
		qrbox: { width: 320, height: 320 }, // 设置取景范围
		// aspectRatio: 1.777778, // 可选,视频馈送需要的纵横比,(4:3--1.333334, 16:9--1.777778, 1:1--1.0)传递错误的纵横比会导致视频不显示
	}, (decodedText, decodedResult) => {
		// showToast('扫描的结果===', decodedText, decodedResult);
		result.value = decodedText;
		if (decodedText) {
			stop();
			handleScanCheckin();
		}
	}, (errorMessage) => {
		// showToast('暂无扫描结果');
		console.log('暂无扫描结果', errorMessage);
	}).catch((err) => {
		console.log(`Unable to start scanning, error: ${err}`);
	});
}
const stop = () => {
	scanCodeSta.value = false;
	if (!html5QrCode.value) {
		return;
	}
	html5QrCode.value.stop().then((ignore) => {
		console.log('QR Code scanning stopped.', ignore);
	}).catch((err) => {
		console.log('Unable to stop scanning.', err);
	});
}

:deep(#qr-shaded-region) {
	overflow: hidden;
}

:deep(#qr-shaded-region::after) {
	position: absolute;
	content: '';
	width: 100%;
	top: 0;
	left: 0;
	transform: translateY(-100%);
	height: 50px;
	background: linear-gradient(180deg, rgba(0, 255, 51, 0) 43%, #00ff33 211%);
	border-bottom: 1px solid #00ff33;
	animation: scan-animation 2s linear infinite;
}

@keyframes scan-animation {
	0% {
		top: 0;
	}

	100% {
		top: 100%;
	}
}
相关推荐
GIS之路20 分钟前
GeoTools 结合 OpenLayers 实现属性查询(二)
前端·信息可视化
烛阴28 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥32 分钟前
HTML之表单结构全解析
前端·html
聪聪的学习笔记43 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er1 小时前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
qq_411671982 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js
清幽竹客3 小时前
vue-37(模拟依赖项进行隔离测试)
前端·vue.js
vvilkim3 小时前
Nuxt.js 页面与布局系统深度解析:构建高效 Vue 应用的关键
前端·javascript·vue.js