html5-qrcode前端打开摄像头扫描二维码功能

html5-qrcode前端打开摄像头扫描二维码功能_第1张图片

实现的效果如图所示,全屏打开并且扫描到二维码后弹窗提醒,主要就是使用html5-qrcode这个依赖库,html5-qrcode开源地址:GitHub - mebjas/html5-qrcode: A cross platform HTML5 QR code reader. See end to end implementation at: https://scanapp.org

使用文档:Getting started | ScanApp

安装依赖:

pnpm install --save-dev html5-qrcode

弹窗提示我用的vant这个ui库,开源地址:GitHub - youzan/vant: A lightweight, customizable Vue UI library for mobile web apps.

然后在项目中使用,我使用的是vue:






你可能感兴趣的:(HTML前端,html5,前端,html)