1.需求:H5网页调用手机摄像头扫码

2.如何探索解决？

先自己思考一下

常见的基本都是app和小程序里面调用摄像头扫码的比较多，h5页应该也有对应的解决方案。

然后就去找万能的百度，看看别人是怎么解决的？至少看5~10个方案，然后找到和自己需求相关的，然后写demo测试下。

3.解决方案？

方案一：使用 quaggaJS识别

调用摄像头并获取视频流输出到web

使用canvas进行周期性截图

条形码识别

quaggaJS的github：quaggaJS的github地址

参考的几个例子

https://www.cnblogs.com/yaotome/p/9450274.html
这个例子我测了下，只能用图片上传的方式识别，且识别度不高。
https://www.freesion.com/article/8748758802/
这个例子看起来不错，还没来的及去test，就想着用方案2去解决了。有兴趣的自己去试试。

方案二：调用微信公众号的js-jdk来调用摄像头

微信公众号官方开发文档：官方开发文档官网最权威，多看看，扣扣字眼，避免很多坑

错误码大全:这个很重要，知道错在哪里

微信公众平台接口调试工具这个很方便

微信 JS 接口签名校验工具很实用，可以比对自己的生成的签名是否正确

参考几个例子

https://www.codetd.com/article/7762368
这个例子写的很详细，思路很清晰，可以参考参考。
https://blog.csdn.net/weixin_43369521/article/details/86649324
这个例子写的很好，配置域名、ios这些坑都说出来了。

4.遇到的坑

要使用域名来进行测试测下，ip是不行的。（因为穷不想买域名，我用的是花生壳，自行百度如何映射域名）
我在前端生成签名，签名都是正确的，但是在wx.config是报63002的错，折磨死我了。最后还是改用后端生成签名返回给我的方法解决的。
传入的url到后端生成签名的问题:刚开始传的是 location.href.split(’#’)[0]但是就报错了63002，看到有人是这样写的 let hashurl= location.href.split(’#’)[0]//动态获取当前地址必须和安全域名一致注微信官方检测这里不能写死。
原文如下:https://blog.csdn.net/weixin_43208652/article/details/105813702
而我的就直接传location.href就对了，也不用转码（encodeURIComponent()）
ios手机不能正常使用的问题。刚好查到一个文档，可以参考https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/iOS_WKWebview.html有本地配置域名的方案；还有说是：***IOS分享的时候，在微信开发工具上一切正常，但到真机上之后，IOS自定义分享并不生效，排除掉分享图片大小，url合法性等问题之后。一个主要原因是：
IOS微信浏览器记录的是第一次打开页面时的URL，也就是说，前端路由跳转时，IOS的url地址栏并不会根据前端路由改变，所以，当调用wx.config()时，你所注册的当前页面url还是第一次进入页面的url，所以获取到的时间戳，签名等参数，并不是当前前端路由所需要的，也就导致分享失败***说是进入之后强刷一遍：window.location.href = window.location.href，但是我试了之后没效果。而且我发现一个神奇的现象，我在ios微信浏览器alert（“xxxx.xx/#/xxx”）时候，会自动把#号给省略了。
config:fail,Error: 系统错误,错误码:63002,invalid signature 这个错误码的原因（63002 无效的签名）：ip为配置白名单，access_token过期、传入的url不对、随机字符串和时间戳都必须是字符串
ios解决方案test：
6.1 对ios注册config时候可以考虑传的url是编码的：encodeURIComponent(url);上班的时候试试。
6.2 微信JS-SDK 接口注册问题 IOS系统
6.3 这位仁兄修改了源码
6.4https://developers.weixin.qq.com/community/develop/doc/00068a383541b06407fa1737d5d800
6.5 http://www.10qianwan.com/articledetail/636592.html
6.6 https://www.cnblogs.com/lsyverygood/p/12156703.html
6.7

5. 参考

1.https://blog.csdn.net/qq_28218253/article/details/106534290
2. 微信JS-SDK 接口注册问题 IOS系统

6.总结

纸上得来终觉浅

【技术】H5网页调用手机摄像头扫码相关推荐

使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5做了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了不少时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
html调起苹果手机摄像头_使用HTML5+调用手机摄像头和相册
前言: 前端时间使用HTML5作了一个WEB端APP,其中用到了H5页面调用手机摄像头的功能,当时也是花了很多时间去研究.最终是采用了HTML5plus(HTML5+)的方式完成了该功能,现将具体方法 ...
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码。单纯的h5网页不涉及真机
vue项目中实现H5调取摄像头扫码扫一扫功能+生成可识别的条形码. 单纯的h5网页不涉及真机 demo链接前端同学可以加我一起交流一起进步案例描述:需求是生成条形码并且在vue项目中实现扫一扫功能 ...
前端调用手机摄像头权限进行扫码解析
前端调用手机摄像头权限进行扫码解析(demo含Vue及原生) 前端调用手机摄像头权限进行扫码解析(demo含Vue及原生js写法) 引子实践此时已经可以成功调用摄像头,接下来集成进Vue工程中最 ...
H5调用手机摄像头，实时拍照上传（旧）
H5调用手机摄像头,完成拍照,实时上传(旧) 项目开发中,偶尔会遇到网页中调用手机摄像头,通过相册选择或直接实时拍照的方式,完成图片上传的功能型需求. 今天,就通过一个小的案例,演示一下完整的实现流程 ...
H5调用手机摄像头拍照，如何压缩后上传
H5调用手机摄像头拍照后,怎样压缩再上传? 实际的压缩功能,就是利用canvas画布功能,将图片进行裁剪后保存图片的base64数据流,然后上传. 案例全部代码,示下: <!DOCTYPE ht ...
vue实现点击按钮调用摄像头扫码
vue在APP端点击[扫码签到]按钮实现调取摄像头扫码: 1.按钮页面: <template><div><button @click="scanCode&quo ...
利用JS调用手机摄像头小功能源码
介绍: 一个小功能源码,利用JS调用手机摄像头,当访问网址后就能拍摄照片,前提是客户端给了权限. 1.由于系统安全机制,ios系统必须使用自带的Safari浏览器(或者第三方APP调用的是Safari ...
h5调用手机摄像头获取图片用于人脸识别
h5调用手机摄像头获取图片用于人脸识别 1.安卓手机获取前置摄像头,并在video标签显示注:navigator.mediaDevices.getUserMedia文档说明兼容Safari11,实测 ...
vue qrcodejs2生成二维码实现手机APP扫码进行web网页登录
在vue中使用 qrcodejs2 1.安装 npm install qrcodejs2 --save 2.引入 import QRCode from "qrcodejs2" 3 ...

【技术】H5网页调用手机摄像头扫码

H5网页调用手机摄像头扫码

1.需求:H5网页调用手机摄像头扫码

2.如何探索解决？

先自己思考一下

3.解决方案？

方案一：使用 quaggaJS识别

方案二：调用微信公众号的js-jdk来调用摄像头

4.遇到的坑

5. 参考

6.总结

【技术】H5网页调用手机摄像头扫码相关推荐

最新文章

热门文章