位置: IT常识 - 正文

H5项目实现扫描二维码功能 -- html5-qrcode(h5实现扫码功能)

编辑:rootadmin
H5项目实现扫描二维码功能 -- html5-qrcode

推荐整理分享H5项目实现扫描二维码功能 -- html5-qrcode(h5实现扫码功能),希望有所帮助,仅作参考,欢迎阅读内容。

H5项目实现扫描二维码功能 -- html5-qrcode(h5实现扫码功能)

文章相关热门搜索词:h5实现扫码二维码,h5实现扫码二维码,h5 扫描,h5调用扫一扫功能,h5实现扫码二维码,h5调用扫一扫功能,h5实现扫码功能,h5实现扫码功能,内容如对您有帮助,希望把文章链接给更多的朋友!

vue3中使用html5-qrcode实现扫描二维码功能。

实现原理:调取手机摄像头扫一扫功能实现 注:调取手机摄像头需要再https协议下才可以,有的项目启动配置https:true可以实现启动的项目协议为https且可以访问,有的还是需要证书才能访问

实现1、下载html5-qrcodenpm i html5-qrcode2、使用<template> <div class="container" v-show="isShow"> <div id="reader"></div> </div></template><script setup>import { reactive, onMounted, onUnmounted, ref } from 'vue'import { showToast } from 'vant';import { Html5Qrcode } from 'html5-qrcode'let html5QrCode = ref(null)onMounted(() => { getCameras()})const onSearchOrder = () => { console.log('在运运单') router.push('order')}onUnmounted(() => { stop()})const getCameras = () => { Html5Qrcode.getCameras() .then((devices) => { if (devices && devices.length) { isShow.value = true html5QrCode = new Html5Qrcode('reader') // start开始扫描 start() } }) .catch((err) => { // handle err console.log('获取设备信息失败', err) // 获取设备信息失败 showToast('获取设备信息失败') })}const start = () => { html5QrCode .start( {facingMode: "environment" }, { fps: 20, // 设置每秒多少帧 qrbox: { width: 250, height: 250 } // 设置取景范围 // scannable, rest shaded. }, (decodedText, decodedResult) => { alert('扫码结果' + decodedText) }, (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 = () => { if (devicesInfo.value) { html5QrCode .stop() .then((ignore) => { // QR Code scanning is stopped. console.log('QR Code scanning stopped.', ignore) }) .catch((err) => { // Stop failed, handle it. console.log('Unable to stop scanning.', err) }) }}</script><style lang="scss" scoped>.container { position: relative; top: 0px; left: 0px; height: 100vh; width: 100%; background: rgba($color: #000000, $alpha: 0.48); z-index: 999;}#reader { top: 50%; left: 0; transform: translateY(-50%);}</style>

本文链接地址:https://www.jiuchutong.com/zhishi/273820.html 转载请保留说明!

上一篇:微软输入法打不出中文标点解决方法(微软输入法打不出汉字)

下一篇:清除COOKIES有什么好处?(清除cookies有什么用)

  • 电脑主机启动了但是显示器没反应(电脑主机)(电脑主机启动了但是显示器没反应)

    电脑主机启动了但是显示器没反应(电脑主机)(电脑主机启动了但是显示器没反应)

  • 苹果13promax勿扰模式在哪(苹果13promax勿扰模式怎么设置)

    苹果13promax勿扰模式在哪(苹果13promax勿扰模式怎么设置)

  • 快手如何添加频道(快手如何添加频道号)

    快手如何添加频道(快手如何添加频道号)

  • iphone光圈怎么调出来(iphone怎么调节光圈)

    iphone光圈怎么调出来(iphone怎么调节光圈)

  • 华为p40如何关闭应用(华为p40如何关闭正在运行的程序)

    华为p40如何关闭应用(华为p40如何关闭正在运行的程序)

  • rx570相当于什么n卡(rx570 相当于)

    rx570相当于什么n卡(rx570 相当于)

  • 取消oppo手机遮挡黑屏(取消oppo手机遮挡黑屏a96)

    取消oppo手机遮挡黑屏(取消oppo手机遮挡黑屏a96)

  • 苹果7plus支持无线充电吗(苹果7 plus带不带无线充电)

    苹果7plus支持无线充电吗(苹果7 plus带不带无线充电)

  • 正常4g网速是多少mdps(正常4g网速是多少mbps)

    正常4g网速是多少mdps(正常4g网速是多少mbps)

  • 微信中个别不显示来源(微信中个别不显示头像)

    微信中个别不显示来源(微信中个别不显示头像)

  • 手机m3.ans是什么文件(手机ams是什么意思?)

    手机m3.ans是什么文件(手机ams是什么意思?)

  • word怎么手写(word怎么手写公式)

    word怎么手写(word怎么手写公式)

  • 卡贴机没信号怎么解决(卡贴机没信号怎么办)

    卡贴机没信号怎么解决(卡贴机没信号怎么办)

  • 喜马拉雅有电脑版吗(喜马拉雅有电脑客户端吗)

    喜马拉雅有电脑版吗(喜马拉雅有电脑客户端吗)

  • word怎么显示修改的内容(Word怎么显示修改标记)

    word怎么显示修改的内容(Word怎么显示修改标记)

  • 手机怎么开启护眼模式(手机怎么开启护眼)

    手机怎么开启护眼模式(手机怎么开启护眼)

  • iphone11如何开启全面屏手势(iphone11如何开启骚扰电话拦截)

    iphone11如何开启全面屏手势(iphone11如何开启骚扰电话拦截)

  • oppo手机如何连接蓝牙(oppo手机如何连接华为蓝牙耳机)

    oppo手机如何连接蓝牙(oppo手机如何连接华为蓝牙耳机)

  • 快手名user怎么弄(快手用户名称)

    快手名user怎么弄(快手用户名称)

  • 抖音怎么知道谁看过我(抖音怎么知道谁转发了自己的作品)

    抖音怎么知道谁看过我(抖音怎么知道谁转发了自己的作品)

  • 手机淘宝查号截图是什么(怎么查淘宝号码查询)

    手机淘宝查号截图是什么(怎么查淘宝号码查询)

  • 独立显卡插在主板哪个槽(独立显卡插主板屏幕没反应)

    独立显卡插在主板哪个槽(独立显卡插主板屏幕没反应)

  • 华为哪些文件夹能删(华为的文件管理在哪个文件夹)

    华为哪些文件夹能删(华为的文件管理在哪个文件夹)

  • 微信封面尺寸(微信封面尺寸修改)

    微信封面尺寸(微信封面尺寸修改)

  • 抖音收藏的作品在哪里(抖音收藏的作品占内存吗)

    抖音收藏的作品在哪里(抖音收藏的作品占内存吗)

  • 快手申请解封(快手申请解封理由必过)

    快手申请解封(快手申请解封理由必过)

  • Servlet工作原理(servlet工作原理和生命周期)

    Servlet工作原理(servlet工作原理和生命周期)

  • 小型微利企业所得税率
  • 申报个人所得税在哪里报
  • 设备进项税额转出会计分录
  • 预付卡发票可以报销吗?
  • 未填开发票怎么作废
  • 什么情况下当月不排卵
  • 收到赠品入库需要用什么记录
  • 车贷抵押金计入会计科目?
  • 冲减预付账款怎么记账
  • 投资款打到个人账户算诈骗吗
  • 代销产品缴纳增值税吗
  • 个人开增值税普票有没有限额
  • 成本票最多开多少
  • 拒绝税务检查的情形
  • 申报文化事业建设费
  • 建筑行业小规模企业所得税税率
  • 小规模季度不超过30万元免税会计分录
  • 超市预付卡发票如何入账
  • 对公账户短信服务费怎么取消
  • 自产原材料
  • 出口退免税的基本政策包括
  • 电脑主板bios设置
  • 个人销售自己使用过的物品免征增值税
  • word要打印保存在哪个类型
  • 如何设置win10电脑开机不黑屏
  • win10通讯
  • php .htaccess
  • php数组函数输出《咏雪》里有多少"片"字
  • 电脑开不了机一直重启
  • 住房贷款利息支出专项附加抵扣
  • php declare
  • 给企业法人缴纳社保流程
  • 银行发行债券要求
  • vue3当中如何监听新增的属性
  • html+css登录页面
  • 投资性房地产在资产负债表中的列示
  • 小规模纳税人附加税减免政策2023
  • 产品成本计算的分类法适用于( )
  • 火车票丢了还能再取吗
  • 保税仓库税收政策
  • MySQL ERROR 2013 (HY000)错误解决方法
  • 小规模纳税人地方教育费附加税率
  • 物业公司购买空调合法吗
  • 增值税进项税销项税月末需要结转吗
  • 社保怎么交最划算
  • 进项税额是意思
  • 存货核算方法有五种
  • 预提费用没有收到发票也没有付款
  • 已抵扣发票红冲做进项税转出
  • 银行贴息一般多久能到账
  • 生产成本有贷方余额怎么调整
  • 递延所得税资产怎么计算
  • 银行承兑汇票贴现利息怎么算
  • 增值税开票系统怎么改开票人名字信息
  • 少做收入第二年怎么算
  • 员工餐补是放入福利费吗?
  • 什么是格式良好的xml文档
  • mysql无法创建函数
  • mac中mysql应该怎么运行
  • 安装windowsserver2008r2提示无法定位程序输入点
  • 电脑出windows
  • os x10.10.5 beta下载 mac os x10.10.5beta官方下载地址
  • win8语言栏不见了 怎么调出来
  • Win8系统网络SSID怎么设置?Win8设置网络SSID的方法
  • 潘 pan
  • js中如何实现数字相加
  • 批处理在windows中的典型应用
  • html5画布五角星
  • unity system
  • python简明
  • pythone爬虫
  • 安卓手机与电脑连接方法
  • python编程内容
  • android mvp mvc
  • 重庆国税电子税务登录
  • 暂停资本化期间,一般借款的借款利息不允许资本化
  • 江苏省的发票如何查验真伪
  • 甘肃是什么时候属于中国的
  • 重庆税务电子发票登录
  • 注册海外公司如何注册
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设