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

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

2.如何探索解决？

先自己思考一下

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

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

3.解决方案？

方案一：使用 quaggaJS识别

1. 调用摄像头并获取视频流输出到web
2. 使用canvas进行周期性截图
3. 条形码识别

quaggaJS的github：quaggaJS的github地址

参考的几个例子

1. https://www.cnblogs.com/yaotome/p/9450274.html
   这个例子我测了下，只能用图片上传的方式识别，且识别度不高。

2. https://www.freesion.com/article/8748758802/
   这个例子看起来不错，还没来的及去test，就想着用方案2去解决了。有兴趣的自己去试试。

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

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

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

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

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

参考几个例子

1. https://www.codetd.com/article/7762368
   这个例子写的很详细，思路很清晰，可以参考参考。

2. https://blog.csdn.net/weixin_43369521/article/details/86649324
   这个例子写的很好，配置域名、ios这些坑都说出来了。

4.遇到的坑

1. 要使用域名来进行测试测下，ip是不行的。（因为穷不想买域名，我用的是花生壳，自行百度如何映射域名）
2. 我在前端生成签名，签名都是正确的，但是在wx.config是报63002的错，折磨死我了。最后还是改用后端生成签名返回给我的方法解决的。
3. 传入的url到后端生成签名的问题:刚开始传的是 location.href.split(’#’)[0]但是就报错了63002，看到有人是这样写的 let hashurl= location.href.split(’#’)[0]//动态获取当前地址 必须和安全域名一致 注微信官方检测这里不能写死。
   原文如下:https://blog.csdn.net/weixin_43208652/article/details/105813702
   而我的就直接传location.href就对了，也不用转码（encodeURIComponent()）
4. 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”）时候，会自动把#号给省略了。
5. config:fail,Error: 系统错误,错误码:63002,invalid signature 这个错误码的原因（63002 无效的签名）：ip为配置白名单，access_token过期、传入的url不对、随机字符串和时间戳都必须是字符串
6. 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.总结

纸上得来终觉浅