首页IT科技html扫码功能(js实现web页面扫描二维码(html5-qrcode))

html扫码功能(js实现web页面扫描二维码(html5-qrcode))

时间2025-07-07 10:24:36分类IT科技浏览8202
导读:js实现web页面扫描二维码(html5-qrcode)...

js实现web页面扫描二维码(html5-qrcode)

以vue3项目使用为例

这种还是推荐IOS和安卓原生实现                  ,做桥接文件调用

这种实现方式只支持localhost和https的浏览器网页版

而且经过测试兼容性也不是很好                          ,具体参见官网

下面附了官网链接

1.下载依赖

npm install html5-qrcode

2.二次封装

<template> <div> <div class="readerDialog" v-show="dialogShow"> <div id="reader" width="600px"></div> </div> </div> </template> <script> // 调起摄像头扫描二维码 import { ref, reactive, toRefs, watch, getCurrentInstance } from vue; import { Html5Qrcode } from html5-qrcode; export default { name: Qrcode, props: [], emits: [success], setup (props, { emit }) { const params = reactive({ dialogShow: false, codeUrl: , cameraId: , showText: , devices: [], getCamerasText: , html5QrCode: null }); // 外部调用此方法打开 const open = () => { params.dialogShow = true; console.log(params.dialogShow, params.dialogShow); getCameras(); }; const getCameras = () => { params.getCamerasText = JSON.stringify(Html5Qrcode.getCameras()); Html5Qrcode.getCameras() .then((devices) => { params.showText = JSON.stringify(devices); /** * devices would be an array of objects of type: * { id: "id", label: "label" } */ if (devices && devices.length) { // 如果有2个摄像头        ,1为前置的 if (devices.length > 1) { params.cameraId = devices[1].id; } else { params.cameraId = devices[0].id; } params.devices = devices; start(); // .. use this to start scanning. } }) .catch((err) => { params.showText = err; console.log(getCameras err:, err); // 获取设备信息失败 }); }; const start = () => { params.html5QrCode = new Html5Qrcode(reader); params.html5QrCode.start( params.cameraId, // retreived in the previous step. { fps: 10, // sets the framerate to 10 frame per second qrbox: { width: 250, height: 250 }, // sets only 250 X 250 region of viewfinder to // scannable, rest shaded. }, (decodedText, decodedResult) => { // do something when code is read. For example: // if (qrCodeMessage) { // this.getCode(qrCodeMessage); // this.stop(); // } console.log(===成功日志:, decodedText); console.log(typeof decodedResult, decodedResult); emit(success, decodedText); stop(); params.dialogShow = false; }, (errorMessage) => { // parse error, ideally ignore it. For example: // console.log(`QR Code no longer in front of camera.`); console.log(非扫描成功日志:, errorMessage); } ) .catch((err) => { // Start failed, handle it. For example, console.log(`Unable to start scanning, error: ${err}`); }); }; const stop = () => { params.html5QrCode .stop() .then((ignore) => { // QR Code scanning is stopped. console.log(QR Code scanning stopped.); }) .catch((err) => { // Stop failed, handle it. console.log(Unable to stop scanning.); }); }; return { ...toRefs(params), getCameras, open }; }, }; </script> <style lang="scss" scoped> .readerDialog { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999999; background: #333; #reader { top: 25%; } } </style>

3.使用(以下只演示部分核心代码)

html部分

<van-button type="success" @click="cameraClick">开始扫描</van-button> <Qrcode ref="QrcodeRef" @success="qrcodeSuccess" />

js部分

import Qrcode from @/components/Qrcode/index.vue; const QrcodeRef = ref(); const qrcodeText = ref(); // 扫描调起 const cameraClick = () => { QrcodeRef.value.open(); }; // 扫描成功回调 const qrcodeSuccess = (txt) => { qrcodeText.value = txt; };

官网:https://github.com/mebjas/html5-qrcode

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
yolov4目标检测训练好模型打包至手机端(YOLOv8 目标检测 | 自定义数据集) 江苏迅睿(迅睿CMS模板框架安装步骤及优势)