h5的扫一扫功能 (非微信浏览器环境下)

必须在 https 域名下才生效

<template><div><van-field label="服务商编码" right-icon="scan" placeholder="扫描二维码获取" @click-right-icon="getCameras" />    <div class="scan" :style="{'display':isScan ? 'none' : ''}"><div id="qr-reader" width="400px" height="400px"></div></div>
</template>
<script>
import util from "../common/util.js";
export default {data() {return {cameraId: 0,//相机idisScan:true,};},mounted() {this.init();},// 页面销毁周期关闭相机beforeDestroy() {this.stop();},methods: {init() {util.addJs("https://blog.minhazav.dev/assets/research/html5qrcode/html5-qrcode.min.js");},// 开始扫描getCameras() {Html5Qrcode.getCameras().then(devices => {if(devices){if (devices.length==1) {this.cameraId = devices[0].id;}else{this.cameraId = devices[1].id;}this.start();}}).catch(err => {this.$notify({ type: 'warning', message: '调用摄像头失败 : ' + err});});},// 启动相机start() {this.isScan = false;this.html5QrCode = new Html5Qrcode("qr-reader");this.html5QrCode.start(this.cameraId,{fps: 10,qrbox: { width: 250, height: 250 }},qrCodeMessage => {if (qrCodeMessage) {this.stop();}}).catch(err => {console.log(`Unable to start scanning, error: ${err}`);});},// 关闭相机stop() {this.isScan = true;this.html5QrCode.stop().then(ignore => {console.log("QR Code scanning stopped.");}).catch(err => {console.log("Unable to stop scanning.");});},}
};
</script>
<style lang="less" scoped>.scan{width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;flex-direction: column;overflow: hidden;}
</style>

util.js文件

const addJs=function (url) {return new Promise((resolve, reject) => {const script = document.createElement('script')script.src = urlscript.type = 'text/javascript'document.body.appendChild(script)script.onload = () => {resolve()}})
}
export default {addJs}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/165648.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CyclicBarrier线程同步

关于作者&#xff1a; CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP&#xff0c;带领团队单日营收超千万。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业化变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览…

软考系统架构设计师考试冲刺攻略

系统架构冲刺攻略 上篇为综合知识&#xff0c;介绍了系统架构设计师应熟练掌握的基本知识&#xff0c;主要包括绪论、计算机系统、信息系统、信息安全技术、软件工程、数据库设计、系统架构设计、系统质量属性与架构评估、软件可靠性、软件架构的演化和维护、未来信息综合技术等…

PHPEXCEL解决行数超过65536不显示问题

起因自然是导出数据到excel文件时&#xff0c;数据缺少现象。 百度讲解是将xls文件另存为xlsx文件。 除了这里的原因&#xff0c;还有一点是phpExcel存在两个写入类PHPExcel_Writer_Excel2007和PHPExcel_Writer_Excel5&#xff0c;而只有PHPExcel_Writer_Excel2007支持超过65…

NLP Bi-Encoder和Re-ranker

Retrieve & Re-Rank https://www.sbert.net/examples/applications/retrieve_rerank/README.html Bi-Encoder vs. Cross-Encoder https://www.sbert.net/examples/applications/cross-encoder/README.html Bi-Encoder会用BERT对输入文本编码&#xff0c;再根据cosine相似度…

Autosar诊断实战系列25-UDS 0x27服务相关问题思考

本文框架 前言0x27服务几个相关问题1. 安全访问种子的随机数能不能是全0?2. 安全级别之间是否有联系?是怎么确定的?3. 安全访问错误计数器具体变化策略?前言 在本系列笔者将结合工作中对诊断实战部分的应用经验进一步介绍常用UDS服务的进一步探讨及开发中注意事项, Dem/D…

华为云HECS服务器下docker可视化(portainer)

一、docker安装 华为云HECS安装docker-CSDN博客 二、portainer安装 portainer地址&#xff1a;Portainer: Docker and Kubernetes Management Platform 当前portainer分CE&#xff08;开源版&#xff09; 和 BE&#xff08;商业版&#xff09;&#xff0c;用CE即可 1 创建…

RK3568驱动指南|第七期-设备树-第58章 实例分析:时钟

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…

类的继承简介

一、声明格式&#xff1a; class 子类名&#xff1a;继承方式(public private protected) 父类名{子类成员表} 二、继承过程&#xff1a; 吸取父类成员——>改造父类成员——>添加新成员 三、作用&#xff1a; 子类会继承父类中的方法(不包括构造和析构函数)与属性 …

stable diffusion如何解决gradio外链无法开启的问题

问题确认 为了确认gradio开启不了是gradio库的问题还是stable diffusion的问题&#xff0c;可以先执行这样一段demo代码 import gradio as grdef greet(name):return "Hello " name "!"demo gr.Interface(fngreet, inputs"text", outputs&q…

Vue生命周期钩子

vue生命周期表示在组件创建后的一系列变化&#xff0c;其中钩子函数会在生命周期的关键节点中被调用 为什么在beforeCreated()时&#xff0c;data和methods方法还没有创建&#xff0c;但是在beforeCreated()里面打印this可以看到data相关的数据&#xff1f; 跟浏览器有关&…

FL Studio中文最新21破解版本水果软件下载

那么&#xff0c;大家知道编曲是什么吗&#xff1f;编曲和作曲又有什么区别呢&#xff1f; 一首歌的制作过程通常是由作词或作曲开始的&#xff0c;作曲就是运用基本乐理、和声学、复调、配器法、曲式结构的技术理论体系来表达创作者音乐思想的方法。说白了其实就是制作一首歌…

LeetCode13——罗马数字转整数

解题思想&#xff1a; 前后指针 左边比右边小 做减法 左边比右边大 做加法 最后一个数字直接加。 package keepcoding.leetcode.leetcode13;public class Result02 {public static void main(String[] args) {int result romanToInt("XIV");System.out.println(re…

设计模式:模板模式(C#、JAVA、JavaScript、C++、Python、Go、PHP)

简介&#xff1a; 模板模式&#xff0c;它是一种行为型设计模式&#xff0c;它定义了一个操作中的算法的框架&#xff0c;将一些步骤延迟到子类中实现&#xff0c;使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤。 通俗地说&#xff0c;模板模式就是将某一行…

C++初阶(五)类和对象

文章目录 一、C两大类型二、类的6个默认成员函数三、构造函数1、概念2、特性1、构造函数自动调用特性演示2、无参有参调用两种情况演示3、函数重载演示4、默认构造函数组成及演示5、内置类型成员不初始化的补丁演示 3、析构函数1、概念2、特性1、代码演示2、析构两种情况 4、构…

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法 先看一下效果图&#xff08;想在表单里动态的增删 form-item&#xff0c;然后添加rules&#xff0c;校验其必填项&#xff1b; &#xff09;: html部分 <div v-for"(item, index) in …

GitHub下载太慢的解决方案

修改hosts文件&#xff1a; windows的hosts文件在 C:\Windows\System32\drivers\etc\hosts cmd管理员运行命令notepad C:\Windows\System32\drivers\etc\hosts 然后cmd命令重启网络ipconfig /flushdns windows修改hosts Ubuntu22.04修改hosts sudo vim /etc/hosts # This fil…

基于北方苍鹰优化的BP神经网络(分类应用) - 附代码

基于北方苍鹰优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码 文章目录 基于北方苍鹰优化的BP神经网络&#xff08;分类应用&#xff09; - 附代码1.鸢尾花iris数据介绍2.数据集整理3.北方苍鹰优化BP神经网络3.1 BP神经网络参数设置3.2 北方苍鹰算法应用 4.测试结果…

13 Multi-Head Self-Attention(从空间角度解释为什么做多头)

博客配套视频链接: https://space.bilibili.com/383551518?spm_id_from=333.1007.0.0 b 站直接看 配套 github 链接:https://github.com/nickchen121/Pre-training-language-model 配套博客链接:https://www.cnblogs.com/nickchen121/p/15105048.html 上节课回顾 0:40 At…

系统架构之微服务架构

微服务架构 一.传统的单体架构与微服务架构的区别1.1 单体架构1.1.1 优点1.1.2 缺点 1.2 微服务架构1.2.1 优点1.2.2 面临的问题与挑战 二. 微服务架构模式方案2.1 聚合器微服务2.2 链式微服务2.3 数据共享微服务2.4 异步消息传递微服务 三. SOA与微服务的区别 微服务&#xff…