uni-app-H5页面调用设备摄像头扫描二维码

news/2024/10/5 23:14:20/

应用场景:APK里面webView,访问用uniapp写的H5页面,需要调用设备摄像头扫描二维码

首先下载导入扫描插件:H5调用摄像头识别二维码(原生H5调用,不需要任何sdk,本地扫描识别,不需要后端) - DCloud 插件市场

插入好之后,新建页面用于展示扫描界面

<template><view><mumu-get-qrcode @success="qrcodeSucess" @error="qrcodeError" :continue="false"><template v-slot:error><view>摄像头启动失败</view></template></mumu-get-qrcode></view>
</template><script>
import mumuGetQrcode from '@/uni_modules/mumu-getQrcode/components/mumu-getQrcode/mumu-getQrcode.vue'
export default {components: {mumuGetQrcode},data() {return {}},methods: {qrcodeSucess(data) {uni.showModal({title: '成功',content: data,success: () => {uni.navigateBack({})}})},qrcodeError(err) {console.log(err)uni.showModal({title: '摄像头授权失败',content: '摄像头授权失败,请检测当前浏览器是否有摄像头权限。',success: () => {uni.navigateBack({})}})}}
}
</script><style></style>

点击扫描按钮

//扫描二维码saomiao() {uni.navigateTo({url: `/pages/saomiao/saomiao`})},

这样就可以打开扫描界面,返回你扫描得到的信息。

切记!!!H5页面的环境必须是HTTPS!!!

切记!!!H5页面的环境必须是HTTPS!!!

切记!!!H5页面的环境必须是HTTPS!!!


http://www.ppmy.cn/news/1473638.html

相关文章

实现浏览器语音呼起及语音录入及下载

主要分布三部分: 第一部分:开始录音 ;第二部分:停止录音;第三部分:静默监听。 一、开始录音 代码如下: document.getElementById(startRecording).onclick = async function() {if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {try {au…

【代码随想录算法训练营第六十天|并查集、卡码网107.寻找可能存在的路径】

文章目录 卡码网107.寻找可能存在的路径 并查集基础内容还是看代码随想录 并查集 卡码网107.寻找可能存在的路径 纯并查集的基础应用&#xff0c;并查集只是看元素是否在同一个集合中&#xff0c;因此在加入的时候需要先查看两个元素是否已经在一个并查集中&#xff0c;如果不…

大数据处理系统架构特征

Storm之父Nathan Marz在《大数据系统构建&#xff1a;可扩展实时数据系统构建原理与最佳实践》一书中&#xff0c;提出了他认为大数据系统应该具有的属性。 1.鲁棒性和容错性&#xff08;Robust and Fault-tolerant&#xff09; 对大规模分布式系统来说&#xff0c;机器是不可…

golang线程池ants-实现架构

1、总体架构 ants协程池&#xff0c;在使用上有多种方式(使用方式参考这篇文章&#xff1a;golang线程池ants-四种使用方法)&#xff0c;但是在实现的核心就一个&#xff0c;如下架构图&#xff1a; 总的来说&#xff0c;就是三个数据结构&#xff1a; Pool、WorkerStack、goW…

基于深度学习LightWeight的人体姿态检测跌倒系统源码

一. LightWeight概述 light weight openpose是openpose的简化版本&#xff0c;使用了openpose的大体流程。 Light weight openpose和openpose的区别是&#xff1a; a 前者使用的是Mobilenet V1&#xff08;到conv5_5&#xff09;&#xff0c;后者使用的是Vgg19&#xff08;前10…

论文阅读之旋转目标检测ARC:《Adaptive Rotated Convolution for Rotated Object Detection》

论文link&#xff1a;link code&#xff1a;code ARC是一个改进的backbone&#xff0c;相比于ResNet&#xff0c;最后的几层有一些改变。 Introduction ARC自适应地旋转以调整每个输入的条件参数&#xff0c;其中旋转角度由路由函数以数据相关的方式预测。此外&#xff0c;还采…

【pearcmd】通过pearcmd.php 进行GetShell

https://cloud.tencent.com/developer/article/2204400 关于PHP 配置 register_argc_argv 小结 的一些研究文章。 应用例题 [NewStarCTF 2023 公开赛道]Include &#x1f350; <?phperror_reporting(0);if(isset($_GET[file])) {$file $_GET[file];if(preg_match(/flag|l…

经典双运算放大器LM358

前言 LM358双运放有几十年的历史了吧&#xff1f;通用运放&#xff0c;很常用&#xff0c;搞电路的避免不了接触运放&#xff0c;怎么选择运放&#xff0c;是工程师关心的问题吧&#xff1f; 从本文开始&#xff0c;将陆续发一些常用的运放&#xff0c;大家选型可以参考&#…