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

大嘴史努比2024-07-09 19:44

应用场景：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！！！