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！！！