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

应用场景: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!!!

相关推荐
2501_915909061 天前
uni-app iOS 上架常见问题与解决方案,实战经验全解析
android·ios·小程序·https·uni-app·iphone·webview
编程猪猪侠1 天前
uni-app与Vue3,实现3D圆柱形旋转画廊效果
3d·uni-app
BUG创建者1 天前
uniapp vue页面传参到webview.nvue页面的html或者另一vue中
vue.js·uni-app·html
编程迪1 天前
找活招工系统源码 雇员雇主小程序 后端JAVA前端uniapp
java·spring boot·uni-app
不吃香菜的猪1 天前
uniapp中使用echarts并且支持pc端的拖动、拖拽和其他交互事件
uni-app·echarts·交互
伍哥的传说1 天前
Uni-App + Vue onLoad与onLaunch执行顺序问题完整解决方案 – 3种实用方法详解
javascript·vue.js·uni-app·事件总线·onlaunch·onload·promise状态管理
金州_拉文1 天前
uniapp
前端·uni-app
懒大王95272 天前
uniapp 开发上架 iOS App全流程
uni-app
yuehua_zhang2 天前
uni app 的app 端调用tts 进行文字转语音
前端·javascript·uni-app
小浣熊喜欢揍臭臭2 天前
uniapp+vue3 微信小程序全屏广告组件功能
微信小程序·uni-app