使用html5-qrcode 扫描二维码(vue3)

使用html5-qrcode

npm 地址

1.安装

npm i html5-qrcode

2.使用

<template><div class="container"><div id="reader"></div></div>
</template><script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Html5Qrcode } from 'html5-qrcode';
import { Html5QrcodeResult, CameraDevice } from './interface';let cameraId = ref('');
let devicesInfo = ref<any>('');
let html5QrCode = ref<any>(null);
const router = useRouter();onMounted(() => {getCameras();
});onUnmounted(() => {stop();
});const getCameras = () => {Html5Qrcode.getCameras().then((devices: CameraDevice[]) => {console.log('摄像头信息', 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) => {// handle errconsole.log('获取设备信息失败', err); // 获取设备信息失败});
};
const start = () => {html5QrCode = new Html5Qrcode('reader');html5QrCode.start(cameraId.value, // retreived in the previous step.{fps: 10, // 设置每秒多少帧qrbox: { width: 250, height: 250 }, // 设置取景范围// scannable, rest shaded.},(decodedText: string, decodedResult: Html5QrcodeResult) => {// do something when code is read. For example:// if (qrCodeMessage) {//   getCode(qrCodeMessage);//   stop();// }console.log('扫描的结果', decodedText, decodedResult);// if (decodedText) {//   router.push('order');// }},(errorMessage: any) => {// parse error, ideally ignore it. For example:// console.log(`QR Code no longer in front of camera.`);console.log('暂无额扫描结果', errorMessage);}).catch((err: any) => {// Start failed, handle it. For example,console.log(`Unable to start scanning, error: ${err}`);});
};
const stop = () => {html5QrCode.stop().then((ignore: any) => {// QR Code scanning is stopped.console.log('QR Code scanning stopped.', ignore);}).catch((err: any) => {// Stop failed, handle it.console.log('Unable to stop scanning.', err);});
};
</script><style lang="scss" scoped>
.container {position: relative;height: 100%;width: 100%;background: rgba($color: #000000, $alpha: 0.48);
}
#reader {top: 50%;left: 0;transform: translateY(-50%);
}
</style>

3.类型

export interface CameraDevice {id: string;label: string;
}/*** Code formats supported by this library.*/
enum Html5QrcodeSupportedFormats {QR_CODE = 0,AZTEC,CODABAR,CODE_39,CODE_93,CODE_128,DATA_MATRIX,MAXICODE,ITF,EAN_13,EAN_8,PDF_417,RSS_14,RSS_EXPANDED,UPC_A,UPC_E,UPC_EAN_EXTENSION,
}class QrcodeResultFormat {// @ts-ignorepublic readonly format: Html5QrcodeSupportedFormats;// @ts-ignorepublic readonly formatName: string;
}/** Detailed scan result. */
export interface QrcodeResult {/** Decoded text. */text: string;/** Format that was successfully scanned. */format?: QrcodeResultFormat;
}/** QrCode result object. */
export interface Html5QrcodeResult {decodedText: string;result: QrcodeResult;
}

使用html5-qrcode 扫描二维码(vue3)相关推荐

QRCode 扫描二维码、扫描条形码、相册获取图片后识别、生成带 Logo 二维码、支持微博微信 QQ 二维码扫描样式...
QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生成带 Logo 二维码.支持微博微信 QQ 二维码扫描样式参考链接:https://github.com/bingoogolapple/B ...
mui+html5+实现扫描二维码操作
利用:barcode Barcode模块管理条码(一维码和二维码)扫描识别,支持常见的一维码(如EAN13码)及二维码(如QR码).通过调用设备的摄像头对条码进行扫描识别,扫描到条码后进行解码并返回码 ...
简单有效的通过js使用qrcode扫描二维码
http://ourjs.com/detail/kaq9h3x9n30z
基于MUI框架的使用HTML5+实现的二维码扫描功能
Barcode的一个实现案例一.简介 Barco ...
Vue3 扫描二维码
记录下vue3的扫描二维码功能开发(摄像头扫描,二维码上传文件扫描) 1. 安装vue3-qr-reader插件 npm i --save vue3-qr-reader或yarn add vue3-q ...
MUI 结合 HTML5+ 实现的二维码扫描功能
扫码登录的实现原理原理解释: 接下来就是对于这个服务的详细实现.首先,大概说一下原理:用户打开网站的登录页面的时候,向浏览器的服务器发送获取登录二维码的请求.服务器收到请求后,随机生成一个uuid, ...
uniapp中qrcode生成二维码后传的参数不见了_二维码扫描登录，你必须知道的 3 件事...
作者 | 互联网平头哥本文经授权转载自互联网平头哥(ID:it_pingtouge) 扫二维码登录现在比较常见,比如微信.支付宝等 PC 端登录,并且好像每款 APP 都支持扫码登录,不搞个扫码登录 ...
HTML 5 手机扫描二维码登陆网页
首先声明我不是专业做前端的,只是一个java开发者,最近要做一个手机版的网站,但是需求要做类似于微信,扫描网页上的二维码登陆网页版微信,以当时认为这东西必须要APP才能支持,因为所有扫描二维码都是必须 ...
关于Unity调用摄像头扫描二维码与生成二维码的实现方法
1.常用的生成二维码网址 https://cli.im/ 2.上官网下载二维码插件 http://zxingnet.codeplex.com/ 3.将下载的插件中zxing.unity.dll文件放入 ...

使用html5-qrcode 扫描二维码(vue3)

使用html5-qrcode

使用html5-qrcode 扫描二维码(vue3)相关推荐

最新文章

热门文章