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%;
	}
}
相关推荐
前端小万1 分钟前
一次紧急的现场性能问题排查
前端·性能优化
excel17 分钟前
为什么相同卷积代码在不同层学到的特征完全不同——基于 tfjs-node 猫图像识别示例的逐层解析
前端
知识分享小能手17 分钟前
React学习教程,从入门到精通,React 使用属性(Props)创建组件语法知识点与案例详解(15)
前端·javascript·vue.js·学习·react.js·前端框架·vue
用户214118326360220 分钟前
dify案例分享-免费玩转即梦 4.0 多图生成!Dify 工作流从搭建到使用全攻略,附案例效果
前端
CodeSheep20 分钟前
稚晖君又开始摇人了,有点猛啊!
前端·后端·程序员
JarvanMo22 分钟前
Flutter Web vs Mobile:主要区别以及如何调整你的UI
前端
IT_陈寒42 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用44 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥1 小时前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc