基于浏览器JS实现扫描二维码

共5个文件

js：3个

html：1个

css：1个

getUserMedia

qrcode

web调用摄像头

4星 · 超过85%的资源需积分: 28 63 下载量 196 浏览量 2020-12-28 08:58:07 上传评论 1 收藏 55KB ZIP 举报

温馨提示

基于H5流媒体，调用手机摄像头实现扫码实现原理：H5调用系统媒体设备》选择前置摄像头》捕获视频流》渲染到视频播放器》定时抓取视频截图》渲染到canvas》转换为图片流》使用图像识别库对图片流进行二维码识别优势： 1.基于浏览器实现，轻便且维护方便无需安装或借助其他app 。 2.PC端带有摄像头设备也可兼容。劣势： 1.部分浏览器不兼容（随着浏览器的更新兼容度会越来越高） 2.安全要求必须基于HTTPS访问。 3.夜拍模式不能自主控制开启补光。基于URL Scheme，调用第三方APP实现扫码实现原理：app之间为提高相互之间的深度连接性，会向系统注册一种自身功能API的快捷方式，利用其提供的快捷方式可以调用指定的app功能，如微信扫码支付宝扫码等。优势： 1.借用现有app实现扫码能力，无需另外安装兼容性好。 2.一键调用扫码，无需在应用间切换操作。 3.可以从第三app打开的webview中调用其提供的api接口获取部分系统信息、用户信息等。

资源详情

资源评论

资源推荐

收起资源包目录

QRcode.zip （5个子文件）

QRcode

main.js 5KB

adapter-latest.js 195KB

deQRcode.js 42KB

main.html 1KB

css

main.css 3KB

共 5 条

<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1"> <meta name="mobile-web-app-capable" content="yes"> <meta id="theme-color" name="theme-color" content="#ffffff"> <title>基于浏览器实现二维码扫描技术</title> <link rel="stylesheet" href="css/main.css"> </head> <body> <div class="qr-scanner hidden"> <div class="box"> <div class="line"></div> <div class="angle"></div> </div> <video id="video" playsinline autoplay></video> <div class="cc-btn-box hidden"> <input type="checkbox" name="change-cam-btn" id="change-cam-btn"> <label for="change-cam-btn">切换镜头</label> </div> </div> <div id="container"> <canvas id="qr-canvas"></canvas> <div id="render-code"></div> <button id="btn-start">系统摄像头扫码</button> <button><a href="weixin://scanqrcode">微信扫码</a></button> <button><a href="alipays://platformapi/startapp?saId=10000007">支付宝扫码</a></button> </div> <script type="text/javascript" src="js/deQRcode.js"></script> <script src="js/adapter-latest.js"></script> <script src="js/main.js" async></script> </body> </html>