欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 艺术 > uni-app-H5页面调用设备摄像头扫描二维码

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

2024/10/24 22:24:39 来源:https://blog.csdn.net/qq_42371932/article/details/140206113  浏览:    关键词: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!!!

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com